Filepicker.io helps developers connect to their users' content.

Connect your web/mobile application to Dropbox, Gmail, Facebook, et al. plus dragdrop, image conversion, and upload acceleration. Visit: www.filepicker.io

Customer Showcase: Videolean integrates Filepicker and saves time!

Here at Filepicker we are constantly impressed how our customers are using our app. This week we wanted to share how Videolean is using Filepicker to enhance their app for their users.

About Videolean

Videolean is helping small business owners to grow their business with the most powerful marketing tool nowadays: videos. Entrepreneurs want videos to promote their businesses. However, they normally can’t afford a video production company, neither have the video editing knowledge.

Videolean offers a wide range of professional template videos easy to customize and affordable for everyone. Select a template, type texts, upload images, select a soundtrack and you already have an HD professional video.

Startups, restaurants, real state, universities, community managers, SEO agencies, marketers…you name it. Videolean is a solution for everyone who believes in the power video has to radically boost a business visibility.

Problem

Images are one of the most important features to let people customize their professional template videos in Videolean. Business owners have their images in several locations such as their desktop, Facebook, Dropbox and Instagram, just to name a few. In addition, we needed to make the uploading process as easy as possible, specially since we deal with non-tech people.

Solution

Filepicker turned out to be the best solution so far to let us offer the uploading images feature without barely coding anything. Users can customize their template videos in Videolean at the click of a button thanks to Filepicker. Creating something similar by ourselves would have taken us too much time, which we need to develop our core value.

Do you have an app that uses Filepicker that you want to share? Send us a note!

How Caching Works in Filepicker

There are three steps of caching in Filepicker. The following are Filepicker’s internal cache layers, with the first layer being the browser:

  1. The first layer is the browser cache. Whenever Filepicker returns a file, whether it was converted or not, the file is loaded with a cache control response header telling the browser to cache the file.

  2. The second is S3. All previously converted files are loaded from Filepicker’s S3 Bucket.

  3. Before a file is converted, it will be stored in Redis.

Here’s this process further explained:



Browser Caching In Filepicker For Regular Files

The first kind of caching in Filepicker is for regular and converted files. This kind of cache is set in a user’s browser, and allows setting a cache control header in their HTTP response. There are currently only two browser cache options. If cache=true, the file will be cached for 10 years. If cache=false, it will not be cached.

Javascript Example

var input = document.getElementById("read-input");
var output = document.getElementById("read-result");
if (!input.value) {
    console.log("Choose an image to read below");
} else {
    filepicker.read(input, {cache: true},
        function(imgdata){
            output.src = 'data:image/png;base64,'+imgdata;
            console.log("Read successful");
        }, function(fperror) {
            console.log(fperror.toString());
        }
   );
}

REST Example


>>> curl -I https://www.filepicker.io/api/file/hFHUCB3iTxyMzseuWOgG?cache=true
HTTP/1.1 200 OK
...
Cache-Control: public, max-age=315360000, no-transform
...
>>> curl -I https://www.filepicker.io/api/file/hFHUCB3iTxyMzseuWOgG?cache=false
HTTP/1.1 200 OK
...
Cache-Control: no-cache
...

View the docs!

Caching for Converted Files Explained

If this were a new conversion, the first request to convert this file with its set of parameters would take a little extra time as this conversion will be performed.

Once a conversion request is completed, the converted file is delivered to Filepicker’s S3, and the original file is stored in our Redis server.

Every subsequent request with the same parameters will be cached delivered from S3 to prevent from being converted multiple times.

The original file is stored in Redis for different conversion requests. Then, the file doesn’t have to be sourced from it’s original location, and increases the speed of conversions.

thedatabank Integrates Filepicker Into CRM

Remote Storage and Cloud-Based Uploads A Perfect Fit

Recently, thedatabank integrated Filepicker into their nonprofit CRM software. We spoke to Sue Ponsford, Director of Technical and Client Services and William Naylor, Data Migration Specialist at thedatabank to find out why they chose Filepicker.

First, Here’s Some Background On The Data Bank


Sue Ponsford
Director of Technical
and Client Services

Thedatabank is an online company that caters to the nonprofit market space. The all-in-one solutions are provided in the cloud and combine fundraising, advocacy and e-communication. This includes member management, online donations, volunteer management, meetings and events, and legislative advocacy, both on state and federal levels.

Thedatabank’s nonprofit software is a combined database with tools that have grown over the years to meet their customer’s needs. The CRM started out with people and donations but has expanded functionality to their tools over the years.

Enter Filepicker

Thedatabank was looking for a tool like Filepicker for two purposes:

  • Thedatabank’s solutions keep everything you need in one place, with a customized setup to meet their client needs. They were regularly getting requests to attach files to people’s records, and were looking for a way to address that need.
  • Simultaneously, they were also looking for a way of handling prospective clients who needed an easy way to send their data for data migration estimates. They had been using an online file attachment tool, but it recently became unreliable.

“We’d been looking solutions for our data migration challenge,” say Sue Ponsford. “We started out by searching for products that were file transfer or file storage platforms. None of them were exactly what we needed. Most of them are designed to share files with clients, as opposed to clients sharing files with us. From that front, we looked at a couple different tools and nothing worked.”

“I found Filepicker in Hacker News,” adds William Naylor. “Typically, I’ll read Hacker News and bookmark articles on what sort of tools exist for certain tasks. I wasn’t able to find any other tools that do what Filepicker does.”

Why Filepicker Is The Perfect Fit For The Data Bank


William Naylor
Data Migration Specialist

According to William Naylor, there were two things that really made Filepicker a fit for thedatabank:

  1. Remote Storage: thedatabank didn’t want to store the files on their own servers. So, being able to store them on the Amazon storage platform and retrieve them from there was a great feature.

  2. Uploading Files From Different Locations: The Filepicker widget which allows users to get files from different locations made it more attractive than tools that just allow users to upload files from their computers.

“Filepicker just does what we need it to do,” Sue Ponsford asserts. “So many times what we’re looking for isn’t quite what exists. Since our market is a bit different, we’re often trying to put together solutions that our clients will like. This one just worked, and the integration of Filepicker with our tools was straightforward.”

iOS Filepicker 3.0.3 Updates

Several updates were recently made to the iOS Filepicker library, so we thought we’d go over a few of the important changes we’ve made. 90% of these changes were based on issues reported by GitHub users. Thanks to everyone for your support and for helping us build a better Filepicker!

Benefits Of Using Filepicker vs. Standard iOS Picker

Standard iOS Picker: The default iOS picker that comes with your device allows you to upload local files from your photo album. You can also take videos or photos from your camera inside the app and upload them.

Filepicker: The biggest benefit of using Filepicker in your iOS app is being able to upload any file from dozens of external cloud services like Dropbox, Box, Google Drive, Evernote, and more. Whether local sources on your phone, or sources from your cloud providers, Filepicker makes it easy to upload any type of file to your device.

Filepicker Supports iOS 6 and Later

All of the code in the Filepicker library was updated to use modern Objective-C syntax and some classes were refactored. As of version 3.0, Filepicker has excellent support for the user interfaces on iOS 6, iOS 7 and later.

Introducing CocoaPods Support

Another new aspect we introduced is CocoaPods support. CocoaPods is the most efficient way to distribute your libraries in a centralized repository. With CocoaPods, Filepicker is encapsulated in one line of code. It’s the easiest way to get Filepicker in your iOS application.

Prior to CocoaPods, users had to copy the framework and bundle it into their project (which we still also support). However, integrating your library is much easier with CocoaPods. You can find CocoaPods installation instructions here.

AFNetworking Upgrade

In addition, we upgraded to modern AFNetworking. This makes it easy for users to log in with iPhone 4, for instance. For those curious about what AFNetworking does, it’s the library powering HTTP networking. Everything depends on it, so this was an important change.

Faster, Reliable Uploads

Prior to this update, videos or images were fully loaded into memory before they were uploaded, and videos could be potentially larger than the memory available on a device. Now, the contents from those large files are streamed from the disk and uploaded in chunks when possible. This important fix increases the speed with which users can upload files, and also allows them to upload files that are larger than the amount of memory on their phones.

Google Drive Fixes

Some of our customers requested changes to uploads from Google Drive. We’ve made improvements that provide more stability to this process.



Now that Filepicker fully supports iOS 6, we’re working on new features for iOS 7 and iOS 8. If you’re using Filepicker to develop an app using iOS 7 and iOS 8, please get in touch with us so we can do a case study. If you have any suggestions for improving Filepicker on iOS, or you’re just stoked about it, give us a shout! We love to hear from our customers!

Install Your Own Filepicker Developer App On Dropbox

White Label Your Custom Dropbox App

On Filepicker’s scale plan, you can have a complete white labeled experience to connect your own dropbox account. It will enable your users to pick files from their dropbox via your custom application. Follow along with the steps below. It should take you less than 7 minutes to setup!

How To Use Your Custom Dropbox Application With Filepicker

Login to the Filepicker Developer Portal, and on the bottom left, click Auth Keys, and scroll down to Dropbox. We will need to fill in these two fields from Dropbox: App Key, and App Secret. Lets open a new tab and head on over to https://developers.dropbox.com.

Once logged in, follow these steps:

  1. Click on App Console in the top left column.
  2. Select “Create App.”
  3. You’re then asked: “What type of app do you want to create?” Select “Dropbox API app” on the right.
  4. Next, you’re asked: “What type of data does your app need to store on Dropbox?” Select “Files and datastores.”
  5. Then, you’re asked: “Can your app be limited to its own folder?” Select “No”
  6. Next, you’re asked: “What type of files does your app need access to?” Select “All file types
  7. Lastly, you’re asked to enter your application name.
  8. Agree to the Dropbox API Terms and Conditions, and click “Create app.”

Once you’ve completed these steps, you’ll be brought to a page with your App Key and App Secret. Copy these keys into the developer portal. Back in your Dropbox under Settings > Security, at the bottom of the page under “Apps linked” you’ll find the app you just created listed there.

Try Out Filepicker’s Scale Plan

That’s how you use your custom Dropbox application with Filepicker. As you can see, creating a custom Dropbox app with Filepicker is easy. Get on our Scale plan and try it out.

Filepicker To Add Multi-Language Support

Filepicker is used in many countries around the world, and we want to support our international users by enabling multi-language support. You will soon be able to integrate Filepicker in the native language of choice.

We currently have support for Simplified Chinese and Polish. Spanish and Traditional Chinese are coming at the end of the month. We will be adding other languages based on customer request.

Filepicker Automatically Switches User Languages Based On Browser Language Settings

Filepicker’s default language is English, but if you have another language specified in your browser’s language settings, it will automatically switch to that language. As everyone knows, Google Translate and other translation tools only give an approximation of a translation, which typically ends up being inaccurate. We hope to have full support for all languages, and are currently looking to our users to help with translation.

Calling All Translators

We know that translation can be complex, and that’s why we’re looking for help. If you would like to help translate Filepicker into a language that you work with, please contact us: support@filepicker.io.

Make Filepicker Look Like Your Site - Now With Custom CSS

Filepicker makes the user experience seamless. Did you know that you can add custom CSS to match the look and feel of your site?

Why use Filepicker Custom CSS?

Using Custom CSS to modify your Filepicker’s design allows for an enhanced user experience for people uploading to your site, while also keeping the convenience of all of Filepicker’s features and capabilities.

How To Use CSS To Make Filepicker Look Like Your Site

You can add a CSS file to customize the look and feel of Filepicker on your app. Custom CSS can be used to modify:

  • Fonts
  • Colors
  • Backgrounds

What You Shouldn’t Change With CSS

Custom CSS shouldn’t be used to adjust the layout of Filepicker. Making layout changes can potentially break functionality.

Feature Overview: Filepicker Custom CSS

You can choose a different CSS for desktop dialog and mobile web dialog. To specify a CSS file URL, go to your Developer Portal, where you should see a section called “Web Dialog” when you log into the developer portal. Then point to your custom CSS file. The information you enter will override any existing CSS properties, and allow you to style elements that aren’t specifically defined by Filepicker’s CSS.

***While we don’t condone bad design, Happy 4th! :)

Let us know if you have any problems implementing custom CSS on your site. More information is available here.

Add a Custom Source to your Filepicker Dialog


Great news! You can now add a custom source to your list of sources in Filepicker. This allows your users to select from your S3 bucket. Also, if you only want them to look at a specific folder, you can specify that too!

If you are on the accelerate plan or higher, you can start using it right away. If you have a similar idea that would make your life so much easier, give us a shout!



Enabling a custom S3 bucket for Filepicker

  1. Once you’re logged into the dashboard, select “Custom Source” under Credentials.
  2. Check the “Use Custom Source” box. You’ll be prompted to confirm.
  3. Custom Source Name: use a name that will appear to your users in the Filepicker dialog.
  4. Enter your S3 credentials.
  5. Default S3 Bucket: what files for your users to see
  6. Bucket Path: Select a folder within the S3 bucket that will restrict what the users will see.

It’s that simple! If you have any problems setting your own custom source, send us an email support@filepicker.io

Finding a Metadata Endpoint - How to get the full path URL

Metadata endpoints are critical pieces of the puzzle in any file uploaded to Filepicker. It is used to expose additional information regarding services or applications. Metadata also allows for info developers need to find it on their own. The alternative is trying to hunt it down blindly, or ask a publisher for a copy via email.

Metadata Example

Using the following URL, you can find out what type of file was uploaded:


https://www.filepicker.io/api/file/hFHUCB3iTxyMzseuWOgG/metadata?mimetype=true

{"mimetype": "image/png"}

There is always an easier way to do things, you just need to know what that easier path is in order to follow it. Filepicker allows users to create content in an application and then easily save that content for exporting later on to a different device. However, once content has been created, it can be difficult to locate.


How to get the full path URL

First, users need to know that every file created in Filepicker gets its own unique URL that identifies it in the Javascript libraries. That FilePicker URL serves as a road map of sorts to finding a particular file you might be hunting down.

Example: https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW

If you know the bucket name, and have the unique URL, you can generate the path to the file.

Example

/*InkBlob from a previous pick, etc.*/
var inkblob = { url: 'https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i' };
console.log("Loading path...");
filepicker.stat(inkblob, {path: true},
  function(metadata){
    console.log(JSON.stringify(metadata));
});
Result
Loading path...
{"path":"jBGB0lRDSmyBzv1aYkUQ_IMAG0038.jpg","key":"jBGB0lRDSmyBzv1aYkUQ_IMAG0038.jpg"}

User content can be found on both Rest API and Javascript with a simple GET command. The GET command works on the unique URL of the content, and can also be used to get metadata on the field or to search for specific metadata values.

You can also get lots of info about the file, without having to download it by using our REST API. Simply With a simple HEAD request you can find out simple info such as: specific type (PNG image) or size (276839).

For a full list of properties you can read, view our documentation.

Head Request Example:

>>> curl -i -X HEAD https://www.filepicker.io/api/file/WE48V05bQrq7AZ32k3kV

Result
HTTP/1.1 200 OK
...
Content-Type: image/png
Content-Length: 276839
Content-Disposition: inline; filename="GET_demo.png"
X-File-Name: GET_demo.png
...

If you’re getting stuck, send a note to support@filepicker.io

Blur And Sharpen Your Uploaded Images Filepicker URL Filters Do Image Conversion For You

With Filepicker, the days of editing images in Photoshop are coming to an end. Once you upload images to Filepicker, you can edit that image directly from its URL.

Image Conversion

Filepicker makes it ease to work with user content by enabling image post-processing. That way, regardless of what type of file a user uploads from the Cloud or a local device, you can be sure it’s in exactly the right format that your site needs.

Convert Methods

Check out this image. Creating contrast in this photo was easy. The developer didn’t even have to open the image.

To convert an image that’s been uploaded to Filepicker, all you have to do is append “/convert” to the Filepicker file URL, along with query parameters specifying what you want to change:

Resize Conversion

https://www.filepicker.io/api/file/hFHUCB3iTxyMzseuWOgG/convert?w=2000&h=1500
You can resize images that are uploaded on Filepicker by setting new image widths and heights. Add &fit=max to restrict the file being displayed larger than it’s actual size.

Filter Conversion

https://www.filepicker.io/api/file/hFHUCB3iTxyMzseuWOgG/convert?filter=blur&blurAmount=1
Blurring and sharpening images that are uploaded on Filepicker even allows a blur amount parameter to modify the amount of blur, and uses the convert endpoint, so normal usage applies.

Filepicker allows for image conversion using: fit, crop, align, format, filter, quality, rotate, watermark, and waterposition. Make sure to try out all the convert methods for all your image conversion needs.

Looking for additional image conversion options? Email your development requests to support@filepicker.io.