Basic per file upload
This commit is contained in:
Tobias Reich
parent
1261a2ff35
commit
808bf4ee1e
@ -19,9 +19,9 @@
|
||||
.upload_message {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -85px;
|
||||
width: 450px;
|
||||
margin-left: -225px;
|
||||
margin-top: -160px;
|
||||
background-color: #444;
|
||||
background-image: -webkit-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
||||
background-image: -moz-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
||||
@ -42,7 +42,79 @@
|
||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
||||
}
|
||||
|
||||
/* Icon ------------------------------------------------*/
|
||||
/* Header ------------------------------------------------*/
|
||||
.upload_message h1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 12px 0px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px -1px 0px #222;
|
||||
text-align: center;
|
||||
}
|
||||
.upload_message .close {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 11px 14px 6px 7px;
|
||||
color: #aaa;
|
||||
font-size: 20px;
|
||||
text-shadow: 0px -1px 0px #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload_message .close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Rows ------------------------------------------------*/
|
||||
.upload_message .rows {
|
||||
float: left;
|
||||
margin: 3px 8px 8px 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: 300px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
/* Row ------------------------------------------------*/
|
||||
.upload_message .rows .row {
|
||||
display: inline-block;
|
||||
padding: 13px 0px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, .02);
|
||||
}
|
||||
|
||||
.upload_message .rows .row:nth-child(2n) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.upload_message .rows .row a.name {
|
||||
float: left;
|
||||
padding: 0px 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload_message .rows .row a.status {
|
||||
float: right;
|
||||
padding: 0px 10px;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload_message .rows .row a.status.error {
|
||||
color: rgb(213, 24, 24);
|
||||
}
|
||||
|
||||
.upload_message .rows .row a.status.success {
|
||||
color: rgb(42, 213, 0);
|
||||
}
|
||||
|
||||
/* Icon ------------------------------------------------
|
||||
.upload_message a {
|
||||
float: left;
|
||||
width: 100%;
|
||||
@ -64,9 +136,9 @@
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* Text ------------------------------------------------*/
|
||||
/* Text ------------------------------------------------
|
||||
.upload_message p {
|
||||
float: left;
|
||||
width: 100%;
|
||||
@ -74,10 +146,10 @@
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,.5);*/
|
||||
}
|
||||
|
||||
/* Progress ------------------------------------------------*/
|
||||
/* Progress ------------------------------------------------
|
||||
.upload_message .progressbar {
|
||||
float: left;
|
||||
width: 170px;
|
||||
@ -92,7 +164,6 @@
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.06), inset 0px 0px 2px #222;
|
||||
border-radius: 50px;
|
||||
|
||||
/* Animation */
|
||||
-webkit-animation-name: moveBackground;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
@ -120,4 +191,4 @@
|
||||
-webkit-transition: width .2s, opacity .5;
|
||||
-moz-transition: width .2s, opacity .5;
|
||||
transition: width .2s, opacity .5;
|
||||
}
|
||||
}*/
|
||||
@ -197,10 +197,24 @@ build = {
|
||||
|
||||
},
|
||||
|
||||
uploadModal: function(icon, text) {
|
||||
uploadModal: function(icon, text, html) {
|
||||
|
||||
var modal = "";
|
||||
|
||||
if (html!==null||html!==undefined) {
|
||||
|
||||
modal += "<div class='upload_overlay fadeIn'>";
|
||||
modal += "<div class='upload_message center'>";
|
||||
modal += "<h1>" + text + "</h1>";
|
||||
modal += "<a class='close icon-remove-sign'></a>";
|
||||
modal += html;
|
||||
modal += "</div>";
|
||||
modal += "</div>";
|
||||
|
||||
return modal;
|
||||
|
||||
} else {
|
||||
|
||||
modal += "<div class='upload_overlay fadeIn'>";
|
||||
modal += "<div class='upload_message center'>";
|
||||
modal += "<a class='icon-" + icon + "'></a>";
|
||||
@ -213,6 +227,8 @@ build = {
|
||||
|
||||
return modal;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
contextMenu: function(items) {
|
||||
|
||||
@ -300,6 +300,15 @@ var lychee = {
|
||||
|
||||
},
|
||||
|
||||
escapeHTML: function(s) {
|
||||
|
||||
return s.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
|
||||
},
|
||||
|
||||
loadDropbox: function(callback) {
|
||||
|
||||
if (!lychee.dropbox&&lychee.dropboxKey) {
|
||||
|
||||
@ -7,12 +7,12 @@
|
||||
|
||||
upload = {
|
||||
|
||||
show: function(icon, text) {
|
||||
show: function(icon, text, html) {
|
||||
|
||||
if (icon===undefined) icon = "upload";
|
||||
|
||||
upload.close(true);
|
||||
$("body").append(build.uploadModal(icon, text));
|
||||
$("body").append(build.uploadModal(icon, text, html));
|
||||
|
||||
},
|
||||
|
||||
@ -55,50 +55,55 @@ upload = {
|
||||
|
||||
local: function(files) {
|
||||
|
||||
var pre_progress = 0,
|
||||
formData = new FormData(),
|
||||
xhr = new XMLHttpRequest(),
|
||||
albumID = album.getID(),
|
||||
popup,
|
||||
progress;
|
||||
var albumID = album.getID(),
|
||||
html = "";
|
||||
|
||||
if (files.length<=0) return false;
|
||||
if (albumID===false) albumID = 0;
|
||||
var process = function(files, file) {
|
||||
|
||||
var formData = new FormData(),
|
||||
xhr = new XMLHttpRequest(),
|
||||
pre_progress = 0,
|
||||
progress;
|
||||
|
||||
formData.append("function", "upload");
|
||||
formData.append("albumID", albumID);
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
|
||||
if (files[i].type!=="image/jpeg"&&files[i].type!=="image/jpg"&&files[i].type!=="image/png"&&files[i].type!=="image/gif"&&files[i].type!=="image/webp") {
|
||||
loadingBar.show("error", "The file format of " + files[i].name + " is not supported.");
|
||||
return false;
|
||||
} else {
|
||||
formData.append(i, files[i]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
upload.show();
|
||||
|
||||
window.onbeforeunload = function() { return "Lychee is currently uploading!"; };
|
||||
formData.append(0, file);
|
||||
|
||||
xhr.open("POST", lychee.api_path);
|
||||
|
||||
xhr.onload = function() {
|
||||
|
||||
var wait;
|
||||
|
||||
if (xhr.status===200) {
|
||||
|
||||
upload.close();
|
||||
upload.notify("Upload complete");
|
||||
$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status")
|
||||
.html("Finished")
|
||||
.addClass("success");
|
||||
|
||||
window.onbeforeunload = null;
|
||||
file.ready = true;
|
||||
wait = false;
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
|
||||
if (files[i].ready===false) {
|
||||
wait = true;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (wait===false) {
|
||||
|
||||
$("#upload_files").val("");
|
||||
|
||||
if (album.getID()===false) lychee.goto("0");
|
||||
else album.load(albumID);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
xhr.upload.onprogress = function(e) {
|
||||
@ -108,23 +113,64 @@ upload = {
|
||||
progress = (e.loaded / e.total * 100 | 0);
|
||||
|
||||
if (progress>pre_progress) {
|
||||
upload.setProgress(progress);
|
||||
$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status").html(progress + "%");
|
||||
pre_progress = progress;
|
||||
}
|
||||
|
||||
if (progress>=100) {
|
||||
upload.setIcon("cog");
|
||||
upload.setText("Processing photos");
|
||||
|
||||
$(".upload_message .rows .row:nth-child(" + (file.num+1) + ") .status").html("Processing");
|
||||
|
||||
if (file.next!==null) process(files, file.next);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$("#upload_files").val("");
|
||||
|
||||
xhr.send(formData);
|
||||
|
||||
}
|
||||
|
||||
if (files.length<=0) return false;
|
||||
if (albumID===false) albumID = 0;
|
||||
|
||||
html = "<div class='rows'>";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
|
||||
files[i].num = i;
|
||||
files[i].ready = false;
|
||||
|
||||
if (i < files.length-1) files[i].next = files[i+1];
|
||||
else files[i].next = null;
|
||||
|
||||
if (files[i].type!=="image/jpeg"&&files[i].type!=="image/jpg"&&files[i].type!=="image/png"&&files[i].type!=="image/gif") {
|
||||
|
||||
files[i].ready = true;
|
||||
|
||||
// Generate html with error
|
||||
html += "<div class='row'><a class='name'>" + lychee.escapeHTML(files[i].name) + "</a><a class='status error'>Not supported</a></div>";
|
||||
|
||||
} else {
|
||||
|
||||
// Generate html
|
||||
html += "<div class='row'><a class='name'>" + lychee.escapeHTML(files[i].name) + "</a><a class='status'></a></div>";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
||||
window.onbeforeunload = function() { return "Lychee is currently uploading!"; };
|
||||
window.onbeforeunload = null;
|
||||
|
||||
upload.show(null, "Uploading", html);
|
||||
|
||||
process(files, files[0]);
|
||||
|
||||
},
|
||||
|
||||
url: function() {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user