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

Result:


        
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");
    $("#localDropResult").text(JSON.stringify(Blobs));
  },
  onError: function(type, message) {
    $("#localDropResult").text('('+type+') '+ message);
  },
  onProgress: function(percentage) {
    $("#exampleDropPane").text("Uploading ("+percentage+"%)");
  }
});
          

Additional Options

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

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

Mimetype
String
{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
String
{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
Boolean
{multiple: true}

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

Max Files
Integer
{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
Integer
{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
String
{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
String
{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
String
{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
String
{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
String
{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
function
{dragEnter: function(){} }

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

Drag Leave
function
{dragLeave: function(){} }

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

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

The function called just before the files are uploaded.

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

The function called after all the uploads are complete.

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

[
  {
    url:
    'https://www.filestackapi.com/api/
    file/a34c393',
    filename: 'test.txt',
    mimetype: 'text/plain'
  },
  {
    ...
  },
  ...
]
            
Progress Updates
function
{onProgress: function(percentage){} }

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

Error Messages
function
{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
Security
Object
{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