Merge pull request owncloud#574 from owncloud/official-upload-support

Add uploading support for registered users
imjalpreet · Mar 11, 2016 · 65d5514 · 65d5514
2 parents 7055f6d + dfcb16d
commit 65d5514
Show file tree

Hide file tree

Showing 20 changed files with 771 additions and 138 deletions.
diff --git a/controller/pagecontroller.php b/controller/pagecontroller.php
@@ -82,7 +82,10 @@ public function index() {
 		$appName = $this->appName;
 
 		// Parameters sent to the template
-		$params = ['appName' => $appName];
+		$params = [
+			'appName' => $appName,
+			'uploadUrl' => $this->urlGenerator->linkTo('files', 'ajax/upload.php')
+		];
 
 		// Will render the page using the template found in templates/index.php
 		$response = new TemplateResponse($appName, 'index', $params);

diff --git a/css/mobile.css b/css/mobile.css
@@ -5,4 +5,9 @@
 		margin-right: 0 !important;
 	}
 
+	/* shorten elements for mobile */
+	#uploadprogressbar {
+		width: 50px;
+	}
+
 }
diff --git a/css/upload.css b/css/upload.css
@@ -0,0 +1,95 @@
+/* Uploading */
+.oc-dialog .fileexists .icon {
+	background-position: center center;
+	background-size: cover !important;
+}
+
+#uploadprogressbar {
+	margin-top: 5px;
+}
+
+.stop.icon-close {
+	margin-top: 5px;
+}
+
+.actions {
+	float: left;
+}
+
+.actions input, .actions button, .actions .button {
+	margin: 0;
+	float: left;
+}
+
+.actions .button a {
+	color: #555;
+}
+
+.actions .button a:hover,
+.actions .button a:focus,
+.actions .button a:active {
+	color: #333;
+}
+
+.actions.creatable {
+	position: relative;
+	z-index: -30;
+}
+
+.newFileMenu {
+	width: 140px;
+	margin-left: -56px;
+	margin-top: 25px;
+	z-index: 1001;
+}
+
+.newFileMenu .error {
+	color: #e9322d;
+	border-color: #e9322d;
+	-webkit-box-shadow: 0 0 6px #f8b9b7;
+	-moz-box-shadow: 0 0 6px #f8b9b7;
+	box-shadow: 0 0 6px #f8b9b7;
+}
+
+.newFileMenu .menuitem {
+	white-space: nowrap;
+	overflow: hidden;
+}
+.newFileMenu.popovermenu .menuitem .icon {
+	margin-bottom: -2px;
+}
+.newFileMenu.popovermenu a.menuitem,
+.newFileMenu.popovermenu label.menuitem,
+.newFileMenu.popovermenu .menuitem {
+	padding: 0;
+	margin: 0;
+}
+
+.newFileMenu.popovermenu a.menuitem.active {
+	opacity: 1;
+}
+
+.newFileMenu.bubble:after {
+	left: 75px;
+	right: auto;
+}
+.newFileMenu.bubble:before {
+	left: 75px;
+	right: auto;
+}
+
+.newFileMenu .filenameform {
+	display: inline-block;
+}
+
+.newFileMenu .filenameform input {
+	width: 100px;
+}
+
+#fileList .popovermenu .action {
+	display: block;
+	line-height: 30px;
+	padding-left: 5px;
+	color: #000;
+	padding: 0;
+}
diff --git a/js/app.js b/js/app.js
@@ -2,7 +2,6 @@
 $(document).ready(function () {
 	"use strict";
 	$('#controls').insertBefore($('#content-wrapper'));
-	Gallery.hideSearch();
 	Gallery.utility = new Gallery.Utility();
 	Gallery.view = new Gallery.View();
 	Gallery.token = Gallery.utility.getPublicToken();
@@ -11,26 +10,26 @@ $(document).ready(function () {
 	// The first thing to do is to detect if we're on IE
 	if (Gallery.ieVersion === 'unsupportedIe') {
 		Gallery.utility.showIeWarning(Gallery.ieVersion);
-		Gallery.showEmpty();
+		Gallery.view.showEmptyFolder('', null);
 	} else {
 		if (Gallery.ieVersion === 'oldIe') {
 			Gallery.utility.showIeWarning(Gallery.ieVersion);
 		}
 
 		// Get the config, the files and initialise the slideshow
-		Gallery.showLoading();
+		Gallery.view.showLoading();
 		$.getJSON(Gallery.utility.buildGalleryUrl('config', '', {}))
 			.then(function (config) {
 				Gallery.config = new Gallery.Config(config);
 				var currentLocation = window.location.href.split('#')[1] || '';
 				Gallery.getFiles(currentLocation).then(function () {
 					Gallery.activeSlideShow = new SlideShow();
 					$.when(
-							Gallery.activeSlideShow.init(
-								false,
-								null,
-								Gallery.config.galleryFeatures
-							))
+						Gallery.activeSlideShow.init(
+							false,
+							null,
+							Gallery.config.galleryFeatures
+						))
 						.then(function () {
 							window.onhashchange();
 						});
@@ -59,7 +58,7 @@ $(document).ready(function () {
 					Gallery.view.viewAlbum(Gallery.currentAlbum);
 					infoContentContainer.css('max-width', $(window).width());
 				}
-				if(Gallery.currentAlbum) {
+				if (Gallery.currentAlbum) {
 					Gallery.view.breadcrumb.setMaxWidth($(window).width() - Gallery.buttonsWidth);
 				}
 

diff --git a/js/gallery.js b/js/gallery.js
@@ -3,6 +3,7 @@
 	"use strict";
 	var Gallery = {
 		currentAlbum: null,
+		currentEtag: null,
 		config: {},
 		/** Map of the whole gallery, built as we navigate through folders */
 		albumMap: {},
@@ -22,7 +23,7 @@
 		 */
 		refresh: function (path, albumPath) {
 			if (Gallery.currentAlbum !== albumPath) {
-				Gallery.view.init(albumPath);
+				Gallery.view.init(albumPath, null);
 			}
 
 			// If the path is mapped, that means that it's an albumPath
@@ -89,11 +90,9 @@
 					Gallery.config.updateAlbumSorting(Gallery.albumMap[albumInfo.path].sorting);
 				}
 
-			}, function () {
-				// Triggered if we couldn't find a working folder
-				Gallery.view.element.empty();
-				Gallery.showEmpty();
-				Gallery.currentAlbum = null;
+			}, function (xhr) {
+				var result = xhr.responseJSON;
+				Gallery.view.init(decodeURIComponent(currentLocation), result.message);
 			});
 		},
 
@@ -130,8 +129,9 @@
 			// Sort the images
 			Gallery.albumMap[Gallery.currentAlbum].images.sort(Gallery.utility.sortBy(sortType,
 				sortOrder));
-			Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(Gallery.utility.sortBy(albumSortType,
-				albumSortOrder));
+			Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(
+				Gallery.utility.sortBy(albumSortType,
+					albumSortOrder));
 
 			// Save the new settings
 			var sortConfig = {
@@ -182,8 +182,7 @@
 
 				var albumPermissions = Gallery.config.albumPermissions;
 				$('a.share').data('path', albumPermissions.path).data('link', true)
-					.data('possible-permissions', albumPermissions.permissions).
-					click();
+					.data('possible-permissions', albumPermissions.permissions).click();
 				if (!$('#linkCheckbox').is(':checked')) {
 					$('#linkText').hide();
 				}
@@ -240,58 +239,6 @@
 			Gallery._saveToOwnCloud(remote, Gallery.token, owner, name, isProtected);
 		},
 
-		/**
-		 * Hide the search button while we wait for core to fix the templates
-		 */
-		hideSearch: function () {
-			$('form.searchbox').hide();
-		},
-
-		/**
-		 * Shows an empty gallery message
-		 */
-		showEmpty: function () {
-			var emptyContentElement = $('#emptycontent');
-			var message = '<div class="icon-gallery"></div>';
-			message += '<h2>' + t('gallery',
-				'No pictures found') + '</h2>';
-			message += '<p>' + t('gallery',
-				'Upload pictures in the files app to display them here') + '</p>';
-			emptyContentElement.html(message);
-			emptyContentElement.removeClass('hidden');
-			$('#controls').addClass('hidden');
-		},
-
-		/**
-		 * Shows an empty gallery message
-		 */
-		showEmptyFolder: function () {
-			var emptyContentElement = $('#emptycontent');
-			var message = '<div class="icon-gallery"></div>';
-			message += '<h2>' + t('gallery',
-				'Nothing in here') + '</h2>';
-			message += '<p>' + t('gallery',
-				'No media files found in this folder') + '</p>';
-			emptyContentElement.html(message);
-			emptyContentElement.removeClass('hidden');
-		},
-
-		/**
-		 * Shows the infamous loading spinner
-		 */
-		showLoading: function () {
-			$('#emptycontent').addClass('hidden');
-			$('#controls').removeClass('hidden');
-		},
-
-		/**
-		 * Shows thumbnails
-		 */
-		showNormal: function () {
-			$('#emptycontent').addClass('hidden');
-			$('#controls').removeClass('hidden');
-		},
-
 		/**
 		 * Creates a new slideshow using the images found in the current folder
 		 *
@@ -327,7 +274,8 @@
 					c: image.etag,
 					requesttoken: oc_requesttoken
 				};
-				var downloadUrl = Gallery.utility.buildGalleryUrl('files', '/download/' + image.fileId,
+				var downloadUrl = Gallery.utility.buildGalleryUrl('files',
+					'/download/' + image.fileId,
 					params);
 
 				return {
@@ -379,6 +327,8 @@
 			var mimeType = null;
 			var mTime = null;
 			var etag = null;
+			var size = null;
+			var sharedWithUser = null;
 			var albumInfo = data.albuminfo;
 			var currentLocation = albumInfo.path;
 			// This adds a new node to the map for each parent album
@@ -394,8 +344,13 @@
 					mimeType = files[i].mimetype;
 					mTime = files[i].mtime;
 					etag = files[i].etag;
+					size = files[i].size;
+					sharedWithUser = files[i].sharedWithUser;
 
-					image = new GalleryImage(path, path, fileId, mimeType, mTime, etag);
+					image =
+						new GalleryImage(
+							path, path, fileId, mimeType, mTime, etag, size, sharedWithUser
+						);
 
 					// Determines the folder name for the image
 					var dir = OC.dirname(path);
@@ -505,15 +460,15 @@
 				// directive
 				$.get(OC.generateUrl('apps/files_sharing/testremote'),
 					{remote: remote}).then(function (protocol) {
-						if (protocol !== 'http' && protocol !== 'https') {
-							OC.dialogs.alert(t('files_sharing',
-									'No ownCloud installation (7 or higher) found at {remote}',
-									{remote: remote}),
-								t('files_sharing', 'Invalid ownCloud url'));
-						} else {
-							OC.redirect(protocol + '://' + url);
-						}
-					});
+					if (protocol !== 'http' && protocol !== 'https') {
+						OC.dialogs.alert(t('files_sharing',
+							'No ownCloud installation (7 or higher) found at {remote}',
+							{remote: remote}),
+							t('files_sharing', 'Invalid ownCloud url'));
+					} else {
+						OC.redirect(protocol + '://' + url);
+					}
+				});
 			}
 		}
 	};

diff --git a/js/galleryimage.js b/js/galleryimage.js
@@ -14,21 +14,25 @@
 	/**
 	 * Creates a new image object to store information about a media file
 	 *
-	 * @param src
-	 * @param path
-	 * @param fileId
-	 * @param mimeType
-	 * @param mTime modification time
-	 * @param etag
+	 * @param {string} src
+	 * @param {string} path
+	 * @param {number} fileId
+	 * @param {string} mimeType
+	 * @param {number} mTime modification time
+	 * @param {string} etag
+	 * @param {number} size
+	 * @param {boolean} sharedWithUser
 	 * @constructor
 	 */
-	var GalleryImage = function (src, path, fileId, mimeType, mTime, etag) {
+	var GalleryImage = function (src, path, fileId, mimeType, mTime, etag, size, sharedWithUser) {
 		this.src = src;
 		this.path = path;
 		this.fileId = fileId;
 		this.mimeType = mimeType;
 		this.mTime = mTime;
 		this.etag = etag;
+		this.size = size;
+		this.sharedWithUser = sharedWithUser;
 		this.thumbnail = null;
 		this.domDef = null;
 		this.spinner = null;