Unable to send files to the server through the front end in the MERN project

Question

I've been trying to send an image file to the server from the React frontend, but the file isn't being sent:

This is my front-end code:

useEffect(()=>{
        const getImage=async ()=>{
            
            if(file){
              
              const data=new FormData();
              data.append("name",file.name);
              data.append("file",file);
              
              
              const response=await API.uploadFile(data);
             

              post.picture=response.data;

            }
        }
        getImage();
        
    },[file])

file is the React state that contains the uploaded file

In the onClick event, I updated the file status using the setFile function:

<label htmlFor="fileInput">
    <Add fontSize="large" color="action"/>
</label>
       
<input
    type="file"
    id="fileInput"
    style={{display:"none"}}
    onChange={(e)=>{
    setFile(e.target.files[0])
                
   }
  }
              
/>

This is my backend endpoint:

router.post("/file/upload",upload.single("file"),uploadImage);

I am using multer middleware:

import multer from "multer";
import {GridFsStorage} from "multer-gridfs-storage";
import dotenv from "dotenv";

dotenv.config();

const username=process.env.DB_USERNAME;
const password=process.env.DB_PASSWORD;


//We will use the component GridFsStorage of multer-gridfs-storage to store images/files

const storage=new GridFsStorage({
    //The URL of the database to which the file will be uploaded
    url:`mongodb srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?
    retryWrites=true&w=majority`,
    options:{useNewUrlParser:true},
    file:(request,file) => {
        //The file types we will accept
        const match=["image/png","image/jpg,image/jpeg"];
        
        
        if(match.indexOf(file.memeType)===-1){
            return `${Date.now()}-blog-${file.originalname}`;
        }
         
        //If the file extension matches
        return {
            bucketName:"photos",
            filename:`${Date.now()}-blog-${file.originalname}`
        }
    }
})
export default multer({storage});

This is the callback function

const url="http://localhost:8000";

export const uploadImage=(request,response)=>{
   
    
    if(!request.file){
        return response.status(404).json({msg:"file not found"})
    }
    
    
    const imageUrl=`${url}/file/${request.file.filename}`;
    
    return response.status(200).json({imageUrl});

}

Since I am making API calls via axios interceptor, I also updated the header section This is my header section:

headers:{
        "Accept": "application/json,form-data",
        "Content-Type":"application/json",
        // 'Content-Type': 'multipart/form-data'
        // "Content-Type": "'application/x-www-form-urlencoded'"
    }

Whenever I try to upload a file, it throws an error, file not found

The request has been sent and the file name is normal, but the file has not been sent

Answer 1

Your code has several errors. Fix these errors and maybe the problem will be solved:

replace:

if (match.indexOf(file.memeType) === -1) {
to
if (match.indexOf(file.mimetype) === -1) {

replace:

const match=["image/png","image/jpg,image/jpeg"];

to     
const match = ["image/png", "image/jpg", "image/jpeg"];

Change status code:

if (!request.file) {
    return response.status(400).json({ msg: "File not received" });
}

Replace the header with:

headers: {
    "Accept": "application/json",
    "Content-Type": "multipart/form-data"
}