From 0b58d8349e08a7116dd7478c7b987242995c0aa2 Mon Sep 17 00:00:00 2001 From: Isaac Bythewood Date: Wed, 27 Feb 2013 22:44:56 +0000 Subject: [PATCH] Working pin uploader with drag and drop functionality. --- pinry/pins/forms.py | 10 +++++++ pinry/pins/urls.py | 2 +- pinry/pins/views.py | 9 ++++-- pinry/static/js/helpers.js | 6 ++++ pinry/static/js/pin-form.js | 52 +++++++++++++++++++++++++++------- pinry/templates/base.html | 2 ++ pinry/templates/includes/pin_form.html | 11 +++++-- 7 files changed, 76 insertions(+), 16 deletions(-) diff --git a/pinry/pins/forms.py b/pinry/pins/forms.py index 3e0aa13..bf0b3ed 100644 --- a/pinry/pins/forms.py +++ b/pinry/pins/forms.py @@ -3,7 +3,17 @@ from django import forms from django_images.models import Image +FIELD_NAME_MAPPING = { + 'image': 'qqfile', +} + + class ImageForm(forms.ModelForm): + + def add_prefix(self, field_name): + field_name = FIELD_NAME_MAPPING.get(field_name, field_name) + return super(ImageForm, self).add_prefix(field_name) + class Meta: model = Image fields = ('image',) diff --git a/pinry/pins/urls.py b/pinry/pins/urls.py index a3e6c06..a74fc64 100644 --- a/pinry/pins/urls.py +++ b/pinry/pins/urls.py @@ -7,7 +7,7 @@ from .views import CreateImage urlpatterns = patterns('pinry.pins.views', url(r'^pin-form/$', TemplateView.as_view(template_name='core/pin_form.html'), name='pin-form'), - url(r'^upload-pin/$', CreateImage.as_view(), name='new-pin'), + url(r'^upload-pin/$', CreateImage.as_view(), name='upload-pin'), url(r'^tag/(?P(\w|-)+)/$', TemplateView.as_view(template_name='core/pins.html'), name='tag-pins'), url(r'^$', TemplateView.as_view(template_name='core/pins.html'), diff --git a/pinry/pins/views.py b/pinry/pins/views.py index b70ad36..df2f45e 100644 --- a/pinry/pins/views.py +++ b/pinry/pins/views.py @@ -19,7 +19,12 @@ class CreateImage(JSONResponseMixin, LoginRequiredMixin, CreateView): form_class = ImageForm def form_valid(self, form): - return self.render_json_response({'image_id': self.object.pk}) + image = form.save() + return self.render_json_response({ + 'success': { + 'id': image.id + } + }) def form_invalid(self, form): - return self.render_json_response({'error': 'Error message goes here!'}) + return self.render_json_response({'error': form.errors}) diff --git a/pinry/static/js/helpers.js b/pinry/static/js/helpers.js index 4e52b0d..b3ec810 100644 --- a/pinry/static/js/helpers.js +++ b/pinry/static/js/helpers.js @@ -22,6 +22,12 @@ function cleanTags(tags) { } +function getImageData(imageId) { + var apiUrl = '/api/v1/image/'+imageId+'/?format=json'; + return $.get(apiUrl); +} + + function getPinData(pinId) { var apiUrl = '/api/v1/pin/'+pinId+'/?format=json'; return $.get(apiUrl); diff --git a/pinry/static/js/pin-form.js b/pinry/static/js/pin-form.js index 0310486..b8ad964 100644 --- a/pinry/static/js/pin-form.js +++ b/pinry/static/js/pin-form.js @@ -9,6 +9,8 @@ $(window).load(function() { + var uploadedImage = false; + // Start Helper Functions function getFormData() { return { @@ -31,8 +33,8 @@ $(window).load(function() { preview.html(html); preview.find('.pin').width(200); preview.find('.pin .text').width(140); - if (preview.height() > 305) - $('#pin-form .modal-body').height(preview.height()); + if (preview.find('.pin').height() > 305) + $('#pin-form .modal-body').height(preview.find('.pin').height()); } function dismissModal(modal) { @@ -52,12 +54,40 @@ $(window).load(function() { $('#pin-form-tags')], pinFromUrl = getUrlParameter('pin-image-url'); modal.modal('show'); + // Auto update preview on field changes for (var i in formFields) { formFields[i].bind('propertychange keyup input paste', function() { - createPinPreviewFromForm() + createPinPreviewFromForm(); + if (!uploadedImage) + $('#pin-form-image-upload').parent().parent().css('display', 'none'); }); } + // Drag and Drop Upload + $('#pin-form-image-upload').fineUploader({ + request: { + endpoint: '/pins/upload-pin/', + paramsInBody: true, + multiple: false, + validation: { + allowedExtensions: ['jpeg', 'jpg', 'png', 'gif'] + }, + text: { + uploadButton: 'Click or Drop' + } + } + }).on('complete', function(e, id, name, data) { + $('#pin-form-image-url').parent().parent().css('display', 'none'); + $('.qq-upload-button').css('display', 'none'); + var promise = getImageData(data.success.id); + uploadedImage = data.success.id; + promise.success(function(image) { + $('#pin-form-image-url').val(image.thumbnail.image); + createPinPreviewFromForm(); + }); + }); + // If bookmarklet submit if (pinFromUrl) { + $('#pin-form-image-upload').css('display', 'none'); $('#pin-form-image-url').val(pinFromUrl); $('.navbar').css('display', 'none'); modal.css({ @@ -65,24 +95,26 @@ $(window).load(function() { 'margin-left': -281 }); } + // Submit pin on post click $('#pin-form-submit').click(function(e) { e.preventDefault(); $(this).off('click'); $(this).addClass('disabled'); var data = { - submitter: '/api/v1/user/'+currentUser.id+'/', - url: $('#pin-form-image-url').val(), - description: $('#pin-form-description').val(), - tags: cleanTags($('#pin-form-tags').val()) - }, - promise = postPinData(data); + submitter: '/api/v1/user/'+currentUser.id+'/', + description: $('#pin-form-description').val(), + tags: cleanTags($('#pin-form-tags').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(); pin = renderTemplate('#pins-template', {pins: [pin]}); $('#pins').prepend(pin); dismissModal(modal); + uploadedImage = false; }); - }); $('#pin-form-close').click(function() { if (pinFromUrl) return window.close(); diff --git a/pinry/templates/base.html b/pinry/templates/base.html index 4e0474e..f564825 100644 --- a/pinry/templates/base.html +++ b/pinry/templates/base.html @@ -20,6 +20,7 @@ + @@ -77,6 +78,7 @@ + diff --git a/pinry/templates/includes/pin_form.html b/pinry/templates/includes/pin_form.html index 02c0f8d..84a9cbf 100644 --- a/pinry/templates/includes/pin_form.html +++ b/pinry/templates/includes/pin_form.html @@ -5,9 +5,7 @@

New Pin

-
- Image Preview -
+
@@ -16,6 +14,13 @@
+ +
+
+
Drag and drop supported!
+
+
+