Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

214
Views
react axios trying to send both data object and image file but server wont read the file

Im trying to send from my react a data with a post and when i check the on the server side it reads the data object but wont let me get the image file. since its a project that im doing for study im not allowed to use multer this is what i get on the server console

{ id: null, description: 'hotel', destination: 'america', image: { '0': {} }, imageName: 'blabla', date: '2021-09-16', endDate: '2021-09-12', price: '1400', followers: null } (object information is fine) {}<--this is the imageData

notes: **i was trying sending each first and it was all good but when i want to send both of them with one request it doesnt read it. **i also tried to play with the requests parameters to see if i get something on the console but its not possible for me to read the file data.i dont know why...

this is the client side:


public add = async () => {
        const newVacation = new Vacation(
           // values of the vacations that are coming from inputs 
        )


        try {
          
            const imageData = new FormData();
            imageData.append("name", newVacation.imageName);
            imageData.append("image", newVacation.image[0]);
        
            // const imageResponse = await jwtAxios.post('http://localhost:4000/admin/addvacations', imageData)
            const response = await jwtAxios.post('http://localhost:4000/admin/addvacations', {
                reqImageData: imageData,
                reqNewVacation: newVacation  
            }, {
                headers: {
                    'Content-Type': 'multipart/form-data' 
    //making sure that it will know im sending few parameters and a file
                }
            })



        } catch (error) {
            console.log(error);

        } 

server side


router.post("/addvacations", async (request, response) => {
     try {
       
        const newVacation=request.body.reqNewVacation
       const addedvacation= await vacationLogic.addVacationAsync(newVacation);
        }
        catch (error) {
            response.status(500).send(error.message)
         }
        try{
            
        const name = request.body.reqImageData.name
        const image = request.files.image
        const absolutePath = path.join(__dirname, "..", "upload", image.name);
        
        await image.mv(absolutePath);
        // response.send(request.body);
        }
        // const errors=newvacation.validate();
        // if(errors){
        //     response.status(400).send(errors)
        // }
        
        

     catch (error) {
        response.status(500).send(error.message)
    }
});

Thank you!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!