# Javascript to bubble with images **URL:** \ **Category:** Plugins\ **Created:** [July 18, 2017, 5:52pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697 "2017-07-18T17:52:45Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![aliandrihab](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aliandrihab/32/18281_2.png) [@aliandrihab](https://forum.bubble.io/u/aliandrihab)\ **Post date:** [July 18, 2017, 5:52pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/1 "2017-07-18T17:52:45Z")
Hello all, This is in regards to the Javascript to Bubble plugin by @mishav . I’m trying to use it to downsize an image BEFORE upload and found some neat code to do it. Now I’m trying to pass this back to bubble using the method explained in the toolbox. To simplify; i created a [editor](https://bubble.io/page?type=page&name=imagebubblejs&id=trystuff&tab=tabs-1) and [Preview](https://trystuff.bubbleapps.io/version-test/imagebubblejs?debug_mode=true) page where you upload an image, and a simple code to pass it using bubble\_fn\_1… It’s not working; which I suspect has something to do with the way i’m passing the image into the bubble\_fn\_1(XXX) Your help is greatly appreciated. A ---
**Author:** ![mishav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mishav/32/6420_2.png) [@mishav](https://forum.bubble.io/u/mishav)\ **Post date:** [July 19, 2017, 2:10pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/2 "2017-07-19T14:10:11Z")
If you look in the browser console, there is a syntax error … this is because the dynamic value passes the url of the file uploaded by the file uploader, and it needs quoting before sending to bubble. fixed now. Another issue with this is that the image uploader is uploading the image to S3 before giving up its value as a url. To upload the image after doing some processing on it, you’d need to access the file upload function from the plugin editor, like the Croppie plugin does, or a POST call to a bubble endpoint. good luck ---
**Author:** ![aliandrihab](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aliandrihab/32/18281_2.png) [@aliandrihab](https://forum.bubble.io/u/aliandrihab)\ **Post date:** [July 19, 2017, 7:45pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/3 "2017-07-19T19:45:02Z")
Thanks a lot for the help. So basically i really can’t implement a resize before upload because i will need to pass a url to the bubble\_fn anyways… Do you know of a way that I would be able to do this? My mobile app is almost unusable with how long it takes to upload an image ---
**Author:** ![mishav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mishav/32/6420_2.png) [@mishav](https://forum.bubble.io/u/mishav)\ **Post date:** [July 20, 2017, 5:55am UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/4 "2017-07-20T05:55:59Z")
> [@aliandrihab](#): > > i really can’t implement a resize before upload You can, but you need to use different tools. The sequence, with suggested tools … 1 . Browse file on device, or accept a dropped file. [Custom javascript] 2 . Read the image file from the device into the browser. [Custom javascript] 3 . Resize the image. [Custom javascript] 4 . Upload the image to Bubble’s S3 storage. [Bubble custom plugin element, or custom javascript ajax call to a Bubble API endpoint] 5 . Save the uploaded image location into Bubble’s database. [Workflow action] Bubble’s image uploader element does steps 1,2, and 4, leaving no room for doing step 3. The “Croppie” plugin does this, plus user zooming and cropping, perhaps it is close enough to your requirements? ---
**Author:** ![aliandrihab](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aliandrihab/32/18281_2.png) [@aliandrihab](https://forum.bubble.io/u/aliandrihab)\ **Post date:** [July 20, 2017, 3:35pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/5 "2017-07-20T15:35:39Z")
great insight. thank you! I tried to do it here [Croppie try](https://bubble.io/page?type=page&name=croppie&id=trystuff&tab=tabs-1) I looked at the example you posted in another forum and you seem to be using a state which I really don’t know why. Also, the same seems to be in two steps. One is “save a croppie” and the other “when croppie is saved” Is it possible to do it all in one workflow? **EDIT:** the attached DOES work… but only if i move the picture a little… I’m just trying to use croppie to downsize an image… so the user won’t even see the preview. Is this still possible? EDIT2: Nevermind! it works: this in the forum helped (thanks @mishav) > The “Save” workflow action tells the Croppie element to start the upload of the picture to Bubble’s amazon S3. This happens asynchronously, i.e. the workflow doesn’t wait for the upload to finish. When it has finished, Croppie triggers an event “saved”, at which time you can pick up the S3’s URL… ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [February 7, 2018, 6:47pm UTC](https://forum.bubble.io/t/javascript-to-bubble-with-images/15697/6 "2018-02-07T18:47:54Z")
Hey @aliandrihab, could you share the code you used for this?