How to Upload Images with JavaScript ( The Ultimate Guide ) - Node.js - Part #2

Подписаться 15 тыс.

Просмотров 7 тыс.

50% 1

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.
Multer GitHub:
github.com/expressjs/multer
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

Опубликовано:

13 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@timokimo8206 Год назад

Great video 👍🏼

@codefoxx Год назад

Thanks 👍

@TheDanchickPro Год назад

good

@rubenreffell262 28 дней назад

when i typed in npm init it said there was an error and it couldn't find the string? please help

@andriagoodwin1640 5 месяцев назад

Hey, thank you so much for the video. It's helping a lot for part of a project I am doing for the bootcamp I'm in. One question, I am getting an error on this line of the JavaScript: "savedImages = JSON.parse('');" It seems to not like the code inside the quotes. I have been googling and googling but I can't seem to find any solution that will fit into the work I've already put into the project. Do you have any ideas of what could be happening or how to fix it? I'd really appreciate it.

@IvanFigueroa-st7zh 3 месяца назад

Hi Andria, I'm having the same problem. Please let me know if you've found a solution. Thanks in advance.

@lorenzomalvito8895 Год назад

i have a big problem... the button are not working, if I click it it doesn't make anything on google chrome with the inspector, when I click the upload button that its: (index):159 Uncaught ReferenceError: Cannot access 'formData' before initialization at sendQueuedImagesToServer ((index):159:34) at HTMLFormElement. ((index):155:17)

@codefoxx Год назад

That error means your trying to use a variable , in this case, formData, before you initiliazed it. Check the order of the functions and make sure they are in the same order as i have them. Also check if you initiliazed formData at the very beginning of the function as i did

@sbgaming6180 Год назад

Plz make a sneaker monitor for myntra

@ahmetkizil818 Год назад

How can I use this example on real server? When I throw it to server, on uploadin give me a message "Error: Not Found"

@codefoxx Год назад

Did you change the URL to the images coming from the server from localhost:3000 to the URL for your website? If it still doesnt work, your server provider perhaps may not allow access to the file system. For example, when i tried it with cyclic, it didnt let me either. In that case, you will need to wait for part 3 (or figure it out on your own)where i show you how to save the name of the image in a database and the actuall image file in AWS. Its guaranteed to work in a real server that way

@ahmetkizil818 Год назад

@@codefoxx No I didn't change localhost:3000 How can I do it? I dont know!

@ahmetkizil818 Год назад

And I use PHP server. Is it work on my server?

@pixel4229 Год назад

If I wanted to have another page on the site with another .html (.ejs i guess) file, how can i send the images from the server to that page instead?

@codefoxx Год назад

Easy, create a route for that page in the server.js file. Basically duplicate the first get route on this project but have it point to that page instead. Then in the ejs file for that route, you would display the image to that url instead of the home page. So, if your page was named "about.ejs", for example, you would use http:localhost:5000/about" for the url of the image tag within the displayImages function.

@pixel4229 Год назад

@@codefoxx I got it working now! Thank you very much! Great tutorial btw

@pixel4229 Год назад

@@codefoxx One more question actually! If i want to add some kind of tags to the images like 'landscape' and stuff like that, do I need a different way of saving or is it possible with this one?

@codefoxx Год назад

@@pixel4229 you would have to design it a little differently. You know how all were doing is uploading images? well, you would have to create an input field that allows them to add text as well. You would also need an object instead of an array that holds the images in the frontend, in that case. Or an array with lots of objects inside. You would also need another column in your database to save the tags. So , yea, it complicates stuff a bit but thats part of what youl be dealing with as a programmer

@codefoxx Год назад

@@pixel4229 you would need to learn how save images in a database as well. So you actually would need to watch part 3, before you attempted to add tags