Articles

HTML

<div className="form-group">
                        <input
                          type="file"
                          className="form-control"
                          onChange={uploadMultipleFiles}
                          multiple
                        />
                      </div>
<div className="form-group multi-preview">
                   
                        {
                         
                        (file)
                          .map ((url,i) => (
                            <React.Fragment   key={i} >
                      {console.log("URl is11"+i)}       
{console.log("URl is"+url)}   
                            <img
                              className="product-image-preview-form"
                              key={i} 
                              src={url}
                              alt="..."
                            />
                            </React.Fragment>
                            
                          ))}
                      </div>

STATE

const [fileObj, setfileObj] = React.useState ([]);
  const [fileArray, setfileArray] = React.useState ([]);
  const [file, setfile] = React.useState ([]);

Functions

let uploadMultipleFiles = async e => {
   
    fileObj.push (e.target.files);
    
    for (let i = 0; i < fileObj[0].length; i++) {
     file.push (URL.createObjectURL (fileObj[0][i]));
      
    } 
    setfile ([...file]);



    for (let i = 0; i < fileObj[0].length; i++) {
    fileArray.push (fileObj[0][i]);
  }
  };

On Submit

 let handleSubmit = async e => {
    e.preventDefault ();
    console.log ('product for id');
    console.log (product);

    

    if (id) {
      let imgFromObj = new FormData ();
    const config = {
      headers: {'content-type': 'multipart/form-data'},
    };
    
    for (let i = 0; i < fileArray.length; i++) {
      console.log("inside array length"); 
      console.log(fileArray[i]); 
      if(typeof fileArray[i] == "string"){
        var blob = dataURItoBlob(fileArray[i]);
        imgFromObj.append ('imageData', fileArray[i]);     
      }else{ 
        imgFromObj.append ('imageData', fileArray[i]);
      }

      //console.log(URL.createObjectURL(dataURItoBlob(fileArray[i]))); 
      
    }
    console.log(imgFromObj); 
    imgFromObj.append ('product', JSON.stringify (product));
      let res = await putReq (
        'http://localhost:4000/api/v1/products/edit',
        imgFromObj,
        config, 
      );
      toast (res.message); 
      setProduct (
       
          for (let item in res.data) {
            if (item == 'price') {
              for (let item2 in res.data.price) {
                draft[item][item2] = res.data.price[item2];
              }
            } else if (item == 'productImgGallery') {
              
              let arr1 = [];
              for(let i = 0;i<res.data[item].length;i++ ){
               
                arr1.push(res.data[item][i]['url']);
              } 
              setfile (arr1);setfileArray(arr1);  
            } else {
              draft[item] = res.data[item];
            }
          }
        })
      ); 
    } 
  };