diff --git a/bower.json b/bower.json index 0862003..0f241c1 100644 --- a/bower.json +++ b/bower.json @@ -3,6 +3,7 @@ "dependencies": { "jquery": "2.0.3", "bootstrap": "3.3.6", - "handlebars": "1.0.0" + "handlebars": "1.0.0", + "dropzone": "^4.3.0" } } diff --git a/pinry/static/js/pin-form.js b/pinry/static/js/pin-form.js index 5842c52..74436d8 100644 --- a/pinry/static/js/pin-form.js +++ b/pinry/static/js/pin-form.js @@ -9,6 +9,7 @@ $(window).load(function() { + var uploadedImage = false; var editedPin = null; // Start Helper Functions @@ -68,6 +69,7 @@ $(window).load(function() { editedPin = data; $('#pin-form-image-url').val(editedPin.image.thumbnail.image); $('#pin-form-image-url').parent().hide(); + $('#pin-form-image-upload').parent().hide(); $('#pin-form-description').val(editedPin.description); $('#pin-form-tags').val(editedPin.tags); createPinPreviewFromForm(); @@ -82,10 +84,34 @@ $(window).load(function() { timer = setTimeout(function() { createPinPreviewFromForm() }, 700); + if (!uploadedImage) + $('#pin-form-image-upload').parent().fadeOut(300); }); } + // Drag and drop upload + $('#pin-form-image-upload').dropzone({ + url: '/pins/create-image/', + paramName: 'qqfile', + parallelUploads: 1, + uploadMultiple: false, + maxFiles: 1, + acceptedFiles: 'image/*', + success: function(file, resp) { + $('#pin-form-image-url').parent().fadeOut(300); + var promise = getImageData(resp.success.id); + uploadedImage = resp.success.id; + promise.success(function(image) { + $('#pin-form-image-url').val(image.thumbnail.image); + createPinPreviewFromForm(); + }); + promise.error(function() { + message('Problem uploading image.', 'alert alert-error'); + }); + } + }); // If bookmarklet submit if (pinFromUrl) { + $('#pin-form-image-upload').parent().css('display', 'none'); $('#pin-form-image-url').val(pinFromUrl); $('.navbar').css('display', 'none'); modal.css({ @@ -132,7 +158,8 @@ $(window).load(function() { description: $('#pin-form-description').val(), tags: cleanTags($('#pin-form-tags').val()) }; - data.url = $('#pin-form-image-url').val(); + if (uploadedImage) data.image = '/api/v1/image/'+uploadedImage+'/'; + else data.url = $('#pin-form-image-url').val(); var promise = postPinData(data); promise.success(function(pin) { if (pinFromUrl) return window.close(); @@ -142,6 +169,7 @@ $(window).load(function() { tileLayout(); lightbox(); dismissModal(modal); + uploadedImage = false; }); promise.error(function() { message('Problem saving image.', 'alert alert-danger'); diff --git a/pinry/templates/base.html b/pinry/templates/base.html index 58a01bb..136ab95 100644 --- a/pinry/templates/base.html +++ b/pinry/templates/base.html @@ -31,6 +31,7 @@ {% compress css %} + @@ -123,6 +124,7 @@ + diff --git a/pinry/templates/includes/pin_form.html b/pinry/templates/includes/pin_form.html index f146e2e..01ab5ec 100644 --- a/pinry/templates/includes/pin_form.html +++ b/pinry/templates/includes/pin_form.html @@ -14,6 +14,10 @@
+ +
+
+