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

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 ?

@sososo

worldoptimizer/HypeCookBook

4 Likes

:blush::+1: Thank you !!!

I’m really sorry, I have a question that I can’t resolve and that drives me crazy, on the 2 doc in attachments,

  • FileOK => I manage to reduce the size of the image on the third scene without problem
  • FileNo => if I reduce the size of the image on scene 2 it doesn’t work anymore and I don’t understand why.
    If you have any ideas to explain that, you are very knowledgeable :wink: Please :pray:FileOk.hype.zip (85.9 KB) FileNo.hype.zip (84.4 KB)