1
0

file-upload.js 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340
  1. /*
  2. * Copyright (c) 2014
  3. *
  4. * This file is licensed under the Affero General Public License version 3
  5. * or later.
  6. *
  7. * See the COPYING-README file.
  8. *
  9. */
  10. /**
  11. * The file upload code uses several hooks to interact with blueimps jQuery file upload library:
  12. * 1. the core upload handling hooks are added when initializing the plugin,
  13. * 2. if the browser supports progress events they are added in a separate set after the initialization
  14. * 3. every app can add it's own triggers for fileupload
  15. * - files adds d'n'd handlers and also reacts to done events to add new rows to the filelist
  16. * - TODO pictures upload button
  17. * - TODO music upload button
  18. */
  19. /* global jQuery, md5 */
  20. /**
  21. * File upload object
  22. *
  23. * @class OC.FileUpload
  24. * @classdesc
  25. *
  26. * Represents a file upload
  27. *
  28. * @param {OC.Uploader} uploader uploader
  29. * @param {Object} data blueimp data
  30. */
  31. OC.FileUpload = function(uploader, data) {
  32. this.uploader = uploader;
  33. this.data = data;
  34. var basePath = '';
  35. if (this.uploader.fileList) {
  36. basePath = this.uploader.fileList.getCurrentDirectory();
  37. }
  38. var path = OC.joinPaths(basePath, this.getFile().relativePath || '', this.getFile().name);
  39. this.id = 'web-file-upload-' + md5(path) + '-' + (new Date()).getTime();
  40. };
  41. OC.FileUpload.CONFLICT_MODE_DETECT = 0;
  42. OC.FileUpload.CONFLICT_MODE_OVERWRITE = 1;
  43. OC.FileUpload.CONFLICT_MODE_AUTORENAME = 2;
  44. // IE11 polyfill
  45. // TODO: nuke out of orbit as well as this legacy code
  46. if (!FileReader.prototype.readAsBinaryString) {
  47. FileReader.prototype.readAsBinaryString = function(fileData) {
  48. var binary = ''
  49. var pt = this
  50. var reader = new FileReader()
  51. reader.onload = function (e) {
  52. var bytes = new Uint8Array(reader.result)
  53. var length = bytes.byteLength
  54. for (var i = 0; i < length; i++) {
  55. binary += String.fromCharCode(bytes[i])
  56. }
  57. // pt.result - readonly so assign binary
  58. pt.content = binary
  59. $(pt).trigger('onload')
  60. }
  61. reader.readAsArrayBuffer(fileData)
  62. }
  63. }
  64. OC.FileUpload.prototype = {
  65. /**
  66. * Unique upload id
  67. *
  68. * @type string
  69. */
  70. id: null,
  71. /**
  72. * Upload element
  73. *
  74. * @type Object
  75. */
  76. $uploadEl: null,
  77. /**
  78. * Target folder
  79. *
  80. * @type string
  81. */
  82. _targetFolder: '',
  83. /**
  84. * @type int
  85. */
  86. _conflictMode: OC.FileUpload.CONFLICT_MODE_DETECT,
  87. /**
  88. * New name from server after autorename
  89. *
  90. * @type String
  91. */
  92. _newName: null,
  93. /**
  94. * Returns the unique upload id
  95. *
  96. * @return string
  97. */
  98. getId: function() {
  99. return this.id;
  100. },
  101. /**
  102. * Returns the file to be uploaded
  103. *
  104. * @return {File} file
  105. */
  106. getFile: function() {
  107. return this.data.files[0];
  108. },
  109. /**
  110. * Return the final filename.
  111. *
  112. * @return {String} file name
  113. */
  114. getFileName: function() {
  115. // autorenamed name
  116. if (this._newName) {
  117. return this._newName;
  118. }
  119. return this.getFile().name;
  120. },
  121. setTargetFolder: function(targetFolder) {
  122. this._targetFolder = targetFolder;
  123. },
  124. getTargetFolder: function() {
  125. return this._targetFolder;
  126. },
  127. /**
  128. * Get full path for the target file, including relative path,
  129. * without the file name.
  130. *
  131. * @return {String} full path
  132. */
  133. getFullPath: function() {
  134. return OC.joinPaths(this._targetFolder, this.getFile().relativePath || '');
  135. },
  136. /**
  137. * Get full path for the target file,
  138. * including relative path and file name.
  139. *
  140. * @return {String} full path
  141. */
  142. getFullFilePath: function() {
  143. return OC.joinPaths(this.getFullPath(), this.getFile().name);
  144. },
  145. /**
  146. * Returns conflict resolution mode.
  147. *
  148. * @return {int} conflict mode
  149. */
  150. getConflictMode: function() {
  151. return this._conflictMode || OC.FileUpload.CONFLICT_MODE_DETECT;
  152. },
  153. /**
  154. * Set conflict resolution mode.
  155. * See CONFLICT_MODE_* constants.
  156. *
  157. * @param {int} mode conflict mode
  158. */
  159. setConflictMode: function(mode) {
  160. this._conflictMode = mode;
  161. },
  162. deleteUpload: function() {
  163. delete this.data.jqXHR;
  164. },
  165. /**
  166. * Trigger autorename and append "(2)".
  167. * Multiple calls will increment the appended number.
  168. */
  169. autoRename: function() {
  170. var name = this.getFile().name;
  171. if (!this._renameAttempt) {
  172. this._renameAttempt = 1;
  173. }
  174. var dotPos = name.lastIndexOf('.');
  175. var extPart = '';
  176. if (dotPos > 0) {
  177. this._newName = name.substr(0, dotPos);
  178. extPart = name.substr(dotPos);
  179. } else {
  180. this._newName = name;
  181. }
  182. // generate new name
  183. this._renameAttempt++;
  184. this._newName = this._newName + ' (' + this._renameAttempt + ')' + extPart;
  185. },
  186. /**
  187. * Submit the upload
  188. */
  189. submit: function() {
  190. var self = this;
  191. var data = this.data;
  192. var file = this.getFile();
  193. if (self.aborted === true) {
  194. return $.Deferred().resolve().promise();
  195. }
  196. // it was a folder upload, so make sure the parent directory exists already
  197. var folderPromise;
  198. if (file.relativePath) {
  199. folderPromise = this.uploader.ensureFolderExists(this.getFullPath());
  200. } else {
  201. folderPromise = $.Deferred().resolve().promise();
  202. }
  203. if (this.uploader.fileList) {
  204. this.data.url = this.uploader.fileList.getUploadUrl(this.getFileName(), this.getFullPath());
  205. }
  206. if (!this.data.headers) {
  207. this.data.headers = {};
  208. }
  209. // webdav without multipart
  210. this.data.multipart = false;
  211. this.data.type = 'PUT';
  212. delete this.data.headers['If-None-Match'];
  213. if (this._conflictMode === OC.FileUpload.CONFLICT_MODE_DETECT
  214. || this._conflictMode === OC.FileUpload.CONFLICT_MODE_AUTORENAME) {
  215. this.data.headers['If-None-Match'] = '*';
  216. }
  217. var userName = this.uploader.davClient.getUserName();
  218. var password = this.uploader.davClient.getPassword();
  219. if (userName) {
  220. // copy username/password from DAV client
  221. this.data.headers['Authorization'] =
  222. 'Basic ' + btoa(userName + ':' + (password || ''));
  223. }
  224. var chunkFolderPromise;
  225. if ($.support.blobSlice
  226. && this.uploader.fileUploadParam.maxChunkSize
  227. && this.getFile().size > this.uploader.fileUploadParam.maxChunkSize
  228. ) {
  229. data.isChunked = true;
  230. chunkFolderPromise = this.uploader.davClient.createDirectory(
  231. 'uploads/' + OC.getCurrentUser().uid + '/' + this.getId()
  232. );
  233. // TODO: if fails, it means same id already existed, need to retry
  234. } else {
  235. chunkFolderPromise = $.Deferred().resolve().promise();
  236. var mtime = this.getFile().lastModified;
  237. if (mtime) {
  238. data.headers['X-OC-Mtime'] = mtime / 1000;
  239. }
  240. }
  241. // wait for creation of the required directory before uploading
  242. return Promise.all([folderPromise, chunkFolderPromise]).then(function() {
  243. if (self.aborted !== true) {
  244. data.submit();
  245. }
  246. }, function() {
  247. self.abort();
  248. });
  249. },
  250. /**
  251. * Process end of transfer
  252. */
  253. done: function() {
  254. if (!this.data.isChunked) {
  255. return $.Deferred().resolve().promise();
  256. }
  257. var uid = OC.getCurrentUser().uid;
  258. var mtime = this.getFile().lastModified;
  259. var size = this.getFile().size;
  260. var headers = {};
  261. if (mtime) {
  262. headers['X-OC-Mtime'] = mtime / 1000;
  263. }
  264. if (size) {
  265. headers['OC-Total-Length'] = size;
  266. }
  267. return this.uploader.davClient.move(
  268. 'uploads/' + uid + '/' + this.getId() + '/.file',
  269. 'files/' + uid + '/' + OC.joinPaths(this.getFullPath(), this.getFileName()),
  270. true,
  271. headers
  272. );
  273. },
  274. _deleteChunkFolder: function() {
  275. // delete transfer directory for this upload
  276. this.uploader.davClient.remove(
  277. 'uploads/' + OC.getCurrentUser().uid + '/' + this.getId()
  278. );
  279. },
  280. /**
  281. * Abort the upload
  282. */
  283. abort: function() {
  284. if (this.data.isChunked) {
  285. this._deleteChunkFolder();
  286. }
  287. this.data.abort();
  288. this.deleteUpload();
  289. this.aborted = true;
  290. },
  291. /**
  292. * Fail the upload
  293. */
  294. fail: function() {
  295. this.deleteUpload();
  296. if (this.data.isChunked) {
  297. this._deleteChunkFolder();
  298. }
  299. },
  300. /**
  301. * Returns the server response
  302. *
  303. * @return {Object} response
  304. */
  305. getResponse: function() {
  306. var response = this.data.response();
  307. if (response.errorThrown) {
  308. // attempt parsing Sabre exception is available
  309. var xml = response.jqXHR.responseXML;
  310. if (xml && xml.documentElement.localName === 'error' && xml.documentElement.namespaceURI === 'DAV:') {
  311. var messages = xml.getElementsByTagNameNS('http://sabredav.org/ns', 'message');
  312. var exceptions = xml.getElementsByTagNameNS('http://sabredav.org/ns', 'exception');
  313. if (messages.length) {
  314. response.message = messages[0].textContent;
  315. }
  316. if (exceptions.length) {
  317. response.exception = exceptions[0].textContent;
  318. }
  319. return response;
  320. }
  321. }
  322. if (typeof response.result !== 'string' && response.result) {
  323. //fetch response from iframe
  324. response = $.parseJSON(response.result[0].body.innerText);
  325. if (!response) {
  326. // likely due to internal server error
  327. response = {status: 500};
  328. }
  329. } else {
  330. response = response.result;
  331. }
  332. return response;
  333. },
  334. /**
  335. * Returns the status code from the response
  336. *
  337. * @return {int} status code
  338. */
  339. getResponseStatus: function() {
  340. if (this.uploader.isXHRUpload()) {
  341. var xhr = this.data.response().jqXHR;
  342. if (xhr) {
  343. return xhr.status;
  344. }
  345. return null;
  346. }
  347. return this.getResponse().status;
  348. },
  349. /**
  350. * Returns the response header by name
  351. *
  352. * @param {String} headerName header name
  353. * @return {Array|String} response header value(s)
  354. */
  355. getResponseHeader: function(headerName) {
  356. headerName = headerName.toLowerCase();
  357. if (this.uploader.isXHRUpload()) {
  358. return this.data.response().jqXHR.getResponseHeader(headerName);
  359. }
  360. var headers = this.getResponse().headers;
  361. if (!headers) {
  362. return null;
  363. }
  364. var value = _.find(headers, function(value, key) {
  365. return key.toLowerCase() === headerName;
  366. });
  367. if (_.isArray(value) && value.length === 1) {
  368. return value[0];
  369. }
  370. return value;
  371. }
  372. };
  373. /**
  374. * keeps track of uploads in progress and implements callbacks for the conflicts dialog
  375. * @namespace
  376. */
  377. OC.Uploader = function() {
  378. this.init.apply(this, arguments);
  379. };
  380. OC.Uploader.prototype = _.extend({
  381. /**
  382. * @type Array<OC.FileUpload>
  383. */
  384. _uploads: {},
  385. /**
  386. * Count of upload done promises that have not finished yet.
  387. *
  388. * @type int
  389. */
  390. _pendingUploadDoneCount: 0,
  391. /**
  392. * Is it currently uploading?
  393. *
  394. * @type boolean
  395. */
  396. _uploading: false,
  397. /**
  398. * List of directories known to exist.
  399. *
  400. * Key is the fullpath and value is boolean, true meaning that the directory
  401. * was already created so no need to create it again.
  402. */
  403. _knownDirs: {},
  404. /**
  405. * @type OCA.Files.FileList
  406. */
  407. fileList: null,
  408. /**
  409. * @type OCA.Files.OperationProgressBar
  410. */
  411. progressBar: null,
  412. /**
  413. * @type OC.Files.Client
  414. */
  415. filesClient: null,
  416. /**
  417. * Webdav client pointing at the root "dav" endpoint
  418. *
  419. * @type OC.Files.Client
  420. */
  421. davClient: null,
  422. /**
  423. * Function that will allow us to know if Ajax uploads are supported
  424. * @link https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html
  425. * also see article @link http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata
  426. */
  427. _supportAjaxUploadWithProgress: function() {
  428. if (window.TESTING) {
  429. return true;
  430. }
  431. return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData();
  432. // Is the File API supported?
  433. function supportFileAPI() {
  434. var fi = document.createElement('INPUT');
  435. fi.type = 'file';
  436. return 'files' in fi;
  437. }
  438. // Are progress events supported?
  439. function supportAjaxUploadProgressEvents() {
  440. var xhr = new XMLHttpRequest();
  441. return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
  442. }
  443. // Is FormData supported?
  444. function supportFormData() {
  445. return !! window.FormData;
  446. }
  447. },
  448. /**
  449. * Returns whether an XHR upload will be used
  450. *
  451. * @return {bool} true if XHR upload will be used,
  452. * false for iframe upload
  453. */
  454. isXHRUpload: function () {
  455. return !this.fileUploadParam.forceIframeTransport &&
  456. ((!this.fileUploadParam.multipart && $.support.xhrFileUpload) ||
  457. $.support.xhrFormDataFileUpload);
  458. },
  459. /**
  460. * Makes sure that the upload folder and its parents exists
  461. *
  462. * @param {String} fullPath full path
  463. * @return {Promise} promise that resolves when all parent folders
  464. * were created
  465. */
  466. ensureFolderExists: function(fullPath) {
  467. if (!fullPath || fullPath === '/') {
  468. return $.Deferred().resolve().promise();
  469. }
  470. // remove trailing slash
  471. if (fullPath.charAt(fullPath.length - 1) === '/') {
  472. fullPath = fullPath.substr(0, fullPath.length - 1);
  473. }
  474. var self = this;
  475. var promise = this._knownDirs[fullPath];
  476. if (this.fileList) {
  477. // assume the current folder exists
  478. this._knownDirs[this.fileList.getCurrentDirectory()] = $.Deferred().resolve().promise();
  479. }
  480. if (!promise) {
  481. var deferred = new $.Deferred();
  482. promise = deferred.promise();
  483. this._knownDirs[fullPath] = promise;
  484. // make sure all parents already exist
  485. var parentPath = OC.dirname(fullPath);
  486. var parentPromise = this._knownDirs[parentPath];
  487. if (!parentPromise) {
  488. parentPromise = this.ensureFolderExists(parentPath);
  489. }
  490. parentPromise.then(function() {
  491. self.filesClient.createDirectory(fullPath).always(function(status) {
  492. // 405 is expected if the folder already exists
  493. if ((status >= 200 && status < 300) || status === 405) {
  494. if (status !== 405) {
  495. self.trigger('createdfolder', fullPath);
  496. }
  497. deferred.resolve();
  498. return;
  499. }
  500. OC.Notification.show(t('files', 'Could not create folder "{dir}"', {dir: fullPath}), {type: 'error'});
  501. deferred.reject();
  502. });
  503. }, function() {
  504. deferred.reject();
  505. });
  506. }
  507. return promise;
  508. },
  509. /**
  510. * Submit the given uploads
  511. *
  512. * @param {Array} array of uploads to start
  513. */
  514. submitUploads: function(uploads) {
  515. var self = this;
  516. _.each(uploads, function(upload) {
  517. self._uploads[upload.data.uploadId] = upload;
  518. });
  519. self.totalToUpload = _.reduce(uploads, function(memo, upload) { return memo+upload.getFile().size; }, 0);
  520. var semaphore = new OCA.Files.Semaphore(5);
  521. var promises = _.map(uploads, function(upload) {
  522. return semaphore.acquire().then(function(){
  523. return upload.submit().then(function(){
  524. semaphore.release();
  525. });
  526. });
  527. });
  528. },
  529. confirmBeforeUnload: function() {
  530. if (this._uploading) {
  531. return t('files', 'This will stop your current uploads.')
  532. }
  533. },
  534. /**
  535. * Show conflict for the given file object
  536. *
  537. * @param {OC.FileUpload} file upload object
  538. */
  539. showConflict: function(fileUpload) {
  540. //show "file already exists" dialog
  541. var self = this;
  542. var file = fileUpload.getFile();
  543. // already attempted autorename but the server said the file exists ? (concurrently added)
  544. if (fileUpload.getConflictMode() === OC.FileUpload.CONFLICT_MODE_AUTORENAME) {
  545. // attempt another autorename, defer to let the current callback finish
  546. _.defer(function() {
  547. self.onAutorename(fileUpload);
  548. });
  549. return;
  550. }
  551. // retrieve more info about this file
  552. this.filesClient.getFileInfo(fileUpload.getFullFilePath()).then(function(status, fileInfo) {
  553. var original = fileInfo;
  554. var replacement = file;
  555. original.directory = original.path;
  556. OC.dialogs.fileexists(fileUpload, original, replacement, self);
  557. });
  558. },
  559. /**
  560. * cancels all uploads
  561. */
  562. cancelUploads:function() {
  563. this.log('canceling uploads');
  564. jQuery.each(this._uploads, function(i, upload) {
  565. upload.abort();
  566. });
  567. this.clear();
  568. },
  569. /**
  570. * Clear uploads
  571. */
  572. clear: function() {
  573. this._knownDirs = {};
  574. },
  575. /**
  576. * Returns an upload by id
  577. *
  578. * @param {int} data uploadId
  579. * @return {OC.FileUpload} file upload
  580. */
  581. getUpload: function(data) {
  582. if (_.isString(data)) {
  583. return this._uploads[data];
  584. } else if (data.uploadId && this._uploads[data.uploadId]) {
  585. this._uploads[data.uploadId].data = data;
  586. return this._uploads[data.uploadId];
  587. }
  588. return null;
  589. },
  590. /**
  591. * Removes an upload from the list of known uploads.
  592. *
  593. * @param {OC.FileUpload} upload the upload to remove.
  594. */
  595. removeUpload: function(upload) {
  596. if (!upload || !upload.data || !upload.data.uploadId) {
  597. return;
  598. }
  599. delete this._uploads[upload.data.uploadId];
  600. },
  601. showUploadCancelMessage: _.debounce(function() {
  602. OC.Notification.show(t('files', 'Upload cancelled.'), {timeout : 7, type: 'error'});
  603. }, 500),
  604. /**
  605. * callback for the conflicts dialog
  606. */
  607. onCancel:function() {
  608. this.cancelUploads();
  609. },
  610. /**
  611. * callback for the conflicts dialog
  612. * calls onSkip, onReplace or onAutorename for each conflict
  613. * @param {object} conflicts - list of conflict elements
  614. */
  615. onContinue:function(conflicts) {
  616. var self = this;
  617. //iterate over all conflicts
  618. jQuery.each(conflicts, function (i, conflict) {
  619. conflict = $(conflict);
  620. var keepOriginal = conflict.find('.original input[type="checkbox"]:checked').length === 1;
  621. var keepReplacement = conflict.find('.replacement input[type="checkbox"]:checked').length === 1;
  622. if (keepOriginal && keepReplacement) {
  623. // when both selected -> autorename
  624. self.onAutorename(conflict.data('data'));
  625. } else if (keepReplacement) {
  626. // when only replacement selected -> overwrite
  627. self.onReplace(conflict.data('data'));
  628. } else {
  629. // when only original selected -> skip
  630. // when none selected -> skip
  631. self.onSkip(conflict.data('data'));
  632. }
  633. });
  634. },
  635. /**
  636. * handle skipping an upload
  637. * @param {OC.FileUpload} upload
  638. */
  639. onSkip:function(upload) {
  640. this.log('skip', null, upload);
  641. upload.deleteUpload();
  642. },
  643. /**
  644. * handle replacing a file on the server with an uploaded file
  645. * @param {FileUpload} data
  646. */
  647. onReplace:function(upload) {
  648. this.log('replace', null, upload);
  649. upload.setConflictMode(OC.FileUpload.CONFLICT_MODE_OVERWRITE);
  650. this.submitUploads([upload]);
  651. },
  652. /**
  653. * handle uploading a file and letting the server decide a new name
  654. * @param {object} upload
  655. */
  656. onAutorename:function(upload) {
  657. this.log('autorename', null, upload);
  658. upload.setConflictMode(OC.FileUpload.CONFLICT_MODE_AUTORENAME);
  659. do {
  660. upload.autoRename();
  661. // if file known to exist on the client side, retry
  662. } while (this.fileList && this.fileList.inList(upload.getFileName()));
  663. // resubmit upload
  664. this.submitUploads([upload]);
  665. },
  666. _trace: false, //TODO implement log handler for JS per class?
  667. log: function(caption, e, data) {
  668. if (this._trace) {
  669. console.log(caption);
  670. console.log(data);
  671. }
  672. },
  673. /**
  674. * checks the list of existing files prior to uploading and shows a simple dialog to choose
  675. * skip all, replace all or choose which files to keep
  676. *
  677. * @param {array} selection of files to upload
  678. * @param {object} callbacks - object with several callback methods
  679. * @param {Function} callbacks.onNoConflicts
  680. * @param {Function} callbacks.onSkipConflicts
  681. * @param {Function} callbacks.onReplaceConflicts
  682. * @param {Function} callbacks.onChooseConflicts
  683. * @param {Function} callbacks.onCancel
  684. */
  685. checkExistingFiles: function (selection, callbacks) {
  686. var fileList = this.fileList;
  687. var conflicts = [];
  688. // only keep non-conflicting uploads
  689. selection.uploads = _.filter(selection.uploads, function(upload) {
  690. var file = upload.getFile();
  691. if (file.relativePath) {
  692. // can't check in subfolder contents
  693. return true;
  694. }
  695. if (!fileList) {
  696. // no list to check against
  697. return true;
  698. }
  699. var fileInfo = fileList.findFile(file.name);
  700. if (fileInfo) {
  701. conflicts.push([
  702. // original
  703. _.extend(fileInfo, {
  704. directory: fileInfo.directory || fileInfo.path || fileList.getCurrentDirectory()
  705. }),
  706. // replacement (File object)
  707. upload
  708. ]);
  709. return false;
  710. }
  711. return true;
  712. });
  713. if (conflicts.length) {
  714. // wait for template loading
  715. OC.dialogs.fileexists(null, null, null, this).done(function() {
  716. _.each(conflicts, function(conflictData) {
  717. OC.dialogs.fileexists(conflictData[1], conflictData[0], conflictData[1].getFile(), this);
  718. });
  719. });
  720. }
  721. // upload non-conflicting files
  722. // note: when reaching the server they might still meet conflicts
  723. // if the folder was concurrently modified, these will get added
  724. // to the already visible dialog, if applicable
  725. callbacks.onNoConflicts(selection);
  726. },
  727. _updateProgressBarOnUploadStop: function() {
  728. if (this._pendingUploadDoneCount === 0) {
  729. // All the uploads ended and there is no pending operation, so hide
  730. // the progress bar.
  731. // Note that this happens here only with non-chunked uploads; if the
  732. // upload was chunked then this will have been executed after all
  733. // the uploads ended but before the upload done handler that reduces
  734. // the pending operation count was executed.
  735. this._hideProgressBar();
  736. return;
  737. }
  738. this._setProgressBarText(t('files', 'Processing files …'), t('files', '…'));
  739. // Nothing is being uploaded at this point, and the pending operations
  740. // can not be cancelled, so the cancel button should be hidden.
  741. this._hideCancelButton();
  742. },
  743. _hideProgressBar: function() {
  744. this.progressBar.hideProgressBar();
  745. },
  746. _hideCancelButton: function() {
  747. this.progressBar.hideCancelButton();
  748. },
  749. _showProgressBar: function() {
  750. this.progressBar.showProgressBar();
  751. },
  752. _setProgressBarValue: function(value) {
  753. this.progressBar.setProgressBarValue(value);
  754. },
  755. _setProgressBarText: function(textDesktop, textMobile, title) {
  756. this.progressBar.setProgressBarText(textDesktop, textMobile, title);
  757. },
  758. /**
  759. * Returns whether the given file is known to be a received shared file
  760. *
  761. * @param {Object} file file
  762. * @return {bool} true if the file is a shared file
  763. */
  764. _isReceivedSharedFile: function(file) {
  765. if (!window.FileList) {
  766. return false;
  767. }
  768. var $tr = window.FileList.findFileEl(file.name);
  769. if (!$tr.length) {
  770. return false;
  771. }
  772. return ($tr.attr('data-mounttype') === 'shared-root' && $tr.attr('data-mime') !== 'httpd/unix-directory');
  773. },
  774. /**
  775. * Initialize the upload object
  776. *
  777. * @param {Object} $uploadEl upload element
  778. * @param {Object} options
  779. * @param {OCA.Files.FileList} [options.fileList] file list object
  780. * @param {OC.Files.Client} [options.filesClient] files client object
  781. * @param {Object} [options.dropZone] drop zone for drag and drop upload
  782. */
  783. init: function($uploadEl, options) {
  784. var self = this;
  785. options = options || {};
  786. this.fileList = options.fileList;
  787. this.progressBar = options.progressBar;
  788. this.filesClient = options.filesClient || OC.Files.getClient();
  789. this.davClient = new OC.Files.Client({
  790. host: this.filesClient.getHost(),
  791. root: OC.linkToRemoteBase('dav'),
  792. useHTTPS: OC.getProtocol() === 'https',
  793. userName: this.filesClient.getUserName(),
  794. password: this.filesClient.getPassword()
  795. });
  796. $uploadEl = $($uploadEl);
  797. this.$uploadEl = $uploadEl;
  798. if ($uploadEl.exists()) {
  799. this.progressBar.on('cancel', function() {
  800. self.cancelUploads();
  801. });
  802. this.fileUploadParam = {
  803. type: 'PUT',
  804. dropZone: options.dropZone, // restrict dropZone to content div
  805. autoUpload: false,
  806. sequentialUploads: false,
  807. limitConcurrentUploads: 10,
  808. /**
  809. * on first add of every selection
  810. * - check all files of originalFiles array with files in dir
  811. * - on conflict show dialog
  812. * - skip all -> remember as single skip action for all conflicting files
  813. * - replace all -> remember as single replace action for all conflicting files
  814. * - choose -> show choose dialog
  815. * - mark files to keep
  816. * - when only existing -> remember as single skip action
  817. * - when only new -> remember as single replace action
  818. * - when both -> remember as single autorename action
  819. * - start uploading selection
  820. * @param {object} e
  821. * @param {object} data
  822. * @returns {boolean}
  823. */
  824. add: function(e, data) {
  825. self.log('add', e, data);
  826. var that = $(this), freeSpace = 0;
  827. var upload = new OC.FileUpload(self, data);
  828. // can't link directly due to jQuery not liking cyclic deps on its ajax object
  829. data.uploadId = upload.getId();
  830. // create a container where we can store the data objects
  831. if ( ! data.originalFiles.selection ) {
  832. // initialize selection and remember number of files to upload
  833. data.originalFiles.selection = {
  834. uploads: [],
  835. filesToUpload: data.originalFiles.length,
  836. totalBytes: 0
  837. };
  838. }
  839. // TODO: move originalFiles to a separate container, maybe inside OC.Upload
  840. var selection = data.originalFiles.selection;
  841. // add uploads
  842. if ( selection.uploads.length < selection.filesToUpload ) {
  843. // remember upload
  844. selection.uploads.push(upload);
  845. }
  846. //examine file
  847. var file = upload.getFile();
  848. try {
  849. // FIXME: not so elegant... need to refactor that method to return a value
  850. Files.isFileNameValid(file.name);
  851. }
  852. catch (errorMessage) {
  853. data.textStatus = 'invalidcharacters';
  854. data.errorThrown = errorMessage;
  855. }
  856. if (data.targetDir) {
  857. upload.setTargetFolder(data.targetDir);
  858. delete data.targetDir;
  859. }
  860. // in case folder drag and drop is not supported file will point to a directory
  861. // http://stackoverflow.com/a/20448357
  862. if ( !file.type && file.size % 4096 === 0 && file.size <= 102400) {
  863. var dirUploadFailure = false;
  864. try {
  865. var reader = new FileReader();
  866. reader.readAsBinaryString(file);
  867. } catch (error) {
  868. console.log(reader, error)
  869. //file is a directory
  870. dirUploadFailure = true;
  871. }
  872. if (dirUploadFailure) {
  873. data.textStatus = 'dirorzero';
  874. data.errorThrown = t('files',
  875. 'Unable to upload {filename} as it is a directory or has 0 bytes',
  876. {filename: file.name}
  877. );
  878. }
  879. }
  880. // only count if we're not overwriting an existing shared file
  881. if (self._isReceivedSharedFile(file)) {
  882. file.isReceivedShare = true;
  883. } else {
  884. // add size
  885. selection.totalBytes += file.size;
  886. }
  887. // check free space
  888. if (!self.fileList || upload.getTargetFolder() === self.fileList.getCurrentDirectory()) {
  889. // Use global free space if there is no file list to check or the current directory is the target
  890. freeSpace = $('#free_space').val()
  891. } else if (upload.getTargetFolder().indexOf(self.fileList.getCurrentDirectory()) === 0) {
  892. // Check subdirectory free space if file is uploaded there
  893. var targetSubdir = upload._targetFolder.replace(self.fileList.getCurrentDirectory(), '')
  894. freeSpace = parseInt(upload.uploader.fileList.getModelForFile(targetSubdir).get('quotaAvailableBytes'))
  895. }
  896. if (freeSpace >= 0 && selection.totalBytes > freeSpace) {
  897. data.textStatus = 'notenoughspace';
  898. data.errorThrown = t('files',
  899. 'Not enough free space, you are uploading {size1} but only {size2} is left', {
  900. 'size1': OC.Util.humanFileSize(selection.totalBytes),
  901. 'size2': OC.Util.humanFileSize(freeSpace)
  902. });
  903. }
  904. // end upload for whole selection on error
  905. if (data.errorThrown) {
  906. // trigger fileupload fail handler
  907. var fu = that.data('blueimp-fileupload') || that.data('fileupload');
  908. fu._trigger('fail', e, data);
  909. return false; //don't upload anything
  910. }
  911. // check existing files when all is collected
  912. if ( selection.uploads.length >= selection.filesToUpload ) {
  913. //remove our selection hack:
  914. delete data.originalFiles.selection;
  915. var callbacks = {
  916. onNoConflicts: function (selection) {
  917. self.submitUploads(selection.uploads);
  918. },
  919. onSkipConflicts: function (selection) {
  920. //TODO mark conflicting files as toskip
  921. },
  922. onReplaceConflicts: function (selection) {
  923. //TODO mark conflicting files as toreplace
  924. },
  925. onChooseConflicts: function (selection) {
  926. //TODO mark conflicting files as chosen
  927. },
  928. onCancel: function (selection) {
  929. $.each(selection.uploads, function(i, upload) {
  930. upload.abort();
  931. });
  932. }
  933. };
  934. self.checkExistingFiles(selection, callbacks);
  935. }
  936. return true; // continue adding files
  937. },
  938. /**
  939. * called after the first add, does NOT have the data param
  940. * @param {object} e
  941. */
  942. start: function(e) {
  943. self.log('start', e, null);
  944. //hide the tooltip otherwise it covers the progress bar
  945. $('#upload').tooltip('hide');
  946. self._uploading = true;
  947. },
  948. fail: function(e, data) {
  949. var upload = self.getUpload(data);
  950. var status = null;
  951. if (upload) {
  952. status = upload.getResponseStatus();
  953. }
  954. self.log('fail', e, upload);
  955. self.removeUpload(upload);
  956. if (data.textStatus === 'abort' || data.errorThrown === 'abort') {
  957. self.showUploadCancelMessage();
  958. } else if (status === 412) {
  959. // file already exists
  960. self.showConflict(upload);
  961. } else if (status === 404) {
  962. // target folder does not exist any more
  963. OC.Notification.show(t('files', 'Target folder "{dir}" does not exist any more', {dir: upload.getFullPath()} ), {type: 'error'});
  964. self.cancelUploads();
  965. } else if (data.textStatus === 'notenoughspace') {
  966. // not enough space
  967. OC.Notification.show(t('files', 'Not enough free space'), {type: 'error'});
  968. self.cancelUploads();
  969. } else {
  970. // HTTP connection problem or other error
  971. var message = t('files', 'An unknown error has occurred');
  972. if (upload) {
  973. var response = upload.getResponse();
  974. if (response) {
  975. message = response.message;
  976. }
  977. }
  978. console.error(e, data, response)
  979. OC.Notification.show(message || data.errorThrown, {type: 'error'});
  980. }
  981. if (upload) {
  982. upload.fail();
  983. }
  984. },
  985. /**
  986. * called for every successful upload
  987. * @param {object} e
  988. * @param {object} data
  989. */
  990. done:function(e, data) {
  991. var upload = self.getUpload(data);
  992. var that = $(this);
  993. self.log('done', e, upload);
  994. self.removeUpload(upload);
  995. var status = upload.getResponseStatus();
  996. if (status < 200 || status >= 300) {
  997. // trigger fail handler
  998. var fu = that.data('blueimp-fileupload') || that.data('fileupload');
  999. fu._trigger('fail', e, data);
  1000. return;
  1001. }
  1002. },
  1003. /**
  1004. * called after last upload
  1005. * @param {object} e
  1006. * @param {object} data
  1007. */
  1008. stop: function(e, data) {
  1009. self.log('stop', e, data);
  1010. self._uploading = false;
  1011. }
  1012. };
  1013. if (options.maxChunkSize) {
  1014. this.fileUploadParam.maxChunkSize = options.maxChunkSize;
  1015. }
  1016. // initialize jquery fileupload (blueimp)
  1017. var fileupload = this.$uploadEl.fileupload(this.fileUploadParam);
  1018. if (this._supportAjaxUploadWithProgress()) {
  1019. //remaining time
  1020. var lastUpdate, lastSize, bufferSize, buffer, bufferIndex, bufferIndex2, bufferTotal;
  1021. var dragging = false;
  1022. // add progress handlers
  1023. fileupload.on('fileuploadadd', function(e, data) {
  1024. self.log('progress handle fileuploadadd', e, data);
  1025. self.trigger('add', e, data);
  1026. });
  1027. // add progress handlers
  1028. fileupload.on('fileuploadstart', function(e, data) {
  1029. self.log('progress handle fileuploadstart', e, data);
  1030. self._setProgressBarText(t('files', 'Uploading …'), t('files', '…'));
  1031. self._setProgressBarValue(0);
  1032. self._showProgressBar();
  1033. // initial remaining time variables
  1034. lastUpdate = new Date().getTime();
  1035. lastSize = 0;
  1036. bufferSize = 20;
  1037. buffer = [];
  1038. bufferIndex = 0;
  1039. bufferIndex2 = 0;
  1040. bufferTotal = 0;
  1041. for(var i = 0; i < bufferSize; i++){
  1042. buffer[i] = 0;
  1043. }
  1044. self.trigger('start', e, data);
  1045. });
  1046. fileupload.on('fileuploadprogress', function(e, data) {
  1047. self.log('progress handle fileuploadprogress', e, data);
  1048. //TODO progressbar in row
  1049. self.trigger('progress', e, data);
  1050. });
  1051. fileupload.on('fileuploadprogressall', function(e, data) {
  1052. self.log('progress handle fileuploadprogressall', e, data);
  1053. var total = self.totalToUpload;
  1054. var progress = (data.loaded / total) * 100;
  1055. var thisUpdate = new Date().getTime();
  1056. var diffUpdate = (thisUpdate - lastUpdate)/1000; // eg. 2s
  1057. lastUpdate = thisUpdate;
  1058. var diffSize = data.loaded - lastSize;
  1059. lastSize = data.loaded;
  1060. diffSize = diffSize / diffUpdate; // apply timing factor, eg. 1MiB/2s = 0.5MiB/s, unit is byte per second
  1061. var remainingSeconds = ((total - data.loaded) / diffSize);
  1062. if(remainingSeconds >= 0) {
  1063. bufferTotal = bufferTotal - (buffer[bufferIndex]) + remainingSeconds;
  1064. buffer[bufferIndex] = remainingSeconds; //buffer to make it smoother
  1065. bufferIndex = (bufferIndex + 1) % bufferSize;
  1066. bufferIndex2++;
  1067. }
  1068. var smoothRemainingSeconds;
  1069. if (bufferIndex2 > 0 && bufferIndex2 < 20) {
  1070. smoothRemainingSeconds = bufferTotal / bufferIndex2;
  1071. } else if (bufferSize > 0) {
  1072. smoothRemainingSeconds = bufferTotal / bufferSize;
  1073. } else {
  1074. smoothRemainingSeconds = 1;
  1075. }
  1076. var h = moment.duration(smoothRemainingSeconds, "seconds").humanize();
  1077. if (!(smoothRemainingSeconds >= 0 && smoothRemainingSeconds < 14400)) {
  1078. // show "Uploading ..." for durations longer than 4 hours
  1079. h = t('files', 'Uploading …');
  1080. }
  1081. self._setProgressBarText(h, h, t('files', '{loadedSize} of {totalSize} ({bitrate})' , {
  1082. loadedSize: OC.Util.humanFileSize(data.loaded),
  1083. totalSize: OC.Util.humanFileSize(total),
  1084. bitrate: OC.Util.humanFileSize(data.bitrate / 8) + '/s'
  1085. }));
  1086. self._setProgressBarValue(progress);
  1087. self.trigger('progressall', e, data);
  1088. });
  1089. fileupload.on('fileuploadstop', function(e, data) {
  1090. self.log('progress handle fileuploadstop', e, data);
  1091. self.clear();
  1092. self._updateProgressBarOnUploadStop();
  1093. self.trigger('stop', e, data);
  1094. });
  1095. fileupload.on('fileuploadfail', function(e, data) {
  1096. self.log('progress handle fileuploadfail', e, data);
  1097. self.trigger('fail', e, data);
  1098. });
  1099. fileupload.on('fileuploaddragover', function(e){
  1100. $('#app-content').addClass('file-drag');
  1101. $('#emptycontent .icon-folder').addClass('icon-filetype-folder-drag-accept');
  1102. var filerow = $(e.delegatedEvent.target).closest('tr');
  1103. if(!filerow.hasClass('dropping-to-dir')){
  1104. $('.dropping-to-dir .icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept');
  1105. $('.dropping-to-dir').removeClass('dropping-to-dir');
  1106. $('.dir-drop').removeClass('dir-drop');
  1107. }
  1108. if(filerow.attr('data-type') === 'dir'){
  1109. $('#app-content').addClass('dir-drop');
  1110. filerow.addClass('dropping-to-dir');
  1111. filerow.find('.thumbnail').addClass('icon-filetype-folder-drag-accept');
  1112. }
  1113. dragging = true;
  1114. });
  1115. var disableDropState = function() {
  1116. $('#app-content').removeClass('file-drag');
  1117. $('.dropping-to-dir').removeClass('dropping-to-dir');
  1118. $('.dir-drop').removeClass('dir-drop');
  1119. $('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept');
  1120. dragging = false;
  1121. };
  1122. fileupload.on('fileuploaddragleave fileuploaddrop', disableDropState);
  1123. // In some browsers the "drop" event can be triggered with no
  1124. // files even if the "dragover" event seemed to suggest that a
  1125. // file was being dragged (and thus caused "fileuploaddragover"
  1126. // to be triggered).
  1127. fileupload.on('fileuploaddropnofiles', function() {
  1128. if (!dragging) {
  1129. return;
  1130. }
  1131. disableDropState();
  1132. OC.Notification.show(t('files', 'Uploading that item is not supported'), {type: 'error'});
  1133. });
  1134. fileupload.on('fileuploadchunksend', function(e, data) {
  1135. // modify the request to adjust it to our own chunking
  1136. var upload = self.getUpload(data);
  1137. var range = data.contentRange.split(' ')[1];
  1138. var chunkId = range.split('/')[0].split('-')[0];
  1139. data.url = OC.getRootPath() +
  1140. '/remote.php/dav/uploads' +
  1141. '/' + OC.getCurrentUser().uid +
  1142. '/' + upload.getId() +
  1143. '/' + chunkId;
  1144. delete data.contentRange;
  1145. delete data.headers['Content-Range'];
  1146. });
  1147. fileupload.on('fileuploaddone', function(e, data) {
  1148. var upload = self.getUpload(data);
  1149. self._pendingUploadDoneCount++;
  1150. upload.done().then(function() {
  1151. self._pendingUploadDoneCount--;
  1152. if (Object.keys(self._uploads).length === 0 && self._pendingUploadDoneCount === 0) {
  1153. // All the uploads ended and there is no pending
  1154. // operation, so hide the progress bar.
  1155. // Note that this happens here only with chunked
  1156. // uploads; if the upload was non-chunked then this
  1157. // handler is immediately executed, before the
  1158. // jQuery upload done handler that removes the
  1159. // upload from the list, and thus at this point
  1160. // there is still at least one upload that has not
  1161. // ended (although the upload stop handler is always
  1162. // executed after all the uploads have ended, which
  1163. // hides the progress bar in that case).
  1164. self._hideProgressBar();
  1165. }
  1166. self.trigger('done', e, upload);
  1167. }).fail(function(status, response) {
  1168. var message = response.message;
  1169. if (status === 507) {
  1170. // not enough space
  1171. OC.Notification.show(message || t('files', 'Not enough free space'), {type: 'error'});
  1172. self.cancelUploads();
  1173. } else if (status === 409) {
  1174. OC.Notification.show(message || t('files', 'Target folder does not exist any more'), {type: 'error'});
  1175. } else if (status === 403) {
  1176. OC.Notification.show(message || t('files', 'Operation is blocked by access control'), {type: 'error'});
  1177. } else {
  1178. OC.Notification.show(message || t('files', 'Error when assembling chunks, status code {status}', {status: status}), {type: 'error'});
  1179. }
  1180. self.trigger('fail', e, data);
  1181. });
  1182. });
  1183. fileupload.on('fileuploaddrop', function(e, data) {
  1184. self.trigger('drop', e, data);
  1185. if (e.isPropagationStopped()) {
  1186. return false;
  1187. }
  1188. });
  1189. }
  1190. window.onbeforeunload = function() {
  1191. return self.confirmBeforeUnload();
  1192. }
  1193. }
  1194. //add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
  1195. if (navigator.userAgent.search(/konqueror/i) === -1) {
  1196. this.$uploadEl.attr('multiple', 'multiple');
  1197. }
  1198. return this.fileUploadParam;
  1199. }
  1200. }, OC.Backbone.Events);