[239] | 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 | };
|
---|