Resize images on client-side before uploading

Gemfile

@@ -113,6 +113,7 @@ source "https://rails-assets.org" do
   gem "rails-assets-corejs-typeahead",                    "1.1.1"
   gem "rails-assets-cropperjs",                           "1.2.1"
   gem "rails-assets-fine-uploader",                       "5.13.0"
+  gem "rails-assets-pica",                                "4.0.1"
 
   # jQuery plugins
 

Gemfile.lock

@@ -558,6 +558,7 @@ GEM
     rails-assets-markdown-it-sub (1.0.0)
     rails-assets-markdown-it-sup (1.0.0)
     rails-assets-perfect-scrollbar (0.6.16)
+    rails-assets-pica (4.0.1)
     rails-assets-underscore (1.8.3)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
@@ -878,6 +879,7 @@ DEPENDENCIES
   rails-assets-markdown-it-sub (= 1.0.0)!
   rails-assets-markdown-it-sup (= 1.0.0)!
   rails-assets-perfect-scrollbar (= 0.6.16)!
+  rails-assets-pica (= 4.0.1)!
   rails-controller-testing (= 1.0.2)
   rails-i18n (= 5.0.4)
   rails-timeago (= 2.16.0)

app/assets/javascripts/app/views/publisher/uploader_view.js

@@ -6,7 +6,6 @@
 
 app.views.PublisherUploader = Backbone.View.extend({
   allowedExtensions: ["jpg", "jpeg", "png", "gif"],
-  sizeLimit: 4194304,  // bytes
 
   initialize: function(opts) {
     this.publisher = opts.publisher;
@@ -30,16 +29,27 @@ app.views.PublisherUploader = Backbone.View.extend({
       },
       validation: {
         allowedExtensions: this.allowedExtensions,
-        sizeLimit: this.sizeLimit
       },
+      // skip client-side scaling while running in PhantomJS
+      scaling: navigator.userAgent.indexOf("PhantomJS") === -1 ? {
+        sendOriginal: false,
+        sizes: [
+          {
+            maxSize: 3072
+          }
+        ],
+        customResizer: !qq.ios() && window.Promise && function(resizeInfo) {
+          return window.pica().resize(resizeInfo.sourceCanvas, resizeInfo.targetCanvas);
+        }
+      } : {},
       messages: {
         typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
         sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
         emptyError: Diaspora.I18n.t("photo_uploader.empty")
       },
       callbacks: {
         onProgress: _.bind(this.progressHandler, this),
-        onSubmit: _.bind(this.submitHandler, this),
+        onUpload: _.bind(this.uploadHandler, this),
         onComplete: _.bind(this.uploadCompleteHandler, this),
         onError: function(id, name, errorReason) {
           if (app.flashMessages) { app.flashMessages.error(errorReason); }
@@ -61,7 +71,7 @@ app.views.PublisherUploader = Backbone.View.extend({
       .width(progress + "%");
   },
 
-  submitHandler: function() {
+  uploadHandler: function() {
     this.$el.addClass("loading");
     this._addPhotoPlaceholder();
   },

app/assets/javascripts/main.js

@@ -46,3 +46,4 @@
 //= require helpers/markdown_editor
 //= require jquery.are-you-sure
 //= require cropperjs/dist/cropper.js
+//= require pica

config/initializers/secure_headers.rb

@@ -6,16 +6,16 @@
   # rubocop:disable Lint/PercentStringArray
   csp = {
     default_src:     %w['none'],
-    child_src:       %w['self' www.youtube.com w.soundcloud.com twitter.com platform.twitter.com syndication.twitter.com
-                        player.vimeo.com www.mixcloud.com www.dailymotion.com media.ccc.de bandcamp.com
-                        www.instagram.com],
+    child_src:       %w['self' blob: www.youtube.com w.soundcloud.com twitter.com platform.twitter.com
+                        syndication.twitter.com player.vimeo.com www.mixcloud.com www.dailymotion.com media.ccc.de
+                        bandcamp.com www.instagram.com],
     connect_src:     %w['self' embedr.flickr.com geo.query.yahoo.com nominatim.openstreetmap.org api.github.com],
     font_src:        %w['self'],
     form_action:     %w['self' platform.twitter.com syndication.twitter.com],
     frame_ancestors: %w['self'],
     img_src:         %w['self' data: blob: *],
     media_src:       %w[https:],
-    script_src:      %w['self' 'unsafe-eval' platform.twitter.com cdn.syndication.twimg.com widgets.flickr.com
+    script_src:      %w['self' blob: 'unsafe-eval' platform.twitter.com cdn.syndication.twimg.com widgets.flickr.com
                         embedr.flickr.com platform.instagram.com 'unsafe-inline'],
     style_src:       %w['self' 'unsafe-inline' platform.twitter.com *.twimg.com]
   }

spec/javascripts/app/views/publisher_view_spec.js

@@ -539,13 +539,13 @@ describe("app.views.Publisher", function() {
         this.view = new app.views.Publisher();
 
         // replace the uploader plugin with a dummy object
-        var upload_view = this.view.viewUploader;
+        var uploadView = this.view.viewUploader;
         this.uploader = {
-          onProgress: _.bind(upload_view.progressHandler, upload_view),
-          onSubmit:   _.bind(upload_view.submitHandler, upload_view),
-          onComplete: _.bind(upload_view.uploadCompleteHandler, upload_view)
+          onProgress: _.bind(uploadView.progressHandler, uploadView),
+          onUpload: _.bind(uploadView.uploadHandler, uploadView),
+          onComplete: _.bind(uploadView.uploadCompleteHandler, uploadView)
         };
-        upload_view.uploader = this.uploader;
+        uploadView.uploader = this.uploader;
       });
 
       context('progress', function() {
@@ -560,7 +560,7 @@ describe("app.views.Publisher", function() {
 
       context('submitting', function() {
         beforeEach(function() {
-          this.uploader.onSubmit(null, 'test.jpg');
+          this.uploader.onUpload(null, "test.jpg");
         });
 
         it('adds a placeholder', function() {