How to set up a widget to be ready for user to load their own images

My goal for the following file is to, when exported as an embedded widget, be interactive as such that when the user clicks on the “Click to load image” they will be able to load images from either their own computer or using an online link.

My goal beyond this would be to add some basic scalability to the images so they can make them fit the dimensions of the placeholder I put there aesthetically.

loadImage.zip (9.7 KB)

1 Like

There’s no built-in ways to do this, but you should be able to do it using the FileReader JavaScript API:

I haven’t used it, but I assume there’s also ways to convert the file contents to an img data URL.

1 Like

I wrote a couple of how to do this within a Hype document, See

and

A slightly more in-depth one

The same method applies to other types of files like images

2 Likes

Here are two adaptions from the above.

One uses createObjectUR()

Local Image Loader createObjectUR .hype.zip (17.6 KB)

The other

One uses FileReader()

Local Image Loader via FileReader.hype.zip (17.9 KB)

4 Likes

Awesome! Thank you! Is there anyway to add some custom scalability to the placed image, like all the social networks do in customizing user avatars/profile icons/pictures?

Search google for filereader scale image canvas This looks like how people do this.

1 Like

Also, how might one use the drag and drop interface instead (with optional upload button)… in place of exactly where the image will be uploaded, so that once the image is uploaded, it disappears/is rather replaced?

Using the drag and drop section from this tutorial,

Local Image Loader createObjectURL_dragdrop .hype.zip (27.3 KB)

You will need to refine it to your needs.

4 Likes

Using your FileReader example… would there be just slight changes needed in the “preview.style.background…” section in order to implement the resize/scale/crop feature?

See How to set up a widget to be ready for user to load their own images