Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

ailsa wang
PLUS
ailsa wang
Courses Plus Student 1,791 Points

how to upload image in a webpack+react+express project?

i tried a lot to upload image into my webpack+react+express project, but failed everytime. the database is mongo and i use mongoose for connection. in the express main js file. i wrote: app.use(require('express-formidable')({ uploadDir: path.join(__dirname, '/public/img'), keepExtensions: true })); and in my react file, i also add encType="multipart/form-data" into the form. the funny thing is this: when i put encType="multipart/form-data" into the form, the project won't work and there is an error: Uncaught Error: _registerComponent(...): Target container is not a DOM element.(…) i googled this error and people say this is caused by js file not at bottom in html, but my js file is at the bottom. if i delete encType="multipart/form-data" from the form. everything works fine and i can find the pic info in mongo database. but there is no image uploaded to my project. is this an error with webpack or react? how to solve this problem!

Angelica Hart Lindh
Angelica Hart Lindh
19,465 Points

Please post your actual code and I can take a look. It's quite hard to understand the problem otherwise and try to replicate in order to debug.

1 Answer

ailsa wang
PLUS
ailsa wang
Courses Plus Student 1,791 Points

thank you! it's ok now. i've solved the problem.