Developer Tutorial - Dropzone.js and Box Platform

Creating bleeding edge digital experiences for customers, suppliers, and partners often begins with the basics. In this tutorial we will add 'drag and drop' upload to a web app using Dropzone.js and Box Platform. Here's how the process of uploading a file to Box will look when we are finished.  

Before we begin, make sure to read through the Getting Started guide on the Box developers site for a quickstart introduction to building with Box Platform. This tutorial will assume that you have a configured web app ready to use Box Platform. Here is what we will discuss in the following paragraphs:
  1. Adding Dropzone JS and CSS Files to Our Application
  2. Creating an HTML Form 'Drop Area'
  3. Defining a Ruby Method to Upload to Box
Adding Dropzone.js to Your Project
Dropzone.js is 'a light weight JavaScript library that turns an HTML element into a "dropzone"'. Users can drag and drop a file onto an area of the page, uploading to a server. If you would like to read more how all of this works skim through the Dropzone.js Documentation. Let's go ahead and add the Dropzone.js code to our project and create a 'drop area' for file uploading.

Step 1: Include the standalone Dropzone.js Javascript file in your project. This is the only code you will need to for Dropzone to work in your project but it will be missing the CSS styling you see above. If you would like to use Dropzone's styles a starting point go ahead and add both the Javascript and CSS files to your project. These files live here in the Dropzone project dist folder.

Step 2: Create a form element and give it the class of 'dropzone'. Dropzone will recognize the form and upload files that are dragged onto it to the 'action' attribute URL of your choosing. In the form below we are uploading files to the upload_url route that we created and including a destination folder in Box.

Bonus: Steps 1 and 2 will add a drop area to your page and pass uploaded files to a route of your choosing. If you would like to have a little more control, Dropzone.js includes plenty of options for customization. There is a full list in the Configuration section of their website. In the code below we register an event to reload the page when a timeout occurs.

Uploading Files to Box with Dropzone.js
We've added the Dropzone.js code to our app and created an HTML form drop area. Now, we will define an upload method to handle storing files in Box. It is important to note that we are performing a server-side upload here, however, Box file upload endpoints fully support Cross Origin Resource Sharing, or CORS. Client-side uploading with CORS will enable you to store directly to Box without touching our servers as part of the upload process, speeding up your app. We will explore this upload technique in a future developer tutorial.

That's it! We have added Dropzone.js to our project, created a form for 'drag and drop' upload, and defined a upload method to directly store files in Box. If you have any questions about this tutorial or anything else head on over to the Box Community where Box Platform experts are waiting to help.