React File Uploader With Express (Using React Hooks)

In this project we will build a full stack file upload with React and Express. We will construct the UI with a Bootstrap elements and make them function

Sponsor: DevMountain Bootcamp

Code:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

[amanjain]

hi Brad . Please help me . I tried this code but i am getting an error . After uploading the file it says

[rtorcato]

instead of ternary you can do: { uploadedFile && <div>Hey I'm uploaded</div>} . It's much cleaner than having to have the syntax returning null.

[irenajurasek]

In FileUpload in onSubmit method add the full url on this line:
Next steps in terminal and server.js:
1) install cors using npm: npm install cors --save
2) add these 2 lines in server.js:
const cors = require('cors')
app.use(cors())
Hope it helps and saves you some time :)

[skyewild]

Hey Brad, lil' help here. Once the file is uploaded is there a tutorial on how to save the asset id in a mongodb for future display reference? or?? another way to display video per user?

[shahmirjadoon]

Will you kindly make a video on how to upload files using REDUX ? Also needed progress bar while uploading a file.

[stefanmisic]

This doesnt work anymore. You'll be getting 404 error all the time (for file uploading). Instead pull his github repo and follow the tutorial using his repo config (his repo packages.json files etc)

[MarcoNanni]

Very usefull video thank you! But what about a multiple files upload ?

[alan]

Hi Brad. When can we expect to see an update of your mern course that you mentioned in a previouus video. Thanks

[rajnishtiwari]

whenever file is added to the upload folder, the page reloads. How to prevent this?

[rupeshmalpani]

Thanks Brad for this video. If i want to save the uploaded file in database(mongoose) instead of any folder inside public, then how can we do that. I have your MERN courses from udemy but i didnt find it there. Can you please guide me.

[ridl]

Oh, this tutorial is exactly what i needed couple weeks ago when I was doing my test-task. Anyway, I did it on my own. And Thank you Brad!
Also want to suggest you to make crash course on ESlint and similar stuff. Would be great, I think.

[danielfs]

Hey Brad instead of using "<Fragment></Fragment>" now you can use just "<> </>" without importing anything.

[IvoryEatsTheWorld]

Yes!! Thank you so much Brad, today i´m going to put it on practice. Greetings from Argentina!

[elad]

I cant get any images to show once uploaded. Uploading is perfect, but the image never shows in the html

[mariaceciliabenitezcasacci]

Can you help me Brad? it says res.data is undefined :(

[arturoreyesvital]

Hi Brad! I just wanted to tell you that, this is the second time you save my project. I'm creating an Online University since one year ago, and without your MERN Stack course in Udemy (which I started in January of 2019) my project would be dead since the last year. So many thanks for sharing your knowledge with us.

[omishan]

seems like after I upload a file it shows the name but then immediately refreshes, any idea how to fix that? I got the preventDefault in onSubmit, not sure why its doing this.

[crazycoder-gfls]

HI mate, can you please make videos on parallax websites advance version, the type of theme used news blogs like the BBC NEWS..thanks

[dhakkad_chora]

post 400 not found/uploads when i try to upload file

[vamsikrishnaN]

Hi, I followed along and things are working fine except one thing. Once I upload file things are good image is shown. But when I click upload again without selecting a new file then Page refreshes. In my OnSubmit I have added e.preventDefault(). so any ideas what's the issue ?