Resize image before upload

Need help
1

I’m using the picture uploader input to upload images from a tablet. This works fine but the image is very large and takes too long to upload and I really don’t need the full resolution. So I was doing some research and found that html5 is capable of resizing the image on the client before it uploads to the server. This would be a great feature to add by the way. But in the mean time I’d like to see if I can implement this. It seems mostly straight forward, however, as I do not have control over the inputs directly I’m not sure how I can add this code. I thought about using blockspring but I think that would require passing the image to them which defeats the whole purpose. Does anyone have an idea how I can implement this js?

You can check out the javascript here: http://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading

2

That’s something we’d need to add on our end at this stage. I’ll think about it.

2 Likes
3

That would be great if you could add this feature. I don’t have a very fast upload speed here so each image takes about 20 seconds to upload. Thats a long time to wait, especially when the high res. isn’t needed for my project.

4

Pushing this now, should be live within 30 minutes.

5 Likes
5

That’s great…just trying it out now. Usually after the image uploads it shows in the input to save but when you have the limit image size checked it does not show up in the input. so I’m unable to save the image into the database with the new option checked.

6

Image size checked button was not there first time (small bug). Only when I downloaded a 4M photo, the selection appeared.
This is new from one screen before:

7

I tried also the binding mode, but save nothing.

  1. Capture d’écran 2016-06-09 à 00.28.19.png744×667 43.3 KB
  2. Capture d’écran 2016-06-09 à 00.29.38.png880×268 22.1 KB
8

Not sure I understand the issue. Can you report the bug if there is one.

9

I tested uploading images in this test app: https://testing-functions.bubbleapps.io/version-test/index

I have 2 image upload boxes, one with the limit image size checked and one without.
looking at dev tools/ network in chrome, when you upload a photo, the request payload size is the same for both. so It seems to me that the browser is sending the full size regardless. however the image is the proper size when in the database. So what I can figure is that the image is being resized after upload which doesn’t help with upload speeds at all.

Second problem I’m seeing is that when on a mobile device, the image does not upload at all when using the limit image size (I tested on iOS chrome and safari).

10

Then maybe we should get rid of the feature on mobile, since it’s an HTML5 issue then. If you can confirm, i’ll make sure that doesn’t get applied at all on mobile.

For 1) please file a bug report (bubble.is/bug_report) if there is a bug. I tested and it worked fine here to be honest.

11

Thanks @emmanuel I think the limit size makes it 800x600 right? anyway to being able to tweak that outselves? perhaps smaller than that

1 Like
12

I’m also looking for that option! I would like to set the limit size somewhere a little higher. :smile:

1 Like
13

croppie should be able to do it. I ended up using it and it works okay. I only say okay because downsampling an image and it’s effectiveness depends on the algorithm used…