× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Building a File Upload Form using DropzoneJS and PHP

In this tutorial, we shall learn how one can easily build a file upload feature for multiple files with the help of DropzoneJs and PHP. This upload feature is also suitable for uploads making use of the drag and drop mechanism.

Everyone who is a regular on the Internet knows the importance of downloads and uploads. Here, we shall take a look at how one can develop a drag and drop file upload feature, that is both easy and hassle free. And, in order to do so, we shall make use of PHP and DropzoneJs, as our main components.

But, we go straightaway into all the details and the coding aspect of this tutorial, we shall also briefly see what PHP and DropzoneJs is all about.

What is DropzoneJs?

To keep it simple, DropzoneJs is a library belonging to the open source community, which is capable of providing file upload features along with image previews. It is to be noted that DropzoneJs is very lightweight in nature and does not rely on other libraries for functioning. It also happens to be highly customizable and thus, can be made in a way that suits your tastes.

What is PHP?

PHP, or Hypertext Preprocessor, is a language that is meant for web development work and general programming, but essentially used as a server-side scripting language. Belonging to the category of free software, PHP is the most used language for web development work at present.

The language’s code can be implemented within HTML code or be used in tandem with web templates, content management systems (CMS), or framework of the web.

Now, we shall take a look into how to get DropzoneJs working.

Installation of DropzoneJs

The first step is to download the dropzone.js and CSS files from the source, i.e. GitHub. After downloading the standalone dropzone.js file, you will need to include it in your code, which can be done using the statement given below.

<script src="./path/to/dropzone.js"></script>

This is basically the step that gets Dropzone ready and running, as it will be available as window.Dropzone. Also, if you wish to implement the looks accompanying Dropzone, the CSS file that you downloaded earlier comes into play.

Another very important point to note is that Dropzone does not handle the file uploads to the server. And thus, if you wish to do so, it is on you to implement the code meant for receiving and storage of files to the server.

Dropzone support for browsers

Presently, DropzoneJs is capable of supporting the following browsers mentioned below.

  • Firefox4+
  • Chrome7+
  • IE10+
  • Opera12+
  • Safari6+

Other than these browsers, Dropzone offers the oldschool file input fallback process, which is stated later.

Using Dropzone

The basic method to make of Dropzone is by creating a form element with the class called dropzone.

<form action="/file-uploading"

This step allows Dropzone to find all form elements that have the class dropzone, automatically attach itself to them and upload the files dropped into it, to the action tribute that is specified. These upload files can be handled just a normal HTML input would have been, like

<input type="file" name="file" />

You can also choose to a name other than file, as shown above, by configuring dropzone by paramName.

You can also have your file uploads in working state even without JavaScript. To so do, you will need to include the class fallback, which dropzone removes if the browser is supported. Also, if the browser is not supported, fallback elements aren’t created by Dropzone. This looks like –

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />

Creation of dropzone using programs

It is possible to enable dropzones using programs, by instatiating the Dropzone class.

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

And, if you use jQuery, you can make use of the jQuery plugin that Dropzone provides.

$("div#myId").dropzone({ url: "/file/post" });

Note that you must always mention the url, otherwise Dropzone basically does not know where it should be posted to.

Implementation of the server-side

Dropzone does have a method for server-side implementation to handle the uploaded files. However, they process for such file uploads is pretty similar to upload forms such as –

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />

Also, in order to take care of the file upload process on the server, you can utilize documentation as may be necessary.

Configuring dropzones

Basically, there are two methods that allow for dropzone configuration. One of such ways is to pass an options object during the instantiation of a dropzone, like we saw in the usage of programs.

However, if you possess HTML elements with dropzone class, you cannot instantiate objects by using programs. Thus, you store the configuration at a place such that Dropzone knows the process to configure them during instantiation. This can be done with the Dropzone.options object.

//myAmazingDropzone is the camelized version of the element's ID used in HTML 
Dropzone.options.myAmazingDropzone = {
  paramName: "file", // The name that shall be used for the file transfer
  maxFilesize: 3, // MB
  accept: function(file, done) {
    if (file.name == "bieber.jpg") {
      done("Nah, don't accept.");
    else { done(); }

In order to disable the auto discover behavior of Dropzone, you can opt to disable it in general or on a per element basis. Both these methods are stated below.

// Preventing Dropzone from auto discovering this specific element
Dropzone.options.myAmazingDropzone = false;
// This is useful for the creation of the Dropzone programmatically later
// Disabling of auto discover for all elements
Dropzone.autoDiscover = false;

Options for configuration

  • url – Needs to be specified on elements, except the form (when form does not have a ction attribute). A return function may also be provided such that it is called with the files and should return the url.
  • method – “post” is what it defaults to and can also be changed to “put”, as per the needs. Again, a function may be added that will be called with files and shall return the method.
  • maxFilessize – Specifies the top limit for each file in MB.
  • parallelUploads – Determines the number of files uploads that may be processed in parallel.
  • paramName – This is the name of the file param that gets changed. It defaults to the file. Also, if you have set uploadMultiple to true, Dropzone append [] to the name.
  • filesizeBase – The default size here is set to 1000. It basically defines whether the base size for file size calculation should be 1000 or 1024. Note – 1 Kilobyte equals 1000 bytes while 1 Kibibyte equals 1024 bytes.
  • uploadMultiple – Determines of Dropzone should send multiple files in one request. When it is set to true, the fallback input option has multiple attributes as well.
  • header – It is an object meant for sending additional headers to the server.
  • addRemoveLinks – This is meant for adding a link to every file preview for removal or cancellation of the file.
  • previewsContainer – It defines where the file previews may be displayed. If it is null, then the Dropzone element is used. It can be a plain HTML element or a CSS selector. In order to diaply previews properly, the element should also possess the dropzone-previews class.
  • hiddenInputContainer – This is the element to which the hidden input field is appended to. It is important in cases where one uses frameworks to switch the contents of their page. It defaults to body.
  • clickable – If this is set to true, the dropzone element is clickable, and if not, nothing is clickable.
  • maxThumbnailFilesize – The size in defines in MB. If the size of the file exceeds the specified limit, the thumbnail isn’t created.
  • thumbnailWidth – When this is null, the ratio of the image is used to calculate it.
  • thumbnailHeight – Has the same function as thumbnailWidth. If both are set to null, the image isn’t resized.
  • maxFiles – This defines the number of files that Dropzone can handle. If it exceeds the limit, then the event maxfilesexceed is called.
  • resize – This is the function that is called for the resizing of the information. The first parameter it gets is the file and should return with an object with srcX, srcY, srcHeight and srcWidth, and also the same for trg*. Those values the then used by ctx.drawImage().
  • init – This is function that is called when Dropzone is initialized. Event listeners may also be setup inside this function.
  • acceptedFiles – This happens to be the default implementation of accept. It checks the file’s extension or mime type as per the list. If the Dropzone happens to be clickable, then the option is used as the accept parameter on the hidden file input too.
  • accept – This is the function that gets a file and also a done function as parameter. The file is processed if the done function is invoked without any parameter. If an error message is passed, then the file isn’t uploaded and the message is displayed. The function is also not called if the file happens to be too big or doesn’t replicate the mime types.
  • renameFilename – This function renames the file and is invoked before the file upload to the server takes place.
  • autoProcessQueue – If this is set to false, then you will need to call myDropzone.processQueue() by yourself, in order to upload the files that have been dropped.
  • previewTemplate – This is the string that contains the template that is used for each dropped image. You can change this so that it matches up with your requirements, but also make sure that you do not leave out any elements.
  • forceFallback – It is set to false by default. The fallback is forced when it’s true. This I also very useful for the testing of server implementation first and ensure that all works well without dropzone, if you happen to be facing problems. It also shows how your fallbacks look.
  • fallback – This is function that is called when the browser is not supported. The defaults implementation reveals the fallback input field and appends a text.
Now that we have taken a deep look into DropzoneJs and its specifics, we shall learn to implement the file upload feature.


Listing 1: Sample indexfile.html
  <link rel="stylesheet" href="css/dropzone.css" />
  <script src="dropzone.js"></script>
  <h1>Dragging and dropping of files making use of DropzoneJs</h1>
<form action="upload.php"
This part of the code is basically responsible for the creation of the form that is used for form uploads.

PHP Code

After the creation of the form, we use the PHP code that handles multiple file uploads to handle server-side implementation. This is required to be done because we already know that Dropzone, as such, does not handle the server-side implementation of the file upload process. Listing 2: Sample upload.php
// In PHP versions that happen to be earlier than 4.1.0, $HTTP_POST_FILES needs be used rather than $_FILES.
$uploaddir = './uploads';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "The file is valid, and has been uploaded with success.\n";
} else {
    echo "Something is amiss here!\n";
echo 'Here is some debugging information for you:';
print "</pre>";
Following screen shot shows the output of the application

Figure 1: Showing output


As was stated, using DropzoneJs and PHP to build a file upload method happens to be a very simple process. We have shown in the tutorial that all one needs to do is download the dropzone.js and CSS files, create a form using HTML and then the server-side implementation making use of PHP.

The upload is feature is stand out and also offers a clean UI and is even customizable as per your needs. We believe that it can aid you perfectly when building drag and drop file uploads in a very hassle free manner.

Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login