Sending image files from back-end to front-end

[zanabilis]

I’m having difficulty figuring out how to send an image file from my express back-end to my front-end react application. It’s a chat app, where the user can upload an image as a profile picture, and then can send messages in chat with socket io, with their profile picture displaying on each message. The app uploads the images fine, but I don’t understand how to receive the image file on my front-end. Using the blob format doesn’t seem to work, as the user that uploads the file can see their profile picture, but is unable to see others’ pictures.
My back-end code is here, which appears to be fine. It sends the image through the get route.

app.get("/profilePic",async(req,res)=>{
        userModel.findOne({
            username:req.session.user.username
        },(err,data)=>{
            if(err){
                throw err;
            }
            //checks if mongodb has link to the profile picture
            if(data.profileImg){
                console.log(data.profileImg);
                res.sendFile(data.profileImg,{root:"."});
                console.log("sent");
            }
            else{
                res.json({status:"no profile picture found"})
            }
        })
    })

Here’s my front-end code on react. It converts the image into blob, and displays it. However, this blob link cannot be accessed by other clients. Is there another format in which I can emit this image data to other clients?

Axios.get("http://192.168.1.192:5000/profilePic",{responseType:'blob'}).then((response)=>{
      console.log(response.data);
      let imgUrl=URL.createObjectURL(response.data);
      setProfilePic(imgUrl);
      console.log(imgUrl);
    })
  },[])

[lasjorg]

How exactly are you saving the image? Where and how is it stored? I’d suggest saving the image to the server or a CDN and just having a path/name saved in the DB.

If you search for “MERN stack file upload” you should get a bunch of examples. A lot of them will be using Multer.

[zanabilis]

My image files are saved in multer, and are stored in an uploads folder in src. That part is fine, as I can clearly see the files in my folder. After a lot of time spent trying to figure out the problem, it seems as though blob only saves locally to the browser. I found out that a way to send back the image data could be done through base64 encoding by using the buffer library. I’m not really sure if that’s the right way to go about the problem though, but it’s working so far, as the application is able to send profile images as usual.

How I’m uploading files:

app.post("/profilePic",upload.single('profilePic'),async(req,res)=>{
        //updates entry in mongo with a req file path to the photo
        userModel.updateOne(
            {username:req.session.user.username},
            {$set:{profileImg:req.file.path}},(err,data)=>{
                if(err){
                    console.log(err);
                    throw err;
                }
            }
        )
    })

My route for getting the picture:

app.get("/profilePic",async(req,res)=>{
        if(!req.session.user.username){
            res.json({status:"no session present"})
        }
        else{
            //finds entry in mongodb for user w/ session username
            userModel.findOne({
                username:req.session.user.username
            },(err,data)=>{
                if(err){
                    throw err;
                }
                //checks if mongodb has link to the profile picture
                if(data.profileImg){
                    //sends the file through the path designated by the user's entry
                    res.sendFile(data.profileImg,{root:"."});
                }
                else{
                    res.json({status:"no profile picture found"})
                }
            })
        }
    })

Here’s the solution that I managed to come up with. The response type is in array buffer form, which is then converted to base 64. The profile picture is then set to this encoded value, and then can be converted into image form:

Axios.get("http://192.168.1.192:5000/profilePic",{responseType:'arraybuffer'}).then((response)=>{
      const buffer = Buffer.from(response.data,'binary').toString('base64');
      setProfilePic(buffer);
    })
  },[])