Resize photo client-side before upload

Need help Mobile
1

Hi everyone,

I’m building an app in which: a user takes a photo, then that photo must be sent to an external API, then the API’s output must be returned to Bubble ASAP. It is “slow” to do all of the following:

  1. upload a large image from the user’s device to Bubble
  2. transfer a large image from Bubble to the API
  3. process a large image on the API server

I have two questions:

A. Is it possible to have the photo size automatically reduced client-side before uploading to Bubble? This would be the best solution.

B. If not, is it possible for Bubble’s servers to generate a smaller image (after upload to Bubble), and send the smaller image to the API?

I’ve searched the Bubble forums and come up with nothing, aside from finding out that A is possible in HTML5, but I haven’t been able to find a workable solution in Bubble.

Reducing photo size before uploading to Bubble would seem to be a common use case, as smartphone photos seem to be increasing in size/resolution.

2

Our app processes a lot of images and you are right, uploads, transfers, transformations and downloads of images can be somewhat time consuming.

Performance, and the appearance of performance, are two different things.

I don’t know whether your use case is related to pixel dimension or compression of your images, but there’s no reason why you can’t just let the image transformation occur in the background, while your site continues as normal. If users see something happening, they don’t need to know the compression takes a while?

Richard

3

You are correct, users don’t need to know the compression takes a while, but they do need to get back the output of the API ASAP. Currently there are two slow network transfers, which slow down the time between user upload, and user seeing API output. They are:

  1. upload of a large photo from user to Bubble
  2. upload of a large photo from Bubble to the API

I’m trying to reduce the size of the photo in one or both of the above, because it’s vital that the user sees the output of the API as soon as they can.

4

I’m in the same boat. Any news, insights, or suggestions please?

5

waiting for the updates with akalati

6

There are two plugins that can do this, one is free (which I can’t figure out how to use yet) and one is paid $4/mo or $25 once off.

1 Like
7

Did you end up using one or both of these? Curious if this addressed your issue or not. I’m in a similar use case.

8

The second one by ezcode works really well.