Failed to upload and save the image

[mail2mz]

Upload the product works, except for saving the image. I am able to connect to the database and upload the product. I am not sure the difference between upload image and upload a product. Is there any fix not being merged to this code or anything else(other than mongoURI) needs to be modified?

Thanks for any help!

[KevinLu]

When you upload the product, you are saving the product information in MongoDB.

When you upload the image, you are saving the image file on your computer (or wherever your server is hosted).

Instead of saving the image on my computer/server, I choose to upload it onto AWS S3 instead.

You can easily achieve this by changing the multer code and using the multer-s3 package on NPM.

[mail2mz]

Thanks Kevin.

I am new to web development, would you please provide more details on how to change the multer code?

[KevinLu]

Can you provide your current code? I can give you some suggestions once I see it.

[mail2mz]

I downloaded the zip file from this project, ran the steps indicated as youtube:

npm install; cd client; npm install; ...Add the mongoURI in the dev.js npm run dev

Here is the exception when I tried to upload the image file:

[1] Compiled with warnings. [1] [1] ./src/components/views/CartPage/CartPage.js [1] Line 10: 'Axios' is defined but never used no-unused-vars [1] Line 35: React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps [1] Line 40: Expected to return a value in arrow function array-callback-return [1] [1] ./src/components/views/DetailProductPage/Sections/ProductImage.js [1] Line 11: Expected to return a value in arrow function array-callback-return [1] [1] ./src/components/views/LandingPage/LandingPage.js [1] Line 16: 'setLimit' is assigned a value but never used no-unused-vars [1] Line 34: React Hook useEffect has missing dependencies: 'Limit', 'Skip', and 'getProducts'. Either include them or remove the dependency array react-hooks/exhaustive-deps [1] [1] ./src/components/views/DetailProductPage/DetailProductPage.js [1] Line 19: React Hook useEffect has a missing dependency: 'productId'. Either include it or remove the dependency array react-hooks/exhaustive-deps [1] [1] ./src/components/views/UploadProductPage/UploadProductPage.js [1] Line 2: 'message' is defined but never used no-unused-vars [1] Line 2: 'Icon' is defined but never used no-unused-vars [1] [1] ./src/components/views/LoginPage/LoginPage.js [1] Line 74: 'dirty' is assigned a value but never used no-unused-vars [1] Line 79: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] ./src/components/views/RegisterPage/RegisterPage.js [1] Line 92: 'dirty' is assigned a value but never used no-unused-vars [1] Line 97: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] Search for the keywords to learn more about each warning. [1] To ignore, add // eslint-disable-next-line to the line before. [1] [0] {} [0] {}

[KevinLu]

Those are just warnings, not errors. Open your Chrome console and try to upload the image, see what error it outputs there. Usually it is a status code 400 error returned by the server.

Also, did you setup the uploads folder where your images will be uploaded to?

[mail2mz]

Here is no error in the console. I attached the screenshot.(https://user-images.githubusercontent.com/41298556/83567561-bf30b200-a4ef-11ea-8e78-4a6ef23cf635.jpg)

I did not setup any uploads folder. I just pressed the PLUS button, and it open the windows explore, allowing me to pick a file to upload.

BTW, I am using WSL on win10, not Mac. I am not sure if that may cause any issue.

[KevinLu]

Can you find the code that launches the error?

[mail2mz]

It should be the following code in server\routes\product.js, which is provided by this project from github. I did not touch this file.

==================================

var upload = multer({ storage: storage }).single("file")

//================================= // Product //=================================

router.post("/uploadImage", auth, (req, res) => {

upload(req, res, err => {
    if (err) {
        return res.json({ success: false, err })
    }
    return res.json({ success: true, image: res.req.file.path, fileName: res.req.file.filename })
})

});

[KevinLu]

Can you console log the err, just put console.log(err) inside the if statement.

[mail2mz]

It is file not found. As I mentioned early, I don't know where to setup the path. The App triggered Windows Explore and allowed me to go through folders, pick up JPG file.

(https://user-images.githubusercontent.com/41298556/83586361-35e2a500-a51a-11ea-88c5-7d66d145e95d.jpg)

[KevinLu]

Just create a folder called uploads in the root directory.

[mail2mz]

Fixed by add the uploads folder. Thanks a lot!