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="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" type="text/css" />

Javascript

<!-- dropzone js -->
<script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script>

Initjs (Custom js)

<!-- File upload js -->
<script src="{{ URL::asset('build/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",
});