To Dos

1. Uploading file into AWS Server

< Reference Link >
https://medium.com/@imranhsayed/file-or-image-uploads-on-amazon-web-services-aws-using-react-node-and-express-js-aws-sdk-252742286162

Specific Detail: I want to upload file to specific folder in Bucket, rather than saving it directly into the Bucket

< Reference Link>
https://stackoverrun.com/ko/q/12100215

Pb : MulterError: Unexpected field

This is because the "key" is different from what we set in the "SingleUpload"

< Reference Link >
https://m.blog.naver.com/PostView.nhn?blogId=pjt3591oo&logNo=220517017431&proxyReferer=https:%2F%2Fwww.google.com%2F

2. Finished Uploading to AWS Server, Want to update info in DB

As you see, I succeeded uploading image into Server,
What I want to do now is, get the url and update image url of user

router.post('/api/users/mypage',function( req, res){

    var x_auth = req.cookies.x_auth;
    const { email } = x_auth;


    // singleUpload라는 function을 제공한다 
    singleUpload( req, res, function( err ){   

        console.log("Request for uploading image");
        
        if(err){
            console.log("Error during uploading image");
            console.log(err)
            
            return res.status(422).send({ errors : [ { title : 'File Upload Error', detail : err.message }]});
        }

        console.log(req.file.location)
        
        // location에는 url of our image 이 들어있을 것이다 
        console.log("Updating image url in MongoDb")

            //x-auth token으로 찾아서 update
            connection.db.collection("users", function(err, collection){
                collection.updateOne({'token':x_auth},{'profile_img':req.file.location});
                if(err)
                {
                    console.log("Error happened")
                    console.log(err)
                    res.status(404)
                }
                console.log("Image update success")
        })
        // return res.json({ 'imageUrl' : req.file.location})
    });   
})

Pb : (node:11024) UnhandledPromiseRejectionWarning: MongoError: the update operation document must contain atomic operators.

connection.db.collection("users", function(err, collection){
                collection.updateOne({'token':x_auth},{$set : {'profile_img':req.file.location} },{new:true});
                if(err)
                {
                    console.log("Error happened")
                    console.log(err)
                    res.status(404)
                }
                console.log("Image update success")
        })

Above line means, you find row that has token "x_auth", and replace "profile_img" to req.file.location

{new:true} is necessary to return new data

3. < 비동기(Synchronous) > Want to refresh the page after the post change is reflected

That is, I want to apply the img change and refresh the page with changed image shown to the client

In order to do this, I have to send response from the server.

singleUpload( req, res, function( err ){   

        console.log("Request for uploading image");
        
        if(err){
            console.log("Error during uploading image");
            console.log(err)
            
            return res.status(422).send({ errors : [ { title : 'File Upload Error', detail : err.message }]});
        }

        console.log(req.file.location)
        
        // location에는 url of our image 이 들어있을 것이다 
        console.log("Updating image url in MongoDb")

            //x-auth token으로 찾아서 update
            connection.db.collection("users", function(err, collection){
                collection.updateOne({'token':x_auth},{$set : {'profile_img':req.file.location} },{new:true});
                if(err)
                {
                    console.log("Error happened")
                    console.log(err)
                    res.status(404)
                }
                console.log("Image update success")
            
                res.redirect(req.originalUrl)
        })
    });   
    

You have to look carefully on code

res.redirect(req.originalUrl)

If you put above code one line below,

singleUpload( req, res, function( err ){   

        console.log("Request for uploading image");
        
        if(err){
            console.log("Error during uploading image");
            console.log(err)
            
            return res.status(422).send({ errors : [ { title : 'File Upload Error', detail : err.message }]});
        }

        console.log(req.file.location)
        
        // location에는 url of our image 이 들어있을 것이다 
        console.log("Updating image url in MongoDb")

            //x-auth token으로 찾아서 update
            connection.db.collection("users", function(err, collection){
                collection.updateOne({'token':x_auth},{$set : {'profile_img':req.file.location} },{new:true});
                if(err)
                {
                    console.log("Error happened")
                    console.log(err)
                    res.status(404)
                }
                console.log("Image update success")
           
        })
        res.redirect(req.originalUrl)
    });  

The pages is refreshed before the change is applied,
Why?

Server Code works in Asynchronous way,
which means, the code are run at the same time, rather that in order,

That's why page is redirected prior to change of image, since change of image takes more time to be completed

4. Html a href not working

even if I click " 같이 추장께 ", " Search ", "My Space"

It was not working

1st. trial : revising "z-index"

After searching the Internet,
I found that, z-index might disturb "href" and prevent it from appropriate click,
but, This was not the case with my html
becuse, the z-index was prioritized on the "header"

2nd trial: checked the JS

Solution: removing "e.prevent.Default"