├── jquery.client README.txt ├── README ├── LICENSE ├── utils.js ├── example.html ├── jquery.client.js ├── HOWTO └── jquery.dnd-file-upload.js /jquery.client README.txt: -------------------------------------------------------------------------------- 1 | the jquery.client plugin has been downloaded from http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/trackback/ -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | upload dropped file(s) from the filesystem into the browser via ajax to your server. this project uses the new drag and drop html5 api OR if not supported, the feature of some browsers (safari, chrome, chromium), to drop files onto the tag. 2 | 3 | currently the following browsers work with this plugin and hence a multiple file upload via drag and drop is possible with: 4 | 5 | * Firefox 3.6 6 | * Safari 4 7 | * Chrome 5 8 | * Chromium 4 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2012 Clemens Müller (cmueller.418@gmail.com) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /utils.js: -------------------------------------------------------------------------------- 1 | var base = 1024; 2 | 3 | function getReadableSpeedString(speedInKBytesPerSec) 4 | { 5 | var speed = speedInKBytesPerSec; 6 | speed = Math.round(speed * 10) / 10; 7 | if (speed < base) { 8 | return speed + "KB/s"; 9 | } 10 | 11 | speed /= base; 12 | speed = Math.round(speed * 10) / 10; 13 | if (speed < base) { 14 | return speed + "MB/s"; 15 | } 16 | 17 | return speedInBytesPerSec + "B/s"; 18 | } 19 | 20 | function getReadableFileSizeString(fileSizeInBytes) 21 | { 22 | var fileSize = fileSizeInBytes; 23 | if (fileSize < base) { 24 | return fileSize + "B"; 25 | } 26 | 27 | fileSize /= base; 28 | fileSize = Math.round(fileSize); 29 | if (fileSize < base) { 30 | return fileSize + "KB"; 31 | } 32 | 33 | fileSize /= base; 34 | fileSize = Math.round(fileSize * 10) / 10; 35 | if (fileSize < base) { 36 | return fileSize + "MB"; 37 | } 38 | 39 | return fileSizeInBytes + "B"; 40 | } 41 | 42 | function getReadableDurationString(duration) 43 | { 44 | var elapsed = duration; 45 | 46 | var minutes, seconds; 47 | 48 | seconds = Math.floor(elapsed / 1000); 49 | minutes = Math.floor((seconds / 60)); 50 | seconds = seconds - (minutes * 60); 51 | 52 | var str = ""; 53 | if (minutes>0) 54 | str += minutes + "m"; 55 | 56 | str += seconds + "s"; 57 | return str; 58 | } -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 61 | 62 | 63 |
64 |
65 |
66 |
67 | 68 | -------------------------------------------------------------------------------- /jquery.client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var BrowserDetect = { 4 | init: function () { 5 | this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; 6 | this.version = this.searchVersion(navigator.userAgent) 7 | || this.searchVersion(navigator.appVersion) 8 | || "an unknown version"; 9 | this.OS = this.searchString(this.dataOS) || "an unknown OS"; 10 | }, 11 | searchString: function (data) { 12 | for (var i=0;i 13 | 14 | 15 | 16 |
17 | Drop files here! 18 |
19 | 20 | 21 | }}} 22 | 23 | == Second == 24 | 25 | Add the scripts, and tell the plugin which div shall be used as a drop zone and where to upload the files. 26 | 27 | {{{ 28 | 29 | 30 | 31 | 32 | 33 | 42 | 43 | 44 |
45 | Drop files here! 46 |
47 | 48 | 49 | }}} 50 | 51 | == Third == 52 | 53 | *Finished!* Your basic file upload via drag and drop is working. 54 | 55 | 56 | 57 | == Customization == 58 | 59 | === Listen for events === 60 | 61 | What you can do now is to register functions which are invoked, when specific events are fired by the drop zone. For example you can listen to the event when files have been dropped, or when the progress of an upload changed. 62 | 63 | {{{ 64 | 65 | 66 | 67 | 68 | 69 | 98 | 99 | 100 |
101 | Drop files here! 102 |
103 | 104 | 105 | }}} 106 | 107 | 108 | === Parametrization === 109 | 110 | You can parametrize the plugin. 111 | 112 | {{{ 113 | ... 114 | $("#drop-div").dropzone( 115 | { 116 | url : "http://localhost:8080/upload.php", // upload url 117 | numConcurrentUploads : 2, // two concurrent uploads 118 | printLogs : true, // print the logs to the console object (firebug) if available 119 | uploadRateRefreshTime : 500 // calculate and inform my event listener of a new upload speed every 500 ms 120 | } 121 | ); 122 | ... 123 | }}} -------------------------------------------------------------------------------- /jquery.dnd-file-upload.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | var opts = {}; 4 | 5 | $.fn.dropzone = function(options) { 6 | 7 | // Extend our default options with those provided. 8 | opts = $.extend( {}, $.fn.dropzone.defaults, options); 9 | 10 | var id = this.attr("id"); 11 | var dropzone = document.getElementById(id); 12 | 13 | log("adding dnd-file-upload functionalities to element with id: " + id); 14 | 15 | // hack for safari on windows: due to not supported drop/dragenter/dragover events we have to create a invisible tag instead 16 | if ($.client.browser == "Safari" && $.client.os == "Windows") { 17 | var fileInput = $(""); 18 | fileInput.attr( { 19 | type : "file" 20 | }); 21 | fileInput.bind("change", change); 22 | fileInput.css( { 23 | 'opacity' : '0', 24 | 'width' : '100%', 25 | 'height' : '100%' 26 | }); 27 | fileInput.attr("multiple", "multiple"); 28 | fileInput.click(function() { 29 | return false; 30 | }); 31 | this.append(fileInput); 32 | } else { 33 | dropzone.addEventListener("drop", drop, true); 34 | var jQueryDropzone = $("#" + id); 35 | jQueryDropzone.bind("dragenter", dragenter); 36 | jQueryDropzone.bind("dragover", dragover); 37 | } 38 | 39 | return this; 40 | }; 41 | 42 | $.fn.dropzone.defaults = { 43 | url : "", 44 | method : "POST", 45 | numConcurrentUploads : 3, 46 | printLogs : false, 47 | // update upload speed every second 48 | uploadRateRefreshTime : 1000 49 | }; 50 | 51 | // invoked when new files are dropped 52 | $.fn.dropzone.newFilesDropped = function() { 53 | }; 54 | 55 | // invoked when the upload for given file has been started 56 | $.fn.dropzone.uploadStarted = function(fileIndex, file) { 57 | }; 58 | 59 | // invoked when the upload for given file has been finished 60 | $.fn.dropzone.uploadFinished = function(fileIndex, file, time) { 61 | }; 62 | 63 | // invoked when the progress for given file has changed 64 | $.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, 65 | newProgress) { 66 | }; 67 | 68 | // invoked when the upload speed of given file has changed 69 | $.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, 70 | KBperSecond) { 71 | }; 72 | 73 | function dragenter(event) { 74 | event.stopPropagation(); 75 | event.preventDefault(); 76 | return false; 77 | } 78 | 79 | function dragover(event) { 80 | event.stopPropagation(); 81 | event.preventDefault(); 82 | return false; 83 | } 84 | 85 | function drop(event) { 86 | var dt = event.dataTransfer; 87 | var files = dt.files; 88 | 89 | event.preventDefault(); 90 | uploadFiles(files); 91 | 92 | return false; 93 | } 94 | 95 | function log(logMsg) { 96 | if (opts.printLogs) { 97 | // console && console.log(logMsg); 98 | } 99 | } 100 | 101 | function uploadFiles(files) { 102 | $.fn.dropzone.newFilesDropped(); 103 | for ( var i = 0; i < files.length; i++) { 104 | var file = files[i]; 105 | 106 | // create a new xhr object 107 | var xhr = new XMLHttpRequest(); 108 | var upload = xhr.upload; 109 | upload.fileIndex = i; 110 | upload.fileObj = file; 111 | upload.downloadStartTime = new Date().getTime(); 112 | upload.currentStart = upload.downloadStartTime; 113 | upload.currentProgress = 0; 114 | upload.startData = 0; 115 | 116 | // add listeners 117 | upload.addEventListener("progress", progress, false); 118 | upload.addEventListener("load", load, false); 119 | 120 | xhr.open(opts.method, opts.url); 121 | //Use native function(Chrome 5+ ,Safari 5+ and Firefox 4+), for dealing with multipart/form-data and boundray generation 122 | if(FormData){ 123 | var formdata = new FormData(); //see https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects 124 | //'file' can be any string which you would like to associte with uploaded file even for example file.type eg: 125 | //formdata.append(file.type, file); 126 | //formdata.append(file.fileName, file); 127 | formdata.append('file', file); 128 | xhr.send(file); 129 | } 130 | else{ 131 | //TODO: Multipart boundary generation for other browsers, see http://demos.hacks.mozilla.org/openweb/imageUploader/js/extends/xhr.js 132 | xhr.setRequestHeader("Cache-Control", "no-cache"); 133 | xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 134 | xhr.setRequestHeader("X-File-Name", file.fileName); 135 | xhr.setRequestHeader("X-File-Size", file.fileSize); 136 | xhr.setRequestHeader("Content-Type", "multipart/form-data"); 137 | xhr.send(file); 138 | } 139 | $.fn.dropzone.uploadStarted(i, file); 140 | } 141 | } 142 | 143 | function load(event) { 144 | var now = new Date().getTime(); 145 | var timeDiff = now - this.downloadStartTime; 146 | $.fn.dropzone.uploadFinished(this.fileIndex, this.fileObj, timeDiff); 147 | log("finished loading of file " + this.fileIndex); 148 | } 149 | 150 | function progress(event) { 151 | if (event.lengthComputable) { 152 | var percentage = Math.round((event.loaded * 100) / event.total); 153 | if (this.currentProgress != percentage) { 154 | 155 | // log(this.fileIndex + " --> " + percentage + "%"); 156 | 157 | this.currentProgress = percentage; 158 | $.fn.dropzone.fileUploadProgressUpdated(this.fileIndex, this.fileObj, this.currentProgress); 159 | 160 | var elapsed = new Date().getTime(); 161 | var diffTime = elapsed - this.currentStart; 162 | if (diffTime >= opts.uploadRateRefreshTime) { 163 | var diffData = event.loaded - this.startData; 164 | var speed = diffData / diffTime; // in KB/sec 165 | 166 | $.fn.dropzone.fileUploadSpeedUpdated(this.fileIndex, this.fileObj, speed); 167 | 168 | this.startData = event.loaded; 169 | this.currentStart = elapsed; 170 | } 171 | } 172 | } 173 | } 174 | 175 | // invoked when the input field has changed and new files have been dropped 176 | // or selected 177 | function change(event) { 178 | event.preventDefault(); 179 | 180 | // get all files ... 181 | var files = this.files; 182 | 183 | // ... and upload them 184 | uploadFiles(files); 185 | } 186 | 187 | })(jQuery); --------------------------------------------------------------------------------