How to access the value of bubble element in javascript

Questions
1

hello guys, i want to run a javascript code when a button is clicked, now i have to access the value of the pictureuploader, so that i can resize the image if it meets a particular specification, please how can i go about it. i have already installed the toolbox plugin and i know where to put the code, i cant just figure out how to get the image from the pictureuploader element . thanks

2

You can insert “Dynamic Data” into the same space you write your code:

02
021010Ă—662 43.6 KB

38
38706Ă—642 34.2 KB

2 Likes
3

thanks alot will try that now

4

so after manipulating the dynamic value how do in javascript how do i save back the value to the element

5

You use a “Javascript to Bubble” element. Here’s post that explains just that:

1 Like
6

@julienallard1 please can you give me a syntax on how to do this ?
let say am having a pictureupload element and i want to get the image and resize the image, this is a snapshot of the code

var img = new image()
   img = pictureuploader.value
  var imgh = img. height
var imgw = img.width
 
var maxh = 400
var maxw = 270

 if(imgh > maxh)
{
    imgh = maxh

}

will something like this work?

7 
var img = new Image();
img.src = 'PictureUploader's value's URL';

if (img.height > 400) {
    img.height = 400;
}

Don’t forget semicolons and a capital to image()

8

thanks alot really appreciate, but how to i save the new image height.

9

If you want to resize for display purpose, then the code I gave you is fine. If it’s to reduce file size, then you need some action that downloads the file, resize it and upload it back.

I’ve never done it, I don’t know how…

10

okay thanks, just want to resize before uploading it to the database

11

The thing is that the Picture Uploader element saves the picture on the server directly since you can access to “pictureuploader’s value’s URL”.

My guess would be that you find (or build) your own picture uploader that you could integrate to your page with a HTML element. With a more customizable picture uploader module, you could manipulate the image on the client side before passing it to Bubble to save in the database.

12

Use doka.

13

Thanks but it is expensive am on a low budget for now.