Lately, I was working on building a file uploading feature for one of my web project, which allows users to upload lots of file repeatedly. The usual multipart form method is okay when you are only dealing with 1 - 2 files; it starts to get clumsy and slow when you are uploading more: click the upload button -> select a file -> click ok -> not until you submit the form, the file would be uploaded. What I wanted was a page where user could drop a number of files at once, and they got automatically uploaded in the background with progress shown.
jquery-ddio
jquery-ddio is a jquery plugin for Drag-n-Drop Upload. With this simple plugin you can easily create an DOM element which is drag-drop-upload enabled.
Required: jQuery http://jquery.com/
// Required jQuery & jquery-ddio
<script src="jquery.min.js"></script>
<script src="jquery-ddio.js"></script>
// Normal div element (to be used for drag-n-drop zone)
<div id="uploadDiv" style="width:350px;height:350px;"/>
<script language="javascript">
$(document).ready(function() {
$("#uploadDiv").ddio({
maxFileSize: 1, // in MB
maxFileCount: 5, // how many simultaneous uploads
paramname: "upload_file", // the file parameter name sent to server
allowedExtensions: ["image/png", "image/jpg", "image/jpeg", "image/gif"], // file type allowded
// ===== in case you need csrf =====
csrfTokenName: "csrf_token", // the csrf token parameter name sent to server
csrfToken: "abcdef", // the csrf token value
// ===== in case you need csrf =====
url: "upload.php", // server url
dragEnter: function(e) {
// do sth when drag entered the element
// e.g. Change element background color
},
dragOver: function(e) {
// do sth when drag is over the element
},
dragLeave: function(e) {
// do sth when drag left the element
// e.g. Restore element background color
},
dropped: function(e) {
// do sth when file is drop on the element
// Disable some dom element maybe?
},
uploadStarted: function(file) {
// file begins upload event
// Some visual effect to indicate file upload begins?
},
uploadUpdated: function(file, percent) {
// file progress event
// A progress bar maybe?
},
uploadFinished: function(file) {
// file finished upload
// Maybe a popup or hud to indicate upload done
}
});
});
</script>
It was done in a hurry, so there should be bugs, feel free to send in patches.