Create Drag & Drop Pane

Wouldn't it be nice if you could just choose a div somewhere and make it a file drop target? We thought so too - plus, you still get back a convenient Filestack file url so you don't have to deal with big blobby files.

Sample Code

Drop files here


The Sample Code Below will Generate a Drop Pane like the one to the left.
filepicker.makeDropPane($('#exampleDropPane')[0], {
  multiple: true,
  dragEnter: function() {
    $("#exampleDropPane").html("Drop to upload").css({
      'backgroundColor': "#E0E0E0",
      'border': "1px solid #000"
  dragLeave: function() {
    $("#exampleDropPane").html("Drop files here").css({
      'backgroundColor': "#F6F6F6",
      'border': "1px dashed #666"
  onSuccess: function(Blobs) {
    $("#exampleDropPane").text("Done, see result below");
  onError: function(type, message) {
    $("#localDropResult").text('('+type+') '+ message);
  onProgress: function(percentage) {
    $("#exampleDropPane").text("Uploading ("+percentage+"%)");

Additional Options

An optional dictionary of key-value pairs that specify how the picker behaves.

A DOM object that will be used as the container for the drop pane.

{mimetype: 'image/*'}
{mimetypes: ['image/*', 'text/*',…]}

Specify the type of file that the user is allowed to pick. For example, if you only want the user to select images, you could specify image/* and users would only be able to select images to upload. Similarly, you could specify application/msword to only allow Word Documents to be selected.

You can also specify an array of mimetypes to allow the user to select a file from any of the given types.

{extension: '.pdf'}
{extensions: ['.js', '.coffee',...]}

Specify the type of file that the user is allowed to pick by extension. Do not use this option with mimetype(s) specified as well.

You can also specify an array of extensions to allow the user to select a file from any of the given types.

{multiple: true}

Specify that the user can upload multiple files, akin to pickMultiple.

Max Files
{maxFiles: 5}

Specify the maximum number of files that the user can upload at a time. If the user tries to upload more files than this limit, they will be presented with an error message. By default, there is no cap on the number of files a user can upload.

Max Size
{maxSize: 1024*1024}

Limit uploads to be at most maxSize, specified in bytes. By default file size is not limited. For example, to make sure files are all less than 10MB, use "10485760" (10*1024*1024).

{location: 'S3'}

Where to store the file. The default is S3. Other options are 'azure', 'dropbox', 'rackspace' and 'gcs'. You must have configured your storage in the developer portal to enable this feature. Note:> Rackspace, Azure, Dropbox and Google Cloud are only available on the PLUS and higher plans.

{path: '/myfiles/1234.png'}

The path to store the file at within the specified file store. For S3, this is the key where the file will be stored at. By default, Filestack stores the file at the root at a unique id, followed by an underscore, followed by the filename, for example "3AB239102DB_myphoto.png".

If the provided path ends in a '/', it will be treated as a folder, so if the provided path is "myfiles/" and the uploaded file is named "myphoto.png", the file will be stored at "myfiles/909DFAC9CB12_myphoto.png", for example.

If the multiple option is set to true, only paths that end in '/' are allowed.

Store Container
{container: 'user-photos'}

The bucket or container in the specified file store where the file should end up. This is especially useful if you have different containers for testing and production and you want to use them both on the same Filestack app. If this parameter is omitted, the file is stored in the default container specified in your developer portal.

Note: This parameter does not apply to the Dropbox file store.

Store Region
{storeRegion: 'us-east-1'}

The region where your storage container is located. This setting currently applies only to S3 buckets. If you are using a different bucket and region than the one you set up in your developer portal you can pass the storeRegion as part of your store options. If this parameter is not set we will do our best to determine the region your S3 bucket is located so that we can properly authenticate our connection request. You can find a list of the S3 regions here: in the "region" column.

Public Access
{access: 'public'}

Indicates that the file should be stored in a way that allows public access going directly to the underlying file store. For instance, if the file is stored on S3, this will allow the S3 url to be used directly. This has no impact on the ability of users to read from the Filestack file URL. Defaults to 'private'.

Drag Enter
{dragEnter: function(){} }

The function called when a file is dragged over drop container.

Drag Leave
{dragLeave: function(){} }

The function called when a file is dragged out of the drop container.

Starting Callback
{onStart: function(files){} }

The function called just before the files are uploaded.

Success callback
{onSuccess: function(Blobs){} }

The function called after all the uploads are complete.

Data comes back as an array of javascript objects, for example:

    filename: 'test.txt',
    mimetype: 'text/plain'
Progress Updates
{onProgress: function(percentage){} }

A function that is called every time a progress event is fired. Passes the current percentage, out of 100.

Error Messages
{onError: function(type, message){} }

A function that is called when an error occurs. Type is a unique identifying string, message is a human-readable message describing the error. The types of errors are:

TooManyFiles The user dragged mulitple files when only one was allowed
WrongType The user dragged one or more files that didn't match the mimetypes or extensions specified
WrongSize The user dragged one or more files that didn't match the maxSize specified
NoFilesFound The drop event was fired, but there were no files found
Upload Error There was an error that occured on upload. See message for more details
{policy: POLICY, signature: SIGNATURE}

If you have security enabled, you will need to include a valid Filestack policy and signature in order to perform the requested call. This allows you to select who can and cannot perform certain actions on your site. Read more about security and how to generate policies and signatures