Yet another custom file upload jQuery plugin that makes it easy to add drag and drop file uploading to your web application. If you're looking to upgrade your file inputs, this plugin is a great open-source choice.
How to use it: 1. Load the needed jQuery library and Material Icons in the document. <!-- Material Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined"> <!-- jQuery Library --> <script src="/path/to/cdn/jquery.min.js"></script> 2. Download the plugin and place the fileUpload.js script after jQuery. <script src="fileUpload/fileUpload.js"></script> 3. Don't forget to import the core stylesheet. <link rel="stylesheet" href="fileUpload/fileUpload.css"> 4. Create an empty DIV container to hold the custom file uploader. <div id="fileUpload"></div> 5. Call the function fileUpload on the DIV container you just created and the plugin will do the rest. $(function(){ $("#fileUpload").fileUpload(); }); 6. The generated HTML structure should be like these: <div id="fileUpload" class="file-container"> <label for="fileUpload-1" class="file-upload"> <div> <i class="material-icons-outlined">cloud_upload</i> <p>Drag &amp; Drop Files Here</p> <span>OR</span> <div>Browse Files</div> </div> <input type="file" id="fileUpload-1" name="fileUpload-1"> </label> </div>
[
Collection
]
[
|
...
]