Dropzone.js + rails to upload multiple files the way you want

When talking about uploading files in a web application, the way most of us think of is to use a form with an <input type="file"> tag:

The above method creates a rather tedious file upload experience like this:

Compared to the above method, Dropzone.js library provides users with a much more friendly file upload experience like this:

This library provides a very clear and easy to configure system from the view template, the upload file, and the file validate, … You can learn how to use it here . In this article, I will guide you to use dropzone.js and carrierwave to create a media gallery (which stores video, audio and image files) based on framework rails.

Create rails app

I will create a simple rails app with the following information:

• There is a Media panel to save uploaded file information.
• There is a page to upload the file to.
• There is a page to display all uploaded files.

First, create a basic rails app with the following 2 gems installed

Create Media model and a FileUploader

Now I will start creating the file upload page. Create the path for that page first in the routes.rb file:

Create controller with the corresponding action new for the file upload page:

Create a view for the file download page: new.html.erb

And we will get a view like this.

Now we will handle the file upload through the dropzone library functions in a javascript file, I named it upload.js . First, add file upload.js to asset pipelines:

Create app/assets/javascripts/upload.js

In the above js file, we initialize a Dropzone object with the properties:

• dictDefaultMessage : A message displayed in elements with a class of .dropzone. Here I left blank to customize the view.
• uploadMultiple: true . Allows you to choose to upload multiple files.
• url: is the path to make the POST request after the file uploads. Currently when clicking on div#mydropzone there will be a file upload window like this: But I want only when clicking on the button chọn nút này để tải file lên will the file selection window pop up, so I will customize one more clickable attribute:

Now it seems to work as it should:

Now, by default, when you select a file in the popup window or drag / drop the file into the div#dropzone like this, a POST /medias request will be made: And the data that it transmits to the server in params will look like this:

Now I will handle the server side to be able to save this data into the db

So the data, after being uploaded, will be saved directly to the database. Now I want to handle, so that after uploading all the files successfully, the redirect to the page showing a list of all images. First, we handle the successmultiple event for the dropzone variable as follows:

With the above processing, after all the files have been uploaded successfully, the browser will automatically redirect to the list /medias display page. We make the page display the list:

And see the handling section:

Validate at client_size with dropzone.js

Here, I just want to upload files with the format ".jpg, .png, .mp4, .mp3" and files smaller than 10Mb, then I can add two attributes to the dropzone variables acceptedFiles and maxFilesize

And the error message will be displayed as follows:

In addition, there are many other attributes and events that you can customize here . My post pauses here.

Reference: https://www.dropzonejs.com/