Any tips to improve photo upload speed?

[mvandervoort]

Hi all,

Any pointers to help improve the upload speed for photos? I added a loading animation so users didn’t stray but am finding that it just takes too long to be effective in my instance. Is there anything I can do (eg. reduce file size - noting they are coming straight from mobile camera)?

Thanks,

Mat

[sridharan.s]

Yes, load smaller resolution photos. One way to do this is to save user photos in multiple resolutions so that you can use the best one for any particular use case.

Best of luck!

[mvandervoort]

Thanks @sridharan.s but I think you may have confused loading pictures on the app as opposed to uploading pictures direct from computer or phone/camera?

I was hoping there is a setting to reduce the time taken to upload photo’s using the photo uploader? I can see the field, limit image size before upload but when I tested this it didn’t seem to speed things up noticeably.

I may have misinterpreted your assistance though, so thanks anyway!

[sridharan.s]

Oops, my bad.

I don’t know how to speed up the actually storing of the photo. One trick we’ve used elsewhere in our app, and might be indirectly applicable here, is to run any slow workflows in the API so that the user can proceed to the next step while our app deals with them in the background.

I don’t know if there’s a corollary for this. If I recall correctly, uploading images isn’t run as a workflow so you wouldn’t be able to move it to the API. Perhaps there’s a way to put this as one of the first steps on a page and then hide it from users while they complete the next portion of the page, and then set it to store in your database in the background. Of course, if you’re using mobile, there may not be much other content on the page so you could re-work it so that multiple pages (from a user POV) are, in fact, a single Bubble page with different views (see one-page app concept). Then, move them from the upload image “page” to the next page almost immediately while continuing to upload and then store the image in the background.

Not a simple solution for sure, but if it’s critical to your UX you may want to try something like this. Two important points I should highlight:

• Adding complexity like this may slow down future development velocity on related features since the page gets more complex quite quickly.
• When running processes in the background, you may want to run validation on the front-end since Bubble’s validation won’t tell you there’s something wrong until the user is already past that portion of the app, and sometimes notifying them that late doesn’t work from a UX point of view. I don’t know whether this is applicable to the image uploader though – maybe just for max file size or file-type constraints. Then again, I don’t know whether there’s a way within Bubble to validate this on this UI.

Best of luck!
Scott

[mvandervoort]

Thanks Scott for providing some suggestions. I am using a one page app (with multiple states/visibility ‘pages’) like you have described so I will consider if I can have it as a background process.

Cheers,

Mat