1 | <?php
|
---|
2 |
|
---|
3 | /** This file is part of KCFinder project
|
---|
4 | *
|
---|
5 | * @desc Upload files using drag and drop
|
---|
6 | * @package KCFinder
|
---|
7 | * @version 2.51
|
---|
8 | * @author Forum user (updated by Pavel Tzonkov)
|
---|
9 | * @copyright 2010, 2011 KCFinder Project
|
---|
10 | * @license http://www.opensource.org/licenses/gpl-2.0.php GPLv2
|
---|
11 | * @license http://www.opensource.org/licenses/lgpl-2.1.php LGPLv2
|
---|
12 | * @link http://kcfinder.sunhater.com
|
---|
13 | */?>
|
---|
14 |
|
---|
15 | browser.initDropUpload = function() {
|
---|
16 | if ((typeof(XMLHttpRequest) == 'undefined') ||
|
---|
17 | (typeof(document.addEventListener) == 'undefined') ||
|
---|
18 | (typeof(File) == 'undefined') ||
|
---|
19 | (typeof(FileReader) == 'undefined')
|
---|
20 | )
|
---|
21 | return;
|
---|
22 |
|
---|
23 | if (!XMLHttpRequest.prototype.sendAsBinary) {
|
---|
24 | XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
|
---|
25 | var ords = Array.prototype.map.call(datastr, function(x) {
|
---|
26 | return x.charCodeAt(0) & 0xff;
|
---|
27 | });
|
---|
28 | var ui8a = new Uint8Array(ords);
|
---|
29 | this.send(ui8a.buffer);
|
---|
30 | }
|
---|
31 | }
|
---|
32 |
|
---|
33 | var uploadQueue = [],
|
---|
34 | uploadInProgress = false,
|
---|
35 | filesCount = 0,
|
---|
36 | errors = [],
|
---|
37 | files = $('#files'),
|
---|
38 | folders = $('div.folder > a'),
|
---|
39 | boundary = '------multipartdropuploadboundary' + (new Date).getTime(),
|
---|
40 | currentFile,
|
---|
41 |
|
---|
42 | filesDragOver = function(e) {
|
---|
43 | if (e.preventDefault) e.preventDefault();
|
---|
44 | $('#files').addClass('drag');
|
---|
45 | return false;
|
---|
46 | },
|
---|
47 |
|
---|
48 | filesDragEnter = function(e) {
|
---|
49 | if (e.preventDefault) e.preventDefault();
|
---|
50 | return false;
|
---|
51 | },
|
---|
52 |
|
---|
53 | filesDragLeave = function(e) {
|
---|
54 | if (e.preventDefault) e.preventDefault();
|
---|
55 | $('#files').removeClass('drag');
|
---|
56 | return false;
|
---|
57 | },
|
---|
58 |
|
---|
59 | filesDrop = function(e) {
|
---|
60 | if (e.preventDefault) e.preventDefault();
|
---|
61 | if (e.stopPropagation) e.stopPropagation();
|
---|
62 | $('#files').removeClass('drag');
|
---|
63 | if (!$('#folders span.current').first().parent().data('writable')) {
|
---|
64 | browser.alert("Cannot write to upload folder.");
|
---|
65 | return false;
|
---|
66 | }
|
---|
67 | filesCount += e.dataTransfer.files.length
|
---|
68 | for (var i = 0; i < e.dataTransfer.files.length; i++) {
|
---|
69 | var file = e.dataTransfer.files[i];
|
---|
70 | file.thisTargetDir = browser.dir;
|
---|
71 | uploadQueue.push(file);
|
---|
72 | }
|
---|
73 | processUploadQueue();
|
---|
74 | return false;
|
---|
75 | },
|
---|
76 |
|
---|
77 | folderDrag = function(e) {
|
---|
78 | if (e.preventDefault) e.preventDefault();
|
---|
79 | return false;
|
---|
80 | },
|
---|
81 |
|
---|
82 | folderDrop = function(e, dir) {
|
---|
83 | if (e.preventDefault) e.preventDefault();
|
---|
84 | if (e.stopPropagation) e.stopPropagation();
|
---|
85 | if (!$(dir).data('writable')) {
|
---|
86 | browser.alert("Cannot write to upload folder.");
|
---|
87 | return false;
|
---|
88 | }
|
---|
89 | filesCount += e.dataTransfer.files.length
|
---|
90 | for (var i = 0; i < e.dataTransfer.files.length; i++) {
|
---|
91 | var file = e.dataTransfer.files[i];
|
---|
92 | file.thisTargetDir = $(dir).data('path');
|
---|
93 | uploadQueue.push(file);
|
---|
94 | }
|
---|
95 | processUploadQueue();
|
---|
96 | return false;
|
---|
97 | };
|
---|
98 |
|
---|
99 | files.get(0).removeEventListener('dragover', filesDragOver, false);
|
---|
100 | files.get(0).removeEventListener('dragenter', filesDragEnter, false);
|
---|
101 | files.get(0).removeEventListener('dragleave', filesDragLeave, false);
|
---|
102 | files.get(0).removeEventListener('drop', filesDrop, false);
|
---|
103 |
|
---|
104 | files.get(0).addEventListener('dragover', filesDragOver, false);
|
---|
105 | files.get(0).addEventListener('dragenter', filesDragEnter, false);
|
---|
106 | files.get(0).addEventListener('dragleave', filesDragLeave, false);
|
---|
107 | files.get(0).addEventListener('drop', filesDrop, false);
|
---|
108 |
|
---|
109 | folders.each(function() {
|
---|
110 | var folder = this,
|
---|
111 |
|
---|
112 | dragOver = function(e) {
|
---|
113 | $(folder).children('span.folder').addClass('context');
|
---|
114 | return folderDrag(e);
|
---|
115 | },
|
---|
116 |
|
---|
117 | dragLeave = function(e) {
|
---|
118 | $(folder).children('span.folder').removeClass('context');
|
---|
119 | return folderDrag(e);
|
---|
120 | },
|
---|
121 |
|
---|
122 | drop = function(e) {
|
---|
123 | $(folder).children('span.folder').removeClass('context');
|
---|
124 | return folderDrop(e, folder);
|
---|
125 | };
|
---|
126 |
|
---|
127 | this.removeEventListener('dragover', dragOver, false);
|
---|
128 | this.removeEventListener('dragenter', folderDrag, false);
|
---|
129 | this.removeEventListener('dragleave', dragLeave, false);
|
---|
130 | this.removeEventListener('drop', drop, false);
|
---|
131 |
|
---|
132 | this.addEventListener('dragover', dragOver, false);
|
---|
133 | this.addEventListener('dragenter', folderDrag, false);
|
---|
134 | this.addEventListener('dragleave', dragLeave, false);
|
---|
135 | this.addEventListener('drop', drop, false);
|
---|
136 | });
|
---|
137 |
|
---|
138 | function updateProgress(evt) {
|
---|
139 | var progress = evt.lengthComputable
|
---|
140 | ? Math.round((evt.loaded * 100) / evt.total) + '%'
|
---|
141 | : Math.round(evt.loaded / 1024) + " KB";
|
---|
142 | $('#loading').html(browser.label("Uploading file {number} of {count}... {progress}", {
|
---|
143 | number: filesCount - uploadQueue.length,
|
---|
144 | count: filesCount,
|
---|
145 | progress: progress
|
---|
146 | }));
|
---|
147 | }
|
---|
148 |
|
---|
149 | function processUploadQueue() {
|
---|
150 | if (uploadInProgress)
|
---|
151 | return false;
|
---|
152 |
|
---|
153 | if (uploadQueue && uploadQueue.length) {
|
---|
154 | var file = uploadQueue.shift();
|
---|
155 | currentFile = file;
|
---|
156 | $('#loading').html(browser.label("Uploading file {number} of {count}... {progress}", {
|
---|
157 | number: filesCount - uploadQueue.length,
|
---|
158 | count: filesCount,
|
---|
159 | progress: ""
|
---|
160 | }));
|
---|
161 | $('#loading').css('display', 'inline');
|
---|
162 |
|
---|
163 | var reader = new FileReader();
|
---|
164 | reader.thisFileName = file.name;
|
---|
165 | reader.thisFileType = file.type;
|
---|
166 | reader.thisFileSize = file.size;
|
---|
167 | reader.thisTargetDir = file.thisTargetDir;
|
---|
168 |
|
---|
169 | reader.onload = function(evt) {
|
---|
170 | uploadInProgress = true;
|
---|
171 |
|
---|
172 | var postbody = '--' + boundary + '\r\nContent-Disposition: form-data; name="upload[]"';
|
---|
173 | if (evt.target.thisFileName)
|
---|
174 | postbody += '; filename="' + _.utf8encode(evt.target.thisFileName) + '"';
|
---|
175 | postbody += '\r\n';
|
---|
176 | if (evt.target.thisFileSize)
|
---|
177 | postbody += 'Content-Length: ' + evt.target.thisFileSize + '\r\n';
|
---|
178 | postbody += 'Content-Type: ' + evt.target.thisFileType + '\r\n\r\n' + evt.target.result + '\r\n--' + boundary + '\r\nContent-Disposition: form-data; name="dir"\r\n\r\n' + _.utf8encode(evt.target.thisTargetDir) + '\r\n--' + boundary + '\r\n--' + boundary + '--\r\n';
|
---|
179 |
|
---|
180 | var xhr = new XMLHttpRequest();
|
---|
181 | xhr.thisFileName = evt.target.thisFileName;
|
---|
182 |
|
---|
183 | if (xhr.upload) {
|
---|
184 | xhr.upload.thisFileName = evt.target.thisFileName;
|
---|
185 | xhr.upload.addEventListener("progress", updateProgress, false);
|
---|
186 | }
|
---|
187 | xhr.open('POST', browser.baseGetData('upload'), true);
|
---|
188 | xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
|
---|
189 | xhr.setRequestHeader('Content-Length', postbody.length);
|
---|
190 |
|
---|
191 | xhr.onload = function(e) {
|
---|
192 | $('#loading').css('display', 'none');
|
---|
193 | if (browser.dir == reader.thisTargetDir)
|
---|
194 | browser.fadeFiles();
|
---|
195 | uploadInProgress = false;
|
---|
196 | processUploadQueue();
|
---|
197 | if (xhr.responseText.substr(0, 1) != '/')
|
---|
198 | errors[errors.length] = xhr.responseText;
|
---|
199 | }
|
---|
200 |
|
---|
201 | xhr.sendAsBinary(postbody);
|
---|
202 | };
|
---|
203 |
|
---|
204 | reader.onerror = function(evt) {
|
---|
205 | $('#loading').css('display', 'none');
|
---|
206 | uploadInProgress = false;
|
---|
207 | processUploadQueue();
|
---|
208 | errors[errors.length] = browser.label("Failed to upload {filename}!", {
|
---|
209 | filename: evt.target.thisFileName
|
---|
210 | });
|
---|
211 | };
|
---|
212 |
|
---|
213 | reader.readAsBinaryString(file);
|
---|
214 |
|
---|
215 | } else {
|
---|
216 | filesCount = 0;
|
---|
217 | var loop = setInterval(function() {
|
---|
218 | if (uploadInProgress) return;
|
---|
219 | clearInterval(loop);
|
---|
220 | if (currentFile.thisTargetDir == browser.dir)
|
---|
221 | browser.refresh();
|
---|
222 | boundary = '------multipartdropuploadboundary' + (new Date).getTime();
|
---|
223 | if (errors.length) {
|
---|
224 | browser.alert(errors.join('\n'));
|
---|
225 | errors = [];
|
---|
226 | }
|
---|
227 | }, 333);
|
---|
228 | }
|
---|
229 | }
|
---|
230 | };
|
---|