Use chunking in web upload

apps/files/appinfo/app.php

@@ -1,4 +1,6 @@
 <?php
+
+use Symfony\Component\EventDispatcher\GenericEvent;
 /**
  * @author Jakob Sack <mail@jakobsack.de>
  * @author Joas Schilling <coding@schilljs.com>
@@ -58,3 +60,17 @@
 		\OC::$server->getConfig()
 	);
 });
+
+$eventDispatcher = \OC::$server->getEventDispatcher();
+$eventDispatcher->addListener(
+	'OCP\Config::js',
+	function($event) {
+		if ($event instanceof GenericEvent) {
+			$maxChunkSize = (int)(\OC::$server->getConfig()->getAppValue('files', 'max_chunk_size', (10 * 1024 * 1024)));
+			$event->setArgument('files', [
+				'max_chunk_size' => $maxChunkSize
+			]);
+		}
+	}
+);
+

apps/files/js/app.js

@@ -93,7 +93,8 @@
 						direction: $('#defaultFileSortingDirection').val()
 					},
 					config: this._filesConfig,
-					enableUpload: true
+					enableUpload: true,
+					maxChunkSize: OC.appConfig.files.max_chunk_size
 				}
 			);
 			this.files.initialize();

apps/files/js/file-upload.js

@@ -244,8 +244,8 @@ OC.FileUpload.prototype = {
 			this.data.headers['X-OC-Mtime'] = file.lastModified / 1000;
 		}
 
-		var userName = this.uploader.filesClient.getUserName();
-		var password = this.uploader.filesClient.getPassword();
+		var userName = this.uploader.davClient.getUserName();
+		var password = this.uploader.davClient.getPassword();
 		if (userName) {
 			// copy username/password from DAV client
 			this.data.headers['Authorization'] =
@@ -258,7 +258,7 @@ OC.FileUpload.prototype = {
 			&& this.getFile().size > this.uploader.fileUploadParam.maxChunkSize
 		) {
 			data.isChunked = true;
-			chunkFolderPromise = this.uploader.filesClient.createDirectory(
+			chunkFolderPromise = this.uploader.davClient.createDirectory(
 				'uploads/' + encodeURIComponent(OC.getCurrentUser().uid) + '/' + encodeURIComponent(this.getId())
 			);
 			// TODO: if fails, it means same id already existed, need to retry
@@ -284,9 +284,18 @@ OC.FileUpload.prototype = {
 		}
 
 		var uid = OC.getCurrentUser().uid;
-		return this.uploader.filesClient.move(
+		return this.uploader.davClient.move(
 			'uploads/' + encodeURIComponent(uid) + '/' + encodeURIComponent(this.getId()) + '/.file',
-			'files/' + encodeURIComponent(uid) + '/' + OC.joinPaths(this.getFullPath(), this.getFileName())
+			'files/' + encodeURIComponent(uid) + '/' + OC.joinPaths(this.getFullPath(), this.getFileName()),
+			true,
+			{'X-OC-Mtime': this.getFile().lastModified / 1000}
+		);
+	},
+
+	_deleteChunkFolder: function() {
+		// delete transfer directory for this upload
+		this.uploader.davClient.remove(
+			'uploads/' + encodeURIComponent(OC.getCurrentUser().uid) + '/' + encodeURIComponent(this.getId())
 		);
 	},
 
@@ -295,12 +304,20 @@ OC.FileUpload.prototype = {
 	 */
 	abort: function() {
 		if (this.data.isChunked) {
-			// delete transfer directory for this upload
-			this.uploader.filesClient.remove(
-				'uploads/' + encodeURIComponent(OC.getCurrentUser().uid) + '/' + encodeURIComponent(this.getId())
-			);
+			this._deleteChunkFolder();
 		}
 		this.data.abort();
+		this.deleteUpload();
+	},
+
+	/**
+	 * Fail the upload
+	 */
+	fail: function() {
+		this.deleteUpload();
+		if (this.data.isChunked) {
+			this._deleteChunkFolder();
+		}
 	},
 
 	/**
@@ -399,6 +416,13 @@ OC.Uploader.prototype = _.extend({
 	 */
 	filesClient: null,
 
+	/**
+	 * Webdav client pointing at the root "dav" endpoint
+	 *
+	 * @type OC.Files.Client
+	 */
+	davClient: null,
+
 	/**
 	 * Function that will allow us to know if Ajax uploads are supported
 	 * @link https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html
@@ -758,6 +782,13 @@ OC.Uploader.prototype = _.extend({
 
 		this.fileList = options.fileList;
 		this.filesClient = options.filesClient || OC.Files.getClient();
+		this.davClient = new OC.Files.Client({
+			host: this.filesClient.getHost(),
+			root: OC.linkToRemoteBase('dav'),
+			useHTTPS: OC.getProtocol() === 'https',
+			userName: this.filesClient.getUserName(),
+			password: this.filesClient.getPassword()
+		});
 
 		if (options.url) {
 			this.url = options.url;
@@ -970,7 +1001,7 @@ OC.Uploader.prototype = _.extend({
 					}
 
 					if (upload) {
-						upload.deleteUpload();
+						upload.fail();
 					}
 				},
 				/**
@@ -1001,6 +1032,10 @@ OC.Uploader.prototype = _.extend({
 				}
 			};
 
+			if (options.maxChunkSize) {
+				this.fileUploadParam.maxChunkSize = options.maxChunkSize;
+			}
+
 			// initialize jquery fileupload (blueimp)
 			var fileupload = this.$uploadEl.fileupload(this.fileUploadParam);
 
@@ -1091,7 +1126,7 @@ OC.Uploader.prototype = _.extend({
 					// modify the request to adjust it to our own chunking
 					var upload = self.getUpload(data);
 					var range = data.contentRange.split(' ')[1];
-					var chunkId = range.split('/')[0];
+					var chunkId = range.split('/')[0].split('-')[0];
 					data.url = OC.getRootPath() +
 						'/remote.php/dav/uploads' +
 						'/' + encodeURIComponent(OC.getCurrentUser().uid) +

apps/files/js/filelist.js

@@ -345,7 +345,8 @@
 					this._uploader = new OC.Uploader($uploadEl, {
 						fileList: this,
 						filesClient: this.filesClient,
-						dropZone: $('#content')
+						dropZone: $('#content'),
+						maxChunkSize: options.maxChunkSize
 					});
 
 					this.setupUploadEvents(this._uploader);

core/js/config.php

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * @author Bart Visscher <bartv@thisnet.nl>
  * @author Björn Schießle <bjoern@schiessle.org>
@@ -37,6 +38,8 @@
  *
  */
 
+use Symfony\Component\EventDispatcher\GenericEvent;
+
 // Set the content type to Javascript
 header("Content-type: text/javascript");
 
@@ -198,12 +201,17 @@
 	$array['oc_defaults']['docBaseUrl'] = $defaults->getDocBaseUrl();
 	$array['oc_defaults']['docPlaceholderUrl'] = $defaults->buildDocLinkToKey('PLACEHOLDER');
 }
-$array['oc_appconfig'] = json_encode($array['oc_appconfig']);
-$array['oc_config'] = json_encode($array['oc_config']);
-$array['oc_defaults'] = json_encode($array['oc_defaults']);
 
 // Allow hooks to modify the output values
 OC_Hook::emit('\OCP\Config', 'js', ['array' => &$array]);
+$event = \OC::$server->getEventDispatcher()->dispatch('OCP\Config::js', new GenericEvent());
+foreach ($event->getArguments() as $key => $value) {
+	$array['oc_appconfig'][$key] = $value;
+}
+
+$array['oc_appconfig'] = json_encode($array['oc_appconfig']);
+$array['oc_config'] = json_encode($array['oc_config']);
+$array['oc_defaults'] = json_encode($array['oc_defaults']);
 
 // Echo it
 foreach ($array as  $setting => $value) {

core/js/files/client.js

@@ -36,6 +36,7 @@
 		}
 
 		url += options.host + this._root;
+		this._host = options.host;
 		this._defaultHeaders = options.defaultHeaders || {
 				'X-Requested-With': 'XMLHttpRequest',
 				'requesttoken': OC.requestToken
@@ -676,10 +677,11 @@
 		 * @param {String} destinationPath destination path
 		 * @param {boolean} [allowOverwrite=false] true to allow overwriting,
 		 * false otherwise
+		 * @param {Object} [headers=null] additional headers
 		 *
 		 * @return {Promise} promise
 		 */
-		move: function(path, destinationPath, allowOverwrite) {
+		move: function(path, destinationPath, allowOverwrite, headers) {
 			if (!path) {
 				throw 'Missing argument "path"';
 			}
@@ -690,9 +692,9 @@
 			var self = this;
 			var deferred = $.Deferred();
 			var promise = deferred.promise();
-			var headers = {
+			headers = _.extend({}, headers, {
 				'Destination' : this._buildUrl(destinationPath)
-			};
+			});
 
 			if (!allowOverwrite) {
 				headers['Overwrite'] = 'F';
@@ -761,6 +763,16 @@
 		 */
 		getBaseUrl: function() {
 			return this._client.baseUrl;
+		},
+
+		/**
+		 * Returns the host
+		 *
+		 * @since 9.2
+		 * @return {String} base URL
+		 */
+		getHost: function() {
+			return this._host;
 		}
 	};
 
@@ -798,7 +810,6 @@
 
 		var client = new OC.Files.Client({
 			host: OC.getHost(),
-			port: OC.getPort(),
 			root: OC.linkToRemoteBase('webdav'),
 			useHTTPS: OC.getProtocol() === 'https'
 		});