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

[@rubenreffell262]

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

[@timokimo8206]

Great video 👍🏼

[@codefoxx]

Thanks 👍

[@andriagoodwin1640]

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]

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

[@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

[@sbgaming6180]

Plz make a sneaker monitor for myntra

[@TheDanchickPro]

good