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:
- Adding Dropzone JS and CSS Files to Our Application
- Creating an HTML Form 'Drop Area'
- Defining a Ruby Method to Upload to Box
Adding Dropzone.js to Your Project
. Let's go ahead and add the Dropzone.js code to our project and create a 'drop area' for file uploading.
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.
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.