Merge pull request #32 from Onestay/onestay-dev

Added upload to album through website

pages/home.html

@@ -45,16 +45,26 @@
             <div class="hero-body">
                 <div class="container">
                     <p id="b">
-                        <img class='logo' src="/images/logo_smol.png">
+                        <img class="logo" src="/images/logo_smol.png">
                     </p>
                     <h1 class="title">loli-safe</h1>
                     <h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
 
-                    <h3 class="subtitle" id="maxFileSize"></h2>
+                    <h3 class="subtitle" id="maxFileSize"></h3>
                     <div class="columns">
                         <div class="column is-hidden-mobile"></div>
-                        <div class="column" id='uploadContainer'>
+                        <div class="column" id="uploadContainer">
                             <a id="loginToUpload" href="/auth" class="button is-danger">Running in private mode. Log in to upload.</a>
+                            <div class="field" id="albumDiv" style="display: none">
+                                <label class="label">Album</label>
+                                <p class="control select-wrapper">
+                                    <span class="select">
+                                        <select>
+                                            <option value="">None</option>
+                                        </select>
+                                    </span>
+                                </p>
+                            </div>
                         </div>
                         <div class="column is-hidden-mobile"></div>
                     </div>

public/css/style.css

@@ -105,3 +105,8 @@ section#dashboard .table { font-size: 12px }
 section#dashboard div#table div.column { display:flex; width: 200px; height: 200px; margin: 9px; background: #f9f9f9; overflow: hidden; align-items: center; }
 section#dashboard div#table div.column a { width: 100%; }
 section#dashboard div#table div.column a img { width:200px; }
+
+.select-wrapper {
+	text-align: center;
+	margin-bottom: 10px;
+}

public/js/home.js

@@ -3,9 +3,10 @@ var upload = {};
 upload.isPrivate = true;
 upload.token = localStorage.token;
 upload.maxFileSize;
+// add the album var to the upload so we can store the album id in there
+upload.album;
 
 upload.checkIfPublic = function(){
-
 	axios.get('/api/check')
   	.then(function (response) {
     	upload.isPrivate= response.data.private;
@@ -16,7 +17,6 @@ upload.checkIfPublic = function(){
   		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
     	console.log(error);
   	});
-
 }
 
 upload.preparePage = function(){
@@ -61,6 +61,33 @@ upload.verifyToken = function(token, reloadOnError){
 }
 
 upload.prepareUpload = function(){
+	// I think this fits best here because we need to check for a valid token before we can get the albums
+	if (upload.token) {
+		var select = document.querySelector('select');
+		
+		axios.get('/api/albums', { headers: { token: upload.token }})
+		.then(function(res) {
+			var albums = res.data.albums;
+			
+			// if the user doesn't have any albums we don't really need to display
+			// an album selection
+			if (albums.length === 0) return;
+			
+			// loop through the albums and create an option for each album 
+			for (var i = 0; i < albums.length; i++) {
+				var opt = document.createElement('option');
+				opt.value = albums[i].id;
+				opt.innerHTML = albums[i].name;
+				select.appendChild(opt);
+			}
+			// display the album selection
+			document.getElementById('albumDiv').style.display = 'block';
+		})
+		.catch(function(e) {
+			return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+			console.log(e);
+		})
+	}
 
 	div = document.createElement('div');
 	div.id = 'dropzone';
@@ -80,7 +107,6 @@ upload.prepareUpload = function(){
 }
 
 upload.prepareDropzone = function(){
-
 	var previewNode = document.querySelector('#template');
 	previewNode.id = '';
 	var previewTemplate = previewNode.parentNode.innerHTML;
@@ -105,6 +131,12 @@ upload.prepareDropzone = function(){
 				myDropzone = this;
 				document.getElementById('uploads').style.display = 'block';
 			});
+			// add the selected albumid, if an album is selected, as a header 
+			this.on('sending', function(file, xhr) {
+				if (upload.album) {
+					xhr.setRequestHeader('albumid', upload.album)
+				}
+			});
 		}
 	});
 
@@ -155,4 +187,10 @@ window.addEventListener('paste', function(event) {
 
 window.onload = function () {
 	upload.checkIfPublic();
+	
+	// eventlistener for the album select
+	document.querySelector('select').addEventListener('change', function() {
+		upload.album = document.querySelector('select').value;
+	});
 };
+