Upload an image with a form and put this image on the scene

Hello,
how can i upload an image from a computer desktop or a mobile and then load it instead of the picture of the flower on the doc? (I gave an ID to the flower picture). Thank you very much in advance for your help !
Here is the hype document in attachementupload picture.hype.zip (204.3 KB)

I forgot to specify that the image would be uplaoded from a form (form symbol on my hype document)

When you say uploading… then you are talking about managing files on a server. If you only want to use it on the client side have a look at…

I also explored this for a game idea once with a dynamic webcam image taken in the first screen of the game and then using the image across scenes.

You can record data from an upload or a webcam and then replace a image in Hype on the fly by using the callback HypeResourceLoad

The callback would then return the data-URL instead of the regular URL. If you never heard about Hype Events… they are the JS version of the callbacks you see in the IDE and offer even more possibilities. Here is a simple example how to use them.

2 Likes

That’s exactly it: I want to use it on the client side. Thank you for this info, but how can I apply it to my example hype document and its form? (upload picture.hype.zip)

I don’t know about your example but here is something to start with…
Based on the example linked above.

DropboxFiles.hype.zip (17,6 KB)

Here is a version replacing images in Hype (although there is still the crop and drag step missing, in the example I just use a CSS class to contain and center it).
FileReplaceDropbox.hype.zip (50,8 KB)

This example still contains the “preview” option but that could also be removed. Another way would be to add your image to a persistent symbol and move that around. So, there is not only one way to Rome. :wink:

2 Likes

Thank you for this information. at the moment I can’t link it to my form (replace the drag and drop by a form) but I hope to find a way out :wink:

Was on the road. The attached file uses both … image preview (marked with//p in the code) by generating img tags but also the native Hype images are supported in the code. You decide what you want.

FileReplaceSelector.hype.zip (66,8 KB)

Here is a version of the Dropbox with native Hype image support only

FileReplaceDropboxOnlyHype.hype.zip (53,2 KB)

2 Likes

Cool !!! Thanks a lot !!!

1 Like

You’re welcome. If I or somebody else ever revisits this a version using croppie and a version using a webcam would be nice! Some helper and starting points to get you started:

1 Like

Hello Again, just a question to finalize the project :
how can I place a cross or the word “replace the photo” in the form if we chose the wrong visual: here, once the visual is chosen, we can not return back without reloading the page to choose an other picture. Thank you by advance !!! :slight_smile: FileReplaceSelector.hype.zip (66.8 KB)

FileReplaceSelectorWithDelete.hype.zip (69,7 KB)

It has a delete function now and also fires custom behavior events if you want to react in Hype to storing images etc.

1 Like

also when i want to delete the “preview” and i want to place 3 images to upload with the form, my document (in attachement) does not work at all :(, do you know how to proceed?FileReplaceSelectorTest1.hype.zip (99.9 KB)

I just uploaded a version… please check that.

Thank you for the “deleting” ! :slight_smile: if you have an idea for my last request : 3 pictures without the “preview” window (i had uploaded before my document in exemple)
:slight_smile:

It’s because you have been using an ID in your code. ID have to be unique… meaning when you duplicate your form you would need to use a class to select the form element. I’ll send you an example in a sec…

Thank you very much by advance ! :slight_smile:
i thought that if i put “Picture”, “Picture2”, and “Picture3”, in the form, that would be enough, I was wrong

Please check this file. As I got some stuff in my pipeline… that is all I can do for you now concerning support on this topic. I’ll probably clean the code and make it an extension soon. Feel free to support the Hype Cookbook project if you can/want/like!

FileReplaceSelectorWithDeleteMulti.hype.zip (91,9 KB)

3 Likes

Thank you very much !!! Where can i support hype cookbook project ?