Search code examples
reactjsaxiosnext.jsmulter

Send Multiple Data With Axios


I have a problem , my problem is when i send multiple data with axios , the image in formdata dosen't send , but when i send only the formdata it works , if any know how to send multiple data ins axios just give me what's the solution

 const onSubmit = async (data) => {

        if(loading) return ;
        setLoading(true);

        const formData = new FormData();

        formData.append("image",image);
        
        
        let details = {
            name:data.name,
            image:formData,
            price:data.price,
            description:convertToRaw(editorState.getCurrentContent()).blocks[0].text,   
            qty:data.qty,
            promo:data.oldPrice,
            categorie:data.categorie,
            // images:[image,image2,image3,image4]
        }
        try{
            let config = {
                headers:{
                    authorization:"Authorization Token "+jwt,
                    "Accept": "application/json",
                    "Content-Type": "multipart/form-data",
                }
            }
           await axios.post('../../api/products',details,config)
                      .then(res => console.log(res.data))
                      .then(setLoading(false))
                      .catch(err => console.log(err))
        }catch(err){
            console.log(err);
        }
    }

Solution

  • I would do something like this while uploading with images:

     const onSubmit = async (data) => {
    
            if(loading) return ;
            setLoading(true);
    
            const formData = new FormData();
    
            formData.append("image",image);
            
            
            let details = {
                name:data.name,
                price:data.price,
                description:convertToRaw(editorState.getCurrentContent()).blocks[0].text,   
                qty:data.qty,
                promo:data.oldPrice,
                categorie:data.categorie
            }
    
            for (let key in details) {
                formData.append(key, details[key]);
            }
    
            try{
                let config = {
                    headers:{
                        authorization:"Authorization Token "+jwt,
                        "Content-Type": "multipart/form-data",
                    }
                }
               await axios.post('../../api/products',formData ,config)
                          .then(res => console.log(res.data))
                          .then(setLoading(false))
                          .catch(err => console.log(err))
            }catch(err){
                console.log(err);
            }
        }