<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dropzone Example</title> <!-- Include Dropzone CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/dropzone.css"> </head> <body> <div class="container"> <div class="col-md-6"> <!-- Dropzone Container --> <div id="dropzone" class="dropzone dx-clickable"> <!-- Dropzone Message --> <div class="dz-message needsclick"> <br> Drop files here or click to upload. </div> </div> </div> </div> <!-- Include Dropzone JS --> <script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.2"></script> <!-- Initialize Dropzone --> <script> Dropzone.options.dropzone = { url: '/upload', // Replace with your server-side upload URL paramName: 'file', // The name that will be used to transfer the file maxFilesize: 2, // MB acceptedFiles: 'image/*', // Accept only image files addRemoveLinks: true, // Show remove links on uploaded files dictDefaultMessage: 'Drop files here or click to upload', success: function (file, response) { // Handle successful uploads }, error: function (file, response) { // Handle errors } }; </script> </body> </html>