Skip to content

Commit

Permalink
Added url functionality for image uploads
Browse files Browse the repository at this point in the history 
closes TryGhost#701, closes TryGhost#702

- if image upload is called from editor the url icon provides a text field and a save button
- if on settings pages (general and user) the save button will capture the entered url or uploaded url
- both modes have the reset button
- fixed bug that is created by url when image is dragged onto window
  • Loading branch information
@cobbspur @ErisDS
cobbspur authored and ErisDS committed Sep 17, 2013
1 parent 4399402 commit 757ed3a
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 54 deletions.
116 changes: 78 additions & 38 deletions core/client/assets/lib/uploader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

UploadUi = function ($dropzone, settings) {
var source,
$url = '<div class="js-url"><input id="uploadurl" class="url" type="url" placeholder="http://"/></div>',
$cancel = '<a class="image-cancel js-cancel"><span class="hidden">Delete</span></a>',
$progress = $('<div />', {
"class" : "js-upload-progress progress progress-success active",
Expand All @@ -19,12 +20,56 @@
}));

$.extend(this, {
complete: function (result) {
var self = this;

$dropzone.trigger("uploadsuccess", [result, $dropzone.attr('id')]);

function showImage(width, height) {
$dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
$dropzone.find('.fileupload-loading').remove();
$dropzone.css({"height": "auto"});
$dropzone.delay(250).animate({opacity: 100}, 1000, function () {
self.init();
});
}

function animateDropzone($img) {
$dropzone.animate({opacity: 0}, 250, function () {
$dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
$dropzone.css({minHeight: 0});
self.removeExtras();
$dropzone.animate({height: $img.height()}, 250, function () {
showImage($img.width(), $img.height());
});
});
}

function preLoadImage() {
var $img = $dropzone.find('img.js-upload-target')
.attr({'src': '', "width": 'auto', "height": 'auto'});

$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", [result]);
$img.one('load', function () {
animateDropzone($img);
}).attr('src', result);
}
preLoadImage();

},

bindFileUpload: function () {
var self = this;

$dropzone.find('.js-fileupload').fileupload().fileupload("option", {
url: '/ghost/upload/',
add: function (e, data) {
$dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('.js-url, button.centre').remove();
$progress.find('.js-upload-progress-bar').removeClass('fail');
$dropzone.trigger('uploadstart', [$dropzone.attr('id')]);
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
Expand Down Expand Up @@ -58,40 +103,7 @@
});
},
done: function (e, data) {
$dropzone.trigger("uploadsuccess", [data.result, $dropzone.attr('id')]);

function showImage(width, height) {
$dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
$dropzone.find('.fileupload-loading').remove();
$dropzone.css({"height": "auto"});
$dropzone.delay(250).animate({opacity: 100}, 1000, function () {
self.init();
});
}

function animateDropzone($img) {
$dropzone.animate({opacity: 0}, 250, function () {
$dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
$dropzone.css({minHeight: 0});
self.removeExtras();
$dropzone.animate({height: $img.height()}, 250, function () {
showImage($img.width(), $img.height());
});
});
}

function preLoadImage() {
var $img = $dropzone.find('img.js-upload-target')
.attr({'src': '', "width": 'auto', "height": 'auto'});

$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"}); }
});
$img.one('load', function () { animateDropzone($img); })
.attr('src', data.result);
}
preLoadImage();
self.complete(data.result);
}
});
},
Expand All @@ -112,9 +124,9 @@
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>');
}
// 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 () {
Expand All @@ -129,8 +141,36 @@
this.removeExtras();
this.buildExtras();
this.bindFileUpload();
$dropzone.find('a.image-url').on('click', function () {
self.initUrl();
});
},
initUrl: function () {
var self = this, val;
this.removeExtras();
$dropzone.find('.js-fileupload').addClass('right');
$dropzone.append($cancel);
$dropzone.find('.js-cancel').on('click', function () {
$dropzone.find('.js-url').remove();
$dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('button.centre').remove();
self.removeExtras();
self.initWithDropzone();
});
if (settings.editor) {
$dropzone.find('div.description').after('<button class="js-button-accept button-save centre">Save</button>');
}
$dropzone.find('div.description').before($url);

$dropzone.find('.js-button-accept').on('click', function () {
$dropzone.find('div.description').hide();
val = $('#uploadurl').val();
$dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('.js-url').remove();
$dropzone.find('button.centre').remove();
self.complete(val);
});
},

initWithImage: function () {
var self = this;
// This is the start point if an image already exists
Expand Down
65 changes: 53 additions & 12 deletions core/client/assets/sass/modules/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1235,7 +1235,15 @@ main {
color: $darkgrey;
}
}

.description {
margin-top: 10px;
margin-bottom: -40px;
}
.centre{
position: relative;
top: 50px;
margin-bottom: -6px;
}
.media {
@include icon($i-image, 60px, darken($lightbrown, 3%)) {
display:inline-block;
Expand Down Expand Up @@ -1273,19 +1281,53 @@ main {
color: $brown;
text-decoration: none;
}
.image-cancel {
@include icon($i-x, 16px);
position: absolute;
color: white;
text-shadow: rgba(0,0,0,0.3) 0 0 3px;
top: 10px;
right: 10px;
text-decoration: none;

&:hover {
cursor: pointer;
color: white;
}
}
input {
position: absolute;
right: 0;
margin: 0;
opacity: 0;
@include transform-origin(right);
@include transform( scale(14));
font-size: 23px;
direction: ltr;
cursor: pointer;
&.main{
position: absolute;
right: 0;
margin: 0;
opacity: 0;
@include transform-origin(right);
@include transform( scale(14));
font-size: 23px;
direction: ltr;
cursor: pointer;
&.right {
position: relative;
right: 9999px;
}
}
&.url{
font: -webkit-small-control;
box-sizing: border-box;
width: 276px;
padding: 5px 7px;
margin: 0;
margin-top: -10px;
margin-bottom: -1px; outline: 0;
font-size: 1.1em;
line-height: 1.4em;
background: #fff;
border: #e3e1d5 1px solid;
border-radius: 4px;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
}
}

.progress {
position: relative;
top: -22px;
Expand Down Expand Up @@ -1321,7 +1363,6 @@ main {
}
}
}

.pre-image-uploader {
@include box-sizing(border-box);
@include baseline;
Expand Down
2 changes: 1 addition & 1 deletion core/client/assets/vendor/showdown/extensions/ghostdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
return '<section id="image_upload_' + key + '" class="js-drop-zone image-uploader">' + result +
'<div class="description">Add image of <strong>' + alt + '</strong></div>' +
'<input data-url="upload" class="js-fileupload fileupload" type="file" name="uploadimage">' +
'<input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">' +
'</section>';
});
}
Expand Down
2 changes: 1 addition & 1 deletion core/client/tpl/modals/uploadImage.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="js-drop-zone">
<img class="js-upload-target" src="{{options.src}}"{{#unless options.src}} style="display: none"{{/unless}} alt="logo">
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
<input data-url="upload" class="js-fileupload main" type="file" name="uploadimage">
</section>
13 changes: 11 additions & 2 deletions core/client/views/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,12 @@
var self = this, upload = new Ghost.Models.uploadModal({'key': key, 'src': src, 'accept': {
func: function () { // The function called on acceptance
var data = {};
data[key] = this.$('.js-upload-target').attr('src');
if (this.$('#uploadurl').val()) {
data[key] = this.$('#uploadurl').val();
} else {
data[key] = this.$('.js-upload-target').attr('src');
}

self.model.save(data, {
success: self.saveSuccess,
error: self.saveError
Expand Down Expand Up @@ -254,7 +259,11 @@
var self = this, upload = new Ghost.Models.uploadModal({'key': key, 'src': src, 'accept': {
func: function () { // The function called on acceptance
var data = {};
data[key] = this.$('.js-upload-target').attr('src');
if (this.$('#uploadurl').val()) {
data[key] = this.$('#uploadurl').val();
} else {
data[key] = this.$('.js-upload-target').attr('src');
}
self.model.save(data, {
success: self.saveSuccess,
error: self.saveError
Expand Down

0 comments on commit 757ed3a

Please sign in to comment.