Drag and Drop Files into your App, just like Slack (Demo in jQuery)

- August 31, 2016


Slack recently announced new file sharing functionality.  Now, Slack users can easily share content by dragging and dropping files, or by accessing files on native and outside services, including Dropbox, Box and Google Drive.

Drag and Drop File Uploads:

0-olYbiuTyMcWymMo0

Native and Outside Service Files:

0-glFeNpBEoDP-lluA

Slack’s announcement made our geeky file-sharing-enthusiast hearts burst with joy  – we LOVE seeing companies prioritize file sharing functionality.  Often neglected, a smooth file sharing process is key to improving user experiences by enabling users to collaborate and communicate seamlessly.

Drag and drop functionality is becoming the norm, and we’ve been advocating the benefits of uploading directly from social services since 2012.  Now that users are relying on the cloud more than ever, this is especially true, and we’re happy to see great companies adopting these features.

Build Slack’s Functionality for Your App

It’s not too difficult to enable identical file sharing capabilities on your app.  We wrote out a guide on how to do this using Filestack, and expect the entire implementation to take you 20 to 30 minutes to complete.

First look at this demo to get started on recreating invisible droppable pane on your web page.

https://www.filestack.com/drop-pane-demo

Screen Shot 2016-08-29 at 5.21.12 PM

Essentially, all you have to do is declare a container in your HTML as the droppable area. It can be a small box, a section of the page, or the entire page. In the demo, we declared a div with the id=”fs-panel” as the container, (and a container under it to display messages):

  
  <div id="fs-panel"></div>

  <div id="localDropResult">
    Drag a file on to this page
  </div>

Then we initialized the container as a droppable pane by passing the element into the makeDropPane() function:

$(document).ready(function(){
  filepicker.setKey("YOUR_API_KEY");
  makeFSPane();
});

function makeFSPane() {
  filepicker.makeDropPane($('#fs-panel')[0], {
    multiple: true,
    dragEnter: function() {
      $("#fs-panel").html("Drop files here").css({
        'border': "3px dashed #999"
      });
    },
    dragLeave: function() {
      $("#fs-panel").html("").css({
        'border': "0"
      });
    },
    onSuccess: function(Blobs) {
      $("#fs-panel").text("Done, see result below");
      $("#localDropResult").text(JSON.stringify(Blobs));
    },
    onError: function(type, message) {
      $("#localDropResult").text('('+type+') '+ message);
    },
    onProgress: function(percentage) {
      $("#fs-panel").text("Uploading ("+percentage+"%)");
      $("#localDropResult").text("Processing ...");
    }
  });
}

You can control the behavior and styles of your droppable pane through the event handlers of the makeDropPane function:

  1. dragEnter: fires when the user drags a file over the container
  2. dragLeave: fires when the user drags a file out of the container
  3. onProgress: fires when a progress event is fired, returning the percentage completed
  4. onSuccess: fires after the file is successfully uploaded
  5. onError: fires when an error occurs

Here’s another example that makes the entire body of a page a drop-pane:

https://www.filestack.com/drop-pane-demo2

The implementation is similar to the previous demo. The main difference is that the code hides and shows an overlay on dragEnter() and dragLeave() instead.

(Here is the documentation: https://www.filestack.com/docs/file-ingestion/widgets/droppane)

Leave a comment if you have any questions or need help with the implementation. Happy uploading!

p.s. I’ve coded the two demo pages (https://www.filestack.com/drop-pane-demo and https://www.filestack.com/drop-pane-demo2 as standalone pages.  You can right-click and view-source to copy and save the code to your desktop for local testing.  Cheers).