Skip to content

Commit 01f958d

Browse files
jpsullivanjpsullivan
committed
Updated Readme
1 parent 6ce0621 commit 01f958d

File tree

3 files changed

+333
-0
lines changed

3 files changed

+333
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea/

‎README

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
#jQuery Drag and Drop
2+
3+
* [Website](http://https://github.com/jpsullivan/jQuery-drag-and-drop/)
4+
* [Bugtracker & feature requests](https://github.com/jpsullivan/jQuery-drag-and-drop/issues)
5+
* Version: 1.0.0-beta1
6+
7+
## Description
8+
9+
This plugin was created to duplicate the functionality of GMail's drag-and-drop attachment support. Once your dropzone is defined, simply drag your file(s) to that area and watch the plugin do its magic.
10+
11+
##Usage
12+
13+
$('selector').filedrop({
14+
url: 'upload.php',
15+
error: function(err, file) {
16+
switch(err) {
17+
case 'BrowserNotSupported':
18+
alert("Sorry! Your browser doesn't support drag and drop.");
19+
break;
20+
case 'TooManyFiles':
21+
alert("Sorry! You're trying to upload too many files at once.");
22+
break;
23+
}
24+
$('selector').addClass('dropzone').removeClass('dropzone-active');
25+
},
26+
dragOver: function() {
27+
$('selector').removeClass('dropzone').addClass('dropzone-active');
28+
},
29+
dragLeave: function() {
30+
$('selector').addClass('dropzone').removeClass('dropzone-active');
31+
},
32+
drop: function() {
33+
// Hide or show any elements while the file is being uploaded
34+
},
35+
uploadStarted: function(index, file, files_count, files_size) {
36+
CatalogManager.totalBytes = files_size;
37+
},
38+
uploadFinished: function(i, file, response) {
39+
// Completed events
40+
},
41+
progressUpdated: function(i, file, bytesLoaded) {
42+
var percent = Math.round(100*((bytesLoaded+CatalogManager.completedBytes)/CatalogManager.totalBytes));
43+
44+
if(percent >= 100) {
45+
percent = 100;
46+
setTimeout("$('#processing').html('Processing... this may take a minute.').fadeIn();", 2000);
47+
}
48+
49+
return percent;
50+
},
51+
afterAll: function() {
52+
// Often times people will have a progress bar which is set to 100% here
53+
}
54+
});
55+
56+
##Development Team / Contact Info
57+
58+
* Josh Sullivan - Lead Developer ([https://github.com/jpsullivan](https://github.com/jpsullivan))
59+
60+
##Requirements
61+
62+
This plugin has two dependencies, which should most likely be used in your webapp regardless.
63+
64+
* jQuery 1.4.4+
65+
* Modernizr
66+
67+
##Roadmap
68+
69+
This plugin will eventually be expanded on to show some demo's, tips, and legacy (fallback) support for browsers that do not yet support features such as drag-and-drop (I'm looking at your IE..)

‎jquery.dnd.js

+263
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
(function($){
2+
var opts = {},
3+
default_opts = {
4+
url: '',
5+
refresh: 1000,
6+
paramname: 'userfile',
7+
maxfiles: 1,
8+
maxfilesize: 10, // MBs
9+
data: {},
10+
drop: empty,
11+
dragEnter: empty,
12+
dragOver: empty,
13+
dragLeave: empty,
14+
docEnter: empty,
15+
docOver: empty,
16+
docLeave: empty,
17+
beforeEach: empty,
18+
afterAll: empty,
19+
rename: empty,
20+
error: function(err, file){ alert(err); },
21+
uploadStarted: empty,
22+
uploadFinished: empty,
23+
progressUpdated: empty,
24+
speedUpdated: empty
25+
},
26+
errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"],
27+
doc_leave_timer,
28+
stop_loop = false,
29+
files_count = 0,
30+
files_size = 0,
31+
files;
32+
33+
$.fn.filedrop = function(options) {
34+
opts = $.extend( {}, default_opts, options );
35+
36+
if(Modernizr.draganddrop) {
37+
this.get(0).addEventListener("drop", drop, true);
38+
this.bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
39+
40+
document.addEventListener("drop", docDrop, true);
41+
$(document).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
42+
}
43+
};
44+
45+
function drop(e) {
46+
e.preventDefault();
47+
opts.drop(e);
48+
49+
var dt = e.dataTransfer;
50+
files = dt.files;
51+
files_count = files.length;
52+
53+
var i;
54+
for(i = 0; i < files_count; i++) {
55+
files_size += files[i].size;
56+
}
57+
58+
upload();
59+
60+
return false;
61+
}
62+
63+
function progress(e) {
64+
if (e.lengthComputable) {
65+
var percentage = Math.round((e.loaded * 100) / e.total);
66+
if (this.currentProgress !== percentage) {
67+
68+
this.currentProgress = percentage;
69+
opts.progressUpdated(this.index, this.file, e.loaded);
70+
71+
var elapsed = new Date().getTime(),
72+
diffTime = elapsed - this.currentStart;
73+
74+
if (diffTime >= opts.refresh) {
75+
var diffData = e.loaded - this.startData,
76+
speed = diffData / diffTime; // KB per second
77+
78+
opts.speedUpdated(this.index, this.file, speed);
79+
this.startData = e.loaded;
80+
this.currentStart = elapsed;
81+
}
82+
}
83+
}
84+
}
85+
86+
function upload() {
87+
stop_loop = false;
88+
if (!files) {
89+
opts.error(errors[0]);
90+
return false;
91+
}
92+
var filesDone = 0,
93+
filesRejected = 0;
94+
95+
if (files_count > opts.maxfiles) {
96+
opts.error(errors[1]);
97+
return false;
98+
}
99+
100+
var i;
101+
for (i = 0; i < files_count; i++) {
102+
if (stop_loop) return false;
103+
try {
104+
if (beforeEach(files[i]) != false) {
105+
if (i === files_count) return;
106+
107+
var reader = new FileReader(),
108+
max_file_size = 1048576 * opts.maxfilesize;
109+
110+
reader.index = i;
111+
112+
if (files[i].size > max_file_size) {
113+
opts.error(errors[2], files[i]);
114+
return false;
115+
}
116+
117+
if(typeof(FileReader.prototype.addEventListener) === "function") {
118+
reader.addEventListener("loadend", send, false);
119+
} else {
120+
reader.onload = send;
121+
}
122+
123+
reader.readAsBinaryString(files[i]);
124+
} else {
125+
filesRejected++;
126+
}
127+
} catch(err) {
128+
opts.error(errors[0]);
129+
return false;
130+
}
131+
}
132+
133+
function send(e) {
134+
// Sometimes the index is not attached to the
135+
// event object. Find it by size. Hack for sure.
136+
if (e.target.index == undefined) {
137+
e.target.index = getIndexBySize(e.total);
138+
}
139+
140+
var xhr = new XMLHttpRequest(),
141+
upload = xhr.upload,
142+
file = files[e.target.index],
143+
index = e.target.index,
144+
start_time = new Date().getTime();
145+
146+
upload.index = index;
147+
upload.file = file;
148+
upload.downloadStartTime = start_time;
149+
upload.currentStart = start_time;
150+
upload.currentProgress = 0;
151+
upload.startData = 0;
152+
upload.addEventListener("progress", progress, false);
153+
154+
xhr.open("POST", opts.url+'&name='+file.name, true);
155+
xhr.setRequestHeader('UP-FILENAME', file.name);
156+
xhr.setRequestHeader('UP-SIZE', file.size);
157+
xhr.setRequestHeader('UP-TYPE', file.type);
158+
xhr.send(window.btoa(e.target.result));
159+
160+
opts.uploadStarted(index, file, files_count, files_size);
161+
162+
if(Modernizr.draganddrop) {
163+
xhr.onreadystatechange = function() {
164+
if(xhr.readyState >=3) {
165+
var result = opts.uploadFinished(index, file, xhr.responseText);
166+
167+
filesDone++;
168+
169+
if (filesDone == files_count - filesRejected) {
170+
afterAll();
171+
}
172+
173+
if (result === false) stop_loop = true;
174+
}
175+
};
176+
} else {
177+
xhr.onload = function() {
178+
if(xhr.readyState >=3) {
179+
var result = opts.uploadFinished(index, file, xhr.responseText);
180+
181+
filesDone++;
182+
183+
if (filesDone == files_count - filesRejected) {
184+
afterAll();
185+
}
186+
187+
if (result === false) stop_loop = true;
188+
}
189+
};
190+
}
191+
}
192+
}
193+
194+
function getIndexBySize(size) {
195+
for (var i=0; i < filesCount; i++) {
196+
if (files[i].size == size) {
197+
return i;
198+
}
199+
}
200+
201+
return undefined;
202+
}
203+
204+
function rename(name) {
205+
return opts.rename(name);
206+
}
207+
208+
function beforeEach(file) {
209+
return opts.beforeEach(file);
210+
}
211+
212+
function afterAll() {
213+
return opts.afterAll();
214+
}
215+
216+
function dragEnter(e) {
217+
clearTimeout(doc_leave_timer);
218+
e.preventDefault();
219+
opts.dragEnter(e);
220+
}
221+
222+
function dragOver(e) {
223+
clearTimeout(doc_leave_timer);
224+
e.preventDefault();
225+
opts.docOver(e);
226+
opts.dragOver(e);
227+
}
228+
229+
function dragLeave(e) {
230+
clearTimeout(doc_leave_timer);
231+
opts.dragLeave(e);
232+
e.stopPropagation();
233+
}
234+
235+
function docDrop(e) {
236+
e.preventDefault();
237+
opts.docLeave(e);
238+
return false;
239+
}
240+
241+
function docEnter(e) {
242+
clearTimeout(doc_leave_timer);
243+
e.preventDefault();
244+
opts.docEnter(e);
245+
return false;
246+
}
247+
248+
function docOver(e) {
249+
clearTimeout(doc_leave_timer);
250+
e.preventDefault();
251+
opts.docOver(e);
252+
return false;
253+
}
254+
255+
function docLeave(e) {
256+
doc_leave_timer = setTimeout(function(){
257+
opts.docLeave(e);
258+
}, 200);
259+
}
260+
261+
function empty(){}
262+
263+
})(jQuery);

0 commit comments

Comments
 (0)