From 976c0018e917514814e9a9d0d3ba419297d20a41 Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Fri, 25 Apr 2014 01:58:32 +0200
Subject: [PATCH] Init: Ajax image upload

---
 .../2k11/admin/serendipity_editor.js.tpl      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl
index 23eacbc3..a8c113b7 100644
--- a/templates/2k11/admin/serendipity_editor.js.tpl
+++ b/templates/2k11/admin/serendipity_editor.js.tpl
@@ -1319,6 +1319,7 @@ $(function() {
         });
     }
 
+    // UI-flow whe nselecting multiple images in ML upload
     if ($('.uploadform_userfile').length > 0) {
         $('.uploadform_userfile').change(function() {
             if ($(this).get(0).files.length > 1) {
@@ -1332,6 +1333,68 @@ $(function() {
         });
     }
 
+    // minify images before upload, approach taken from https://github.com/joelvardy/javascript-image-upload/
+    if ($('#uploadform').length > 0) {
+        $('#uploadform').submit(function(event) {
+            event.preventDefault();
+            $('.uploadform_userfile').each(function() {
+                var files = this.files;
+                for (var i = 0; i < files.length; i++) {
+                    var reader = new FileReader();
+                    var file = files[i];
+                    reader.onload = function(readerEvent) {
+                        var image = new Image();
+                        image.onload = function (imageEvent) {
+                            // Resize image
+                            var canvas = document.createElement('canvas'),
+                                max_size = 1200,
+                                width = image.width,
+                                height = image.height;
+                            if (width > height) {
+                                if (width > max_size) {
+                                    height *= max_size / width;
+                                    width = max_size;
+                                }
+                            } else {
+                                if (height > max_size) {
+                                    width *= max_size / height;
+                                    height = max_size;
+                                }
+                            }
+                            canvas.width = width;
+                            canvas.height = height;
+                            canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+                            var data = new FormData();
+                            data.append('serendipity[action]', 'admin');
+                            data.append('serendipity[adminModule]', 'media');
+                            data.append('serendipity[adminAction]', 'add');
+                            data.append('serendipity[token]', $('input[name*="serendipity[token]"]').val());
+                            data.append('serendipity[target_filename][1]', file.name);
+                            canvas.toBlob(function(blob) {
+                                data.append('serendipity[userfile][1]', blob, file.name);
+                                var jqxhr = $.ajax({
+                                            type: 'post',
+                                            url: $('#uploadform').attr('action'),
+                                            data: data,
+                                            cache: false,
+                                            processData: false,
+                                            contentType: false
+                                          }).done(function(data) {
+                                               alert('success');
+                                          }).fail(function(data) {
+                                                alert("fail:" + data.statusText);
+                                          });
+
+                            }, file.type);
+                        }
+                        image.src = readerEvent.target.result;
+                    }
+                    reader.readAsDataURL(file);
+                }
+            });
+        });
+    }
+
     // reopen detail element after spamblock action
     if ($('#serendipity_comments_list').length > 0 && window.location.hash && $('#' + window.location.hash.replace('#', '')).length > 0) {
         $('#' + window.location.hash.replace('#', '')).find(".toggle_info").click();