Getting Started

Filestack Architecture

File Upload

File Export (Save To)

Responsive Images

Image Transformations

Document Transformations

Video Transcoding

Audio Transcoding





Filestack Viewer


Supported Cloud Drives

Filestack Recipes

Filestack Integrations

Filestack SDKs

Register for an API key

Create Drag-Drop Pane - Generate a customized drag and drop widget

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.

Drop files here


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+"%)");


filepicker.pick(picker_options, onSuccess(Blob){}, onError(FPError){})
dropPane A DOM object that will be used as the container for the drop pane.

A dictionary of key-value options:


{multiple: true}

Allow the user to upload multiple files at once. Defaults to false


{mimetype: 'image/png'}

The mimetype that the input should be limited to. Defaults to "*/*"


{mimetypes: 'image/png, text/*'}

The list of mimetypes that the input should be limited to. Do not use with the single mimetype or extension options


{extension: '.pdf'}

The extension that the input should be limited to. Defaults to all extensions. Do not use with the mimetype options


{extensions: '.png, .jpeg'}

The list of extensions that the input should be limited to. Do not use with the single extension or mimetype options

Max file size

{maxSize: 1024*1024}

Limit uploads to be at most maxSize, specified in bytes. By default file size is not limited.

Store Location

{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.

S3, Rackspace, Azure, Dropbox and Google Cloud are only available on paid plans. Choose Plan

Store Path

{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 be true, only paths that end in '/' are allowed.


{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 that this parameter does not apply to the Dropbox file store.

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'll need to have a valid 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