TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #431 from cobbspur/events

Browse Source 
Added error handling
This commit is contained in:
Hannah Wolfe 2013-08-18 14:53:52 -07:00
commit 08174b8e35
3 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
ghost/admin/assets/lib/uploader.js
View File

@ -3,11 +3,6 @@
"use strict";
var UploadUi,
$loader = '<span class="media"><span class="hidden">Image Upload</span></span>' +
'<div class="description">Add image</div>' +
'<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>' +
'<a class="image-webcam" title="Add image from webcam">' +
'<span class="hidden">Webcam</span></a>',
$progress = $('<div />', {
"class" : "js-upload-progress progress progress-success active",
"style": "opacity:0",
@ -33,11 +28,13 @@
$dropzone.find('.js-fileupload').fileupload().fileupload("option", {
url: '/ghost/upload',
add: function (e, data) {
$progress.find('.js-upload-progress-bar').removeClass('fail');
$dropzone.trigger('uploadstart');
$dropzone.find('a.js-return-image').remove();
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam, div.js-fail, button.js-fail')
.animate({opacity: 0}, 250, function () {
if (settings.progressbar) {
$dropzone.find('span.media').after($progress);
$dropzone.find('div.js-fail').after($progress);
$progress.animate({opacity: 100}, 250);
}
data.submit();
@ -48,16 +45,11 @@
var progress = parseInt(data.loaded / data.total * 100, 10);
if (!settings.editor) {$progress.find('div.js-progress').css({"position": "absolute", "top": "40px"}); }
if (settings.progressbar) {
$dropzone.trigger("uploadprogress", [progress, data]);
$progress.find('.js-upload-progress-bar').css('width', progress + '%');
if (data.loaded / data.total === 1) {
$progress.animate({opacity: 0}, 250, function () {
$dropzone.find('span.media').after('<img class="fileupload-loading" src="/public/img/loadingcat.gif" />');
if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); }
});
}
}
},
done: function (e, data) {
function showImage(width, height) {
$dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
@ -83,19 +75,65 @@
});
}
function preloadImage() {
function failedImageUpload() {
$progress.find('.js-upload-progress-bar').addClass('fail');
$dropzone.find('div.js-fail').animate({"opacity": 100}, 1500);
$dropzone.find('button.js-fail').animate({"opacity": 100}, 1500).on('click', function () {
$dropzone.css({minHeight: 0});
if (source !== undefined && !$dropzone.find('a.js-return-image')[0]) {
console.log("source:", source);
$back.css({"opacity": 100});
$dropzone.find('.js-upload-target').after($back);
}
self.removeExtras();
self.init();
});
}
function preLoadImage() {
var $img = $dropzone.find('img.js-upload-target')
.attr({'src': '', "width": 'auto', "height": 'auto'});
if (data.result === "Invalid filetype") {
$dropzone.trigger("uploadfailed", [data.result]);
failedImageUpload();
} else {
$progress.animate({opacity: 0}, 250, function () {
$dropzone.find('span.media').after('<img class="fileupload-loading" src="/public/img/loadingcat.gif" />');
if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); }
});
$dropzone.trigger("uploadsuccess", [data.result]);
$img.one('load', function () { animateDropzone($img); })
.attr('src', data.result);
}
preloadImage();
}
preLoadImage();
}
});
},
buildExtras: function () {
if (!$dropzone.find('span.media')[0]) {
$dropzone.prepend('<span class="media"><span class="hidden">Image Upload</span></span>');
}
if (!$dropzone.find('div.description')[0]) {
$dropzone.append('<div class="description">Add image</div>');
}
if (!$dropzone.find('div.js-fail')[0]) {
$dropzone.append('<div class="js-fail failed" style="opacity: 0">Something went wrong :(</div>');
}
if (!$dropzone.find('button.js-fail')[0]) {
$dropzone.append('<button class="js-fail button-add" style="opacity: 0">Try Again</button>');
}
if (!$dropzone.find('a.image-url')[0]) {
$dropzone.append('<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>');
}
if (!$dropzone.find('a.image-webcam')[0]) {
$dropzone.append('<a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</span></a>');
}
},
removeExtras: function () {
$dropzone.find('div.description, span.media, div.js-upload-progress, a.image-url, a.image-webcam')
$dropzone.find('div.description, span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail')
.remove();
},
@ -104,12 +142,10 @@
//This is the start point if no image exists
$dropzone.find('img.js-upload-target').css({"display": "none"});
$dropzone.removeClass('pre-image-uploader').addClass('image-uploader');
if (!$dropzone.find('span.media')[0]) {
$dropzone.append($loader);
}
if ($dropzone.find('a.js-edit-image')[0]) {
this.buildExtras();
$dropzone.find('a.js-edit-image').remove();
}
$back.on('click', function () {
$dropzone.find('a.js-return-image').remove();
@ -142,19 +178,17 @@
},
init: function () {
var img;
// First check if field image is defined by checking for js-upload-target class
if ($dropzone.find('img.js-upload-target')[0]) {
if (!$dropzone.find('img.js-upload-target')[0]) {
// This ensures there is an image we can hook into to display uploaded image
$dropzone.prepend('<img class="js-upload-target" style="display: none" src="" />');
}
if ($dropzone.find('img.js-upload-target').attr('src') === '') {
this.initWithDropzone();
} else {
this.initWithImage();
}
} else {
// This ensures there is an image we can hook into to display uploaded image
$dropzone.prepend('<img class="js-upload-target" style="display: none" src="" />');
this.init();
}
}
});
};

48
ghost/admin/assets/sass/modules/global.scss
View File

@ -1142,6 +1142,14 @@ main {
color: $brown;
text-decoration: none;
}
.button-add {
display: inline-block;
position:relative;
z-index: 700;
color: #fff;
padding-left:5px;
}
.image-edit {
line-height: 12px;
padding: 10px;
@ -1163,7 +1171,6 @@ main {
right: 0;
color: $brown;
text-decoration: none;
}
input {
@ -1199,11 +1206,21 @@ main {
background-size: contain;
}
.failed {
position: relative;
top: -40px;
font-size: 16px;
}
.bar {
height: 12px;
background: $blue;
&.fail {
background: $orange;
}
}
}
.pre-image-uploader {
@include box-sizing(border-box);
@include baseline;
@ -1231,35 +1248,6 @@ main {
}
//.progress {
// position: relative;
// top: -39px;
// margin: auto;
// margin-bottom: -12px;
// display: block;
// overflow: hidden;
// @include linear-gradient(to bottom, #f5f5f5, #f9f9f9);
// border-radius: 12px;
// box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset);
//}
//
//.fileupload-loading {
// display: block;
// top: 50%;
// width: 35px;
// height: 28px;
// margin: -28px auto 0;
// background-size: contain;
//}
//
//.bar {
// height: 12px;
// background: $blue;
//}
/* ==========================================================================
Misc
========================================================================== */

5
ghost/admin/assets/vendor/showdown/extensions/ghostdown.js vendored
View File

@ -7,13 +7,8 @@
filter: function (source) {
return source.replace(/\n?!(?:image)?\[([^\n\]]*)\](?:\(([^\n\)]*)\))?/gi, function (match, alt, a) {
return '<section class="js-drop-zone image-uploader">' +
'<span class="media"><span class="hidden">Image Upload</span></span>' +
'<div class="description">Add image of <strong>' + alt + '</strong></div>' +
'<img class="js-upload-target" style="display: none" alt="alt" src="" />' +
'<input data-url="upload" class="js-fileupload fileupload" type="file" name="uploadimage">' +
'<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>' +
'<a class="image-webcam" title="Add image from webcam">' +
'<span class="hidden">Webcam</span></a>' +
'</section>';
});
}