JavaScript - How to Upload and Display Multiple Images (Updated version in the description)

Learn how to upload and display multiple images with JavaScript.
Updated version:
• How to Upload Images w...
Sponsor me on GitHub!
github.com/spo...
Follow my blog:
/ miguelznunez
Email : [e-mail]
Medium : / miguelznunez
Codepen : codepen.io/mig...
GitHub : github.com/mig...

[@cristalmarie8450]

I value the content , thanks!
Helpful resource!
#codefoxx

[@IbukunOyewole-lp9le]

Thank you so much for the content............impressively valuable
May I know how i can upload videos through the same method, would be waiting for your response

[@zachfenton608]

Wonderful explaniation, would like to see how to save it to the back end.

[@guylhermef1219]

im doing similiar, but i want remove just the clicked img. can you help with this?

[@codefoxx]

Sure, watch my most recent video

[@davebudah]

This sooo cool, thank you.

[@emmanueladu-gyamfi5136]

this work well but the more images i add, the images dont maintain their width and they shrink and get cramped up, can you please help

[@codefoxx]

Try adding flex-wrap:wrap ; in the container that holds all of the images. Let me know of that fixes the problem

[@emmanueladu-gyamfi5136]

@@codefoxx nope, it doesn’t

[@codefoxx]

@@emmanueladu-gyamfi5136 what other properties are you using in the container that is holding all of your images?

[@emmanueladu-gyamfi5136]

@@codefoxx display:flex;
Margin-top:-60px;
Margin-left:70px;
Height:65px;
Background-color:yellow;
Overflow-x:scroll;
Overflow-y:hidden;

[@codefoxx]

@@emmanueladu-gyamfi5136 it appears you want the user to be able to scroll left to see the images since you have overflowx auto. To test this , I used a width of 600px and overflowx: auto on the #result container with the exact code I used in this tutorial and its working just fine for me

[@truonggiangvo21]

If I create an array and push them in there to save in database, it doesnt work, pls hepl

[@codefoxx]

Look in description for the complete version

[@truonggiangvo21]

@@codefoxx I find out how it work, thank u

[@victorvivia529]

Thanks! It works now. How could I add some icon with an "X" below each image imaging I made a mistake and now I want to delete any of them...?

[@sixtusushahemba9419]

Very nice you did explained everything explicitly. Well done! It would be really great if you can make another one that the images could be uploaded to a database and as well be deleted when the user want to delete them. Looking forward for it, thank you so much really enjoy the tutorial.

[@leinardrapiza2224]

It works, but the image is not showing. Why tho?

[@georgekimagut225]

Thanks so much for the help man. Good work

[@ultrAbdu]

hi i am searching for something like that, but i want to upload the pictures into my website and they should stay there, how can i do it?
so i want to click upload, choose images from desktop and the images should be visible in my website.

[@ultrAbdu]

i do not want to manually upload them by code with ...

[@ako4435]

Ty very simplified and clearly explained.

[@igwanwan_dagoat1523]

Hi, Is it okay to use this code for business purposes?

[@codefoxx]

Sure, I dont see why not

[@igwanwan_dagoat1523]

@@codefoxx thank you sir

[@tomasbokor4440]

after using picFile.name, i get undefined, other than that, really helpful video, thx