How to Upload Images with JavaScript ( The Ultimate Guide ) - JavaScript - Part #1
HTML-код
- Опубликовано: 6 июл 2024
- How to upload and preview images with JavaScript? This image uploading guide teaches you everything you need to know about uploading images with JavaScript. I broke the process down into three parts.
Part 1: How to upload and preview images on the frontend.
Part 2: How to save the images in a server file system with Node.js and Multer.
Part 3: How to save the images in a MySQL database / Amazon Web Services (AWS) S3.
Codepen for CSS:
codepen.io/miguelznunez/pen/G...
Prefer to read the ultimate JavaScript image uploading guide?
/ how-to-upload-and-disp...
Follow my blog:
/ miguelznunez
Like the intro to my video? Learn how to make one:
paykstrt.com/11298/66358
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez
Good video brother.
great video👍👍buddy
Yes I will do this too.
When you delete a file, maybe you can have the 'delete' button switch to a different colour and say 'update' instead. Regadless, this is awesome. Looking forward to the next videos
Good constructive criticism, Raddy. Would love to collab with you sometime in the future on some RUclips stuff
@@codefoxx I am up for it!
Awesome Tutorial, Thank you so much.
I noticed that after the "let queuedImagesArray = []," array you created, the remaining variables such as "savedForm, queuedForm, savedDiv etc." do not have the let, var or const keyword. I want to know if they are also part of the "queuedImageArray" or we can also create variable without using the "let, var or const" keyword.
Thank you
You can create a let, const, or var keyword for each of them if you'd like or you can do it the way I did it. The way I did it just avoids having to create a "let" keyword for each of them, so it basically just saves you from repeating yourself.
Thanks🌹
Absolutely
👍👍👍👍👍👍
I keep getting this error, and it doesn`t show any images.. Why it can happen? Arleady wasted hours trying to fix it..
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
at scripts.js:86:34
at Array.forEach ()
at displayImages (scripts.js:84:16)
at HTMLInputElement. (scripts.js:79:3)
It would be great content if you did not type all the code simultaneously. You should type a bunch of code and show us the result of it in the browser. But you are writing all the code at a time and showing us the final result. Which I don't think really helps the beginners.
soo lengthy!
Yep, thats what it takes though
@@codefoxx there are different methods still! That are short syntax and are easy to remember and use!
@@YashrajThakor06 im sure there probably is. Can you give me an example of a good one?