Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.

CSS

<!-- dropzone css -->
<link rel="stylesheet" href="assets/libs/dropzone/dropzone.css" type="text/css" />

Javascript

<!-- dropzone js -->
<script src="assets/libs/dropzone/dropzone-min.js"></script>

Initjs (Custom js)

<!-- File upload js -->
<script src="assets/js/pages/form-file-upload.init.js"></script>

Add Package

Remove Package

var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
dropzonePreviewNode.id = "";
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
var dropzone = new Dropzone(".dropzone", {
    url: 'https://httpbin.org/post',
    method: "post",
    previewTemplate: previewTemplate,
    previewsContainer: "#dropzone-preview",
});