Get started with dropzone CDN

MIT licensed

Dropzone is a popular library for creating drag-and-drop file uploads.

Tags:
  • html5
  • file
  • upload

Stable version

Copied!

How to start using dropzone CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with dropzone CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="dropzoneContainer">
        <form action="/upload" class="dropzone" id="myDropzone"></form>
    </div>

    <script src="https://cdn.cdnhub.io/dropzone/5.9.3/dropzone.min.js" referrerpolicy="no-referrer"></script>

    <script>
        document.addEventListener("domcontentloaded", function() {
            const myDropzone = new Dropzone("#myDropzone", {
                url: "/upload", // Set the URL to your server-side upload script
                acceptedFiles: "image/*",
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                init: function() {
                    this.on("success", function(file, response) {
                        // Handle successful uploads
                        console.log("File " + file.name + " uploaded with response: " + response.message);
                    });
                }
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions