Resize images on client-side before uploading #7734

Fensterbank · 2018-03-07T18:46:23Z

This pull requests implements client-side resizing of images before uploading them.
While FineUploader provides scaling of selected images, its internal image resize code delegates to the drawImage method on the browser's native CanvasRenderingContext2D object which means linear interpolation in most browser.

So for quality and performance reasons I added the Pica-Library which is makeing a much better resizing and uses a Webworker for it.
Since we support Internet Explorer 11 and Pica / FineUploader are working with promises here I added Lie as a small, performant promise library.
I'm not so sure about this or if there is a better way to just make a Promise polyfill for IE11 without affect the modern browsers.

Each image is resized to a max width or max height of 3072 pixels before uploading, so in the future the original images stored on the server will never exceed this size.
In my tests I successfully selected big photos (> 12 MB) to upload. The biggest file sent to the server was 2,4 MiB.

Scaling is disabled when running in a PhantomJS instance because it didn't seem to work at all.

This fixes #5621 and makes #4997 less important.

Flaburgan · 2018-03-07T20:39:18Z

Good news: we don't especially support IE11. If users are able to upload images without resizing them with IE11, we're good enough. We would even tend to not support it at all. FTR on https://framasphere.org from the 1st of January to the 7th of March 2018, IE11 represented 1674 hits = 4.1% of the visitors.

Fensterbank · 2018-03-07T22:00:10Z

Okay. I'm not sure, if we want to have that it's possible to upload the original image without any limitation.
It could easily happen that huge files are saved on the server which the 4 MB limit prevented.

But yes, only for IE11 we don't need another Promise library. In fact the resizing based on linear interpolation brought with FineUploader is enough. Technically it's not the best quality but in my test it was much faster than resizing in IE11 with Pica, so we just use what FineUploader brings.

diaspora-code-review · 2018-03-07T22:23:10Z

spec/javascripts/app/views/publisher_view_spec.js

@@ -542,7 +542,7 @@ describe("app.views.Publisher", function() {
        var upload_view = this.view.viewUploader;
        this.uploader = {
          onProgress: _.bind(upload_view.progressHandler, upload_view),
-          onSubmit:   _.bind(upload_view.submitHandler, upload_view),
+          onUpload:   _.bind(upload_view.uploadHandler, upload_view),


Extra space before value for key 'onUpload'.

Identifier 'upload_view' is not in camel case.

diaspora-code-review · 2018-03-07T22:23:10Z

spec/javascripts/app/views/publisher_view_spec.js

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


Strings must use doublequote.

denschub · 2018-03-07T22:26:39Z

Good news: we don't especially support IE11. If users are able to upload images without resizing them with IE11, we're good enough

I mean... if we only support the latest of the major browser, it's fine by me. And that would be Edge! And since Edge has Promise-support, that's fine. At least for me.

However, I'm not sure about your approach. Is there an option to only resize when the image is larger than 4MB and not touch the image at all if it's below the limit?

Fensterbank · 2018-03-07T23:14:29Z

However, I'm not sure about your approach. Is there an option to only resize when the image is larger than 4MB and not touch the image at all if it's below the limit?

The options can only be set at initialization. But it seems we could achieve this by calling the scaleImage method if necessary in the submit handler and then trigger the upload.

Since scaleImage returns a promise, we will definitely lose any scaling in IE11. But we can give the IE11 users the 4 MB validation as it has been before and the moderm browser will scale if necessary.

I'll take a look at it!

Fensterbank · 2018-03-08T16:56:55Z

As suggested by @denschub the picture is now only scaled if its size is above the 4 MB size limit.
Smaller images will be uploaded untouched at it has been before.

If the browser does not support Promises or canvas scaling the logic is the same as always.
This means an IE11 user trying to upload a huge image will see the file too big error message while the modern browsers will scale.

Unfortunately we have a bug in the FineUploader library. Firefox for Android is considered to be a stock browser for which the scaling feature is disabled.
This means uploading pictures directly from the camera of an Android smartphone does currently only work in Chrome for Android.

diaspora-code-review · 2018-03-10T12:27:39Z

app/assets/javascripts/helpers/post_photo_uploader.es6

+     * @param {param} - The object to check
+     * @returns {boolean}
+     */
+    this.func = param => (typeof(param) === 'function');


Unary word operator 'typeof' must be followed by whitespace.

Strings must use doublequote.

diaspora-code-review · 2018-03-10T12:27:39Z

app/assets/javascripts/helpers/post_photo_uploader.es6

+    });
+  }
+
+


More than 1 blank line not allowed.

Resize images on client-side before uploading

denschub · 2018-04-02T08:39:48Z

Sorry it took me a bit to review, but it looks good to me. Merged to develop, and we'll see if we break things. :)

Fensterbank force-pushed the client-side-picture-resize branch from 4e9bf7c to 854e093 Compare March 7, 2018 21:54

Fensterbank force-pushed the client-side-picture-resize branch from 854e093 to d7ab62b Compare March 7, 2018 22:22

diaspora-code-review reviewed Mar 7, 2018

View reviewed changes

Fensterbank force-pushed the client-side-picture-resize branch from d7ab62b to 42fbe70 Compare March 7, 2018 22:57

Fensterbank force-pushed the client-side-picture-resize branch from 42fbe70 to 36a2a4e Compare March 8, 2018 16:48

Fensterbank force-pushed the client-side-picture-resize branch from 36a2a4e to b86bcc0 Compare March 10, 2018 12:27

diaspora-code-review reviewed Mar 10, 2018

View reviewed changes

Fensterbank force-pushed the client-side-picture-resize branch from b86bcc0 to fdc6a19 Compare March 10, 2018 12:32

Resize images on client-side before uploading

6d55b15

Fensterbank force-pushed the client-side-picture-resize branch from fdc6a19 to 6d55b15 Compare March 11, 2018 10:20

SuperTux88 added this to the 0.8.0.0 milestone Mar 13, 2018

denschub merged commit 6d55b15 into diaspora:develop Apr 2, 2018

denschub added a commit that referenced this pull request Apr 2, 2018

Merge pull request #7734 from Fensterbank/client-side-picture-resize

ae17248

Resize images on client-side before uploading

Fensterbank deleted the client-side-picture-resize branch April 2, 2018 14:03

Fensterbank mentioned this pull request May 4, 2018

consider Firefox when checking for Android Stock Browser FineUploader/fine-uploader#2007

Merged

SuperTux88 mentioned this pull request Jul 11, 2018

Fix multiple photos upload progress bar #7655

Merged

Flaburgan mentioned this pull request Oct 12, 2018

Feature request: Larger images #7664

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resize images on client-side before uploading #7734

Resize images on client-side before uploading #7734

Fensterbank commented Mar 7, 2018 •

edited

Flaburgan commented Mar 7, 2018 •

edited

Fensterbank commented Mar 7, 2018

diaspora-code-review Mar 7, 2018

diaspora-code-review Mar 7, 2018

denschub commented Mar 7, 2018

Fensterbank commented Mar 7, 2018

Fensterbank commented Mar 8, 2018

diaspora-code-review Mar 10, 2018

diaspora-code-review Mar 10, 2018

denschub commented Apr 2, 2018

Resize images on client-side before uploading #7734

Resize images on client-side before uploading #7734

Conversation

Fensterbank commented Mar 7, 2018 • edited

Flaburgan commented Mar 7, 2018 • edited

Fensterbank commented Mar 7, 2018

diaspora-code-review Mar 7, 2018

Choose a reason for hiding this comment

diaspora-code-review Mar 7, 2018

Choose a reason for hiding this comment

denschub commented Mar 7, 2018

Fensterbank commented Mar 7, 2018

Fensterbank commented Mar 8, 2018

diaspora-code-review Mar 10, 2018

Choose a reason for hiding this comment

diaspora-code-review Mar 10, 2018

Choose a reason for hiding this comment

denschub commented Apr 2, 2018

Fensterbank commented Mar 7, 2018 •

edited

Flaburgan commented Mar 7, 2018 •

edited