[extensions-web] Resize icons and screenshots on the server

[Jasper St. Pierre <jstpierre src gnome org>]

commit 6e2812229f78f4cb0eed938a0d6d406c3ad0dd07
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Nov 1 16:50:50 2011 -0400

    Resize icons and screenshots on the server
    
    This greatly simplifies the client-side upload code and solves a bunch
    of issues where the client-side resize is either incorrect or ugly

 .../templates/extensions/detail_edit.html          |    2 +-
 sweettooth/extensions/urls.py                      |    4 +-
 sweettooth/extensions/views.py                     |   24 +++++++---
 sweettooth/static/js/uploader.js                   |   46 ++------------------
 4 files changed, 23 insertions(+), 53 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail_edit.html b/sweettooth/extensions/templates/extensions/detail_edit.html
index b9e3bfb..9775729 100644
--- a/sweettooth/extensions/templates/extensions/detail_edit.html
+++ b/sweettooth/extensions/templates/extensions/detail_edit.html
@@ -74,7 +74,7 @@
 {% block document-ready %}{{ block.super }}
     $("h3, p.description").csrfEditable("{% url extensions-ajax-inline pk=version.extension.pk %}");
     require(['uploader'], function() {
-        $(".screenshot.upload").uploadify("{% url extensions-ajax-screenshot pk=version.extension.pk %}");
+        $(".screenshot.upload").uploadify("{% url extensions-ajax-screenshot pk=version.extension.pk %}?geometry=300x200");
         $(".icon.upload").uploadify("{% url extensions-ajax-icon pk=version.extension.pk %}");
     });
 {% endblock %}
diff --git a/sweettooth/extensions/urls.py b/sweettooth/extensions/urls.py
index 43e1564..467307e 100644
--- a/sweettooth/extensions/urls.py
+++ b/sweettooth/extensions/urls.py
@@ -13,8 +13,8 @@ upload_patterns = patterns('',
 ajax_patterns = patterns('',
     url(r'^edit/(?P<pk>\d+)', views.ajax_inline_edit_view, name='extensions-ajax-inline'),
     url(r'^submit/(?P<pk>\d+)', views.ajax_submit_and_lock_view, name='extensions-ajax-submit'),
-    url(r'^upload/screenshot/(?P<pk>\d+)', views.ajax_image_upload_view(field='screenshot'), name='extensions-ajax-screenshot'),
-    url(r'^upload/icon/(?P<pk>\d+)', views.ajax_image_upload_view(field='icon'), name='extensions-ajax-icon'),
+    url(r'^upload/screenshot/(?P<pk>\d+)', views.ajax_upload_screenshot_view, name='extensions-ajax-screenshot'),
+    url(r'^upload/icon/(?P<pk>\d+)', views.ajax_upload_icon_view, name='extensions-ajax-icon'),
     url(r'^detail/', views.ajax_details_view, name='extensions-ajax-details'),
 )
 
diff --git a/sweettooth/extensions/views.py b/sweettooth/extensions/views.py
index 90ff84d..fc9f68f 100644
--- a/sweettooth/extensions/views.py
+++ b/sweettooth/extensions/views.py
@@ -4,6 +4,7 @@ from django.contrib.auth.decorators import login_required
 from django.contrib import messages
 from django.http import HttpResponseForbidden, Http404
 from django.shortcuts import get_object_or_404, redirect
+from sorl.thumbnail.shortcuts import get_thumbnail
 
 from extensions import models
 from extensions.forms import UploadForm
@@ -139,14 +140,21 @@ def ajax_inline_edit_view(request, obj):
 
     return value
 
-def ajax_image_upload_view(field):
-    @ajax_view
-    @post_only_view
-    @model_view(models.Extension)
-    def inner(request, obj):
-        setattr(obj, field, request.FILES['file'])
-        obj.save()
-    return inner 
+ ajax_view
+ post_only_view
+ model_view(models.Extension)
+def ajax_upload_screenshot_view(request, obj):
+    obj.screenshot = request.FILES['file']
+    obj.save()
+    return get_thumbnail(obj.screenshot, request.GET['geometry']).url
+
+ ajax_view
+ post_only_view
+ model_view(models.Extension)
+def ajax_upload_icon_view(request, obj):
+    obj.icon = request.FILES['file']
+    obj.save()
+    return obj.icon.url
 
 def ajax_details(extension):
     return dict(pk = extension.pk,
diff --git a/sweettooth/static/js/uploader.js b/sweettooth/static/js/uploader.js
index e0a012f..acad6c8 100644
--- a/sweettooth/static/js/uploader.js
+++ b/sweettooth/static/js/uploader.js
@@ -19,47 +19,13 @@ define(['jquery'], function($) {
         }
 
         function upload(e) {
-            function replaceImage($img) {
+            function uploadComplete(result) {
                 var $old = $elem.children().first();
-                if ($elem.width() < $elem.height())
-                    $img.width($elem.width());
-                else
-                    $img.height($elem.height());
+                var $img = $('<img>', { 'src': result });
                 $img.replaceAll($old);
                 $elem.removeClass('placeholder');
             }
 
-            function uploadCompleteObjectURL() {
-                var $img = $("<img>", { src: window.URL.createObjectURL(file) });
-                $img.bind('load', function() {
-                    window.URL.revokeObjectURL(this.src);
-                    replaceImage($img);
-                });
-            }
-
-            function uploadCompleteFileReader(url) {
-                function _img(url) {
-                    var $img = $("<img>", { src: url });
-                    $img.bind('load', function() {
-                        replaceImage($img);
-                    });
-                }
-
-                if (url) {
-                    _img(url);
-                } else {
-                    var filereader = new FileReader();
-                    filereader.onload = function(e) {
-                        var url = e.target.result;
-                        _img(url);
-                    };
-                }
-            }
-
-            var uploadComplete = ((window.URL.createObjectURL !== undefined) ? 
-                                  uploadCompleteObjectURL :
-                                  uploadCompleteFileReader);
-
             var dt, file;
             if (e.originalEvent.dataTransfer)
                 dt = e.originalEvent.dataTransfer;
@@ -82,9 +48,7 @@ define(['jquery'], function($) {
                                        contentType: false,
                                        processData: false,
                                        data: fd });
-                df.done(function() {
-                    uploadComplete();
-                });
+                df.done(uploadComplete);
             } else {
                 var filereader = new FileReader();
                 filereader.onload = function(e) {
@@ -92,9 +56,7 @@ define(['jquery'], function($) {
                     var df = $.ajax(url, { type: 'POST',
                                            contentType: 'multipart/form-data; boundary="' + BOUNDARY + '"',
                                            data: buildMultipart(url) });
-                    df.done(function() {
-                        uploadComplete(url);
-                    });
+                    df.done(uploadComplete);
                 };
                 filereader.readAsBinaryString(file);
             }