Skip to content
Related Articles

Related Articles

How to upload files using jQuery Dropzone Plugin ?
  • Difficulty Level : Medium
  • Last Updated : 29 Jun, 2020
GeeksforGeeks - Summer Carnival Banner

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” integrity=”sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8=” crossorigin=”anonymous”>
</script>



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




<!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=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8="
        crossorigin="anonymous">
    </script>
  
    <script src=
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
  
    <script src=
        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.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :