How to upload files using jQuery Dropzone Plugin ?

Last Updated : 29 Jun, 2020

jQuery has many types of file upload plugins that are used to upload various types of files and can be processed further at the backend. Usually, PHP is used widely as backend language with ajax call. We also have dynamic jQuery plugins where we can drag and drop the files.

Some of the file uploader plugins are:

Fine-Uploader
JQuery File upload
Uploadify
Plupload
Formstone upload
Dropzone

Many more are available.

CDN Link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js" crossorigin="anonymous"> </script>

Example: The following example is implemented using Dropzone plugin and CDN libraries required for the code.

html

<!DOCTYPE html>
<html>

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, 
        initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">

    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"
        integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>

    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous">
    </script>

    <style>
        body {
            padding: 2%;
        }
    </style>
</head>

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

</html>

Output:

Conclusion: In the above example, we can drag many documents at one go. We can perform the same operation by only JavaScript code and we can also put constraints on the size and type of the file also.