Working pin uploader with drag and drop functionality.

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',)

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<tag>(\w|-)+)/$', TemplateView.as_view(template_name='core/pins.html'),
         name='tag-pins'),
     url(r'^$', TemplateView.as_view(template_name='core/pins.html'),

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})

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);

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();

pinry/templates/base.html

@@ -20,6 +20,7 @@
         <!-- CSS -->
         <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monoton"/>
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css"/>
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.1.1/fineuploader.css"/>
         <link rel="stylesheet" href="{{ STATIC_URL }}css/messages.css"/>
         <link rel="stylesheet" href="{{ STATIC_URL }}css/lightbox.css"/>
         <link rel="stylesheet" href="{{ STATIC_URL }}css/pinry.css"/>
@@ -77,6 +78,7 @@
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.1.1/jquery.fineuploader.min.js"></script>
         <script src="{{ STATIC_URL }}js/helpers.js"></script>
         <script src="{{ STATIC_URL }}js/messages.js"></script>
         <script src="{{ STATIC_URL }}js/lightbox.js"></script>

pinry/templates/includes/pin_form.html

@@ -5,9 +5,7 @@
                 <h3>New Pin</h3>
             </div>
             <div class="modal-body">
-                <div class="span3" id="pin-form-image-preview">
-                    Image Preview
-                </div>
+                <div class="span3" id="pin-form-image-preview"></div>
                 <div class="span3">
                     <div class="control-group">
                         <label class="control-label" for="pin-form-image-url">Image URL</label>
@@ -16,6 +14,13 @@
                         </div>
                     </div>
                     <div class="control-group">
+                        <label class="control-label" for="pin-form-image-upload">or Image Upload</label>
+                        <div class="controls">
+                            <div id="pin-form-image-upload"></div>
+                            <div class="help-block">Drag and drop supported!</div>
+                        </div>
+                    </div>
+                    <div class="control-group">
                         <label class="control-label" for="pin-form-description">Description</label>
                         <div class="controls">
                             <textarea name="pin-form-description" id="pin-form-description"></textarea>