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

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)

I am on the road. As I can’t see the code on my phone… reduce the size: What do you mean? Actual dimensions (width/height)? If that is the case… from the top of my head: That would require drawing the selected image(s) in a scaled manner into a canvas and using the canvas data instead. Would be a nice option if this is made into an extension. PS: Most old school Webapps do the resizing on the server as you can’t “trust” an user with an open size limit but having it on both sides could reduce upload bandwidth. I’ll look into what your actual problem is later and stop guessing now :slight_smile:

thank you very much professor !!! , I would wait until you are no longer on the road to get your answer :slight_smile:
In fact in my personal document, everything worked impeccably but when I wanted to reduce the symbol (in which was my replaced image, because downloaded before via the form in first step, like your examples on the scene number 1), everything worked impeccably, but when I made a reduced size of the symbol in scene number 2 (and it’s weird because it worked up to a 60% reduction, and below, it no longer took into account the downloaded image => i see the picture placehorder.png instead ). As this is a little similar to the example “FileNo.hype” in scene number 2 (even if the image is not in a symbol) I tell myself that by understanding what is going on there, I might be able to solve my problem of the reduced symbol in my doc

Not a professor…

I see now what your problem is… it wasn't what I was thinking about (canvas etc.). Your problem is Hype-Wizardry getting in the way. You need to uncheck the optimization of the placeholder.png in the resource panel.

2 Likes

Thank you so much !!!
I would never have found the solution without your help!