CODEWITHSUNDEEP
reactjsantd
J H
J H

Reputation: 37

React Ant Design multiple files upload doesn't work

I'm in the process of sending multiple files from "React.js" by formData.append() to a backend.

At the backend(Spring boot), I was able to see that multiple files were saved well with postman.

The problem occurred in React.

(I'm using "Ant Design" that is React UI Library.)

Below is the source that append files to formdata with extra data.

const formData = new FormData();
formData.append('webtoonId', this.state.selectedToonId);
formData.append('epiTitle', this.state.epiTitle);
formData.append('eFile', this.state.thumbnail[0].originFileObj);
for( let i = 0; i< this.state.mains.length ; i++){
    formData.append('mFiles', this.state.mains[i].originFileObj);
}
uploadEpi(formData)

uploadEpi() is POST API.

Below is about state.

this.state = {
    toons: [],
    epiTitle :'',
    thumbnail : [],
    mains : [],
    selectedToonID : ''
}

When I submit, Text and single file are stored in the DB normally, but only multiple files cannot be saved.

There was no error. Just multiple files didn't be saved.

The state "mains" is configured as shown below.
enter image description here



I guess it's because I'm using Ant Design incorrectly.
(Ant Design : https://ant.design/components/upload/)

Why I guessed so, because when I add multiple attribute to <Dragger> like below,

<Dragger onChange={this.onChangeMain} beforeUpload={() => false} multiple={true}>

the state "mains" multiple files became undefined.

Below is onChange={this.onChangeMain}

onChangeMain=({ fileList })=> {
    this.setState({ mains : fileList }, function(){
        console.log(this.state)
    });
}



The bottom line is, I want to know how to upload multiple files through <Upload> (or <Dragger>) in "React Ant Design."


I don't know what should I do.

this is my github about this project.

I'd appreciate with your help. thx.

Upvotes: 1

Views: 9998

Answers (3)

Italo Guilherme
Italo Guilherme

Reputation: 11

const [loading, setLoading] = useState<boolean>(false);
  const [fileList, setFileList] = useState<any[]>([]);
  const [/* fileListBase64 */, setFileListBase64] = useState<any[]>([]);


const propsUpload = {
  onRemove: (file:any) => {
      const index = fileList.indexOf(file);
      const newFileList:any = fileList.slice();
      newFileList.splice(index, 1);

      return setFileList(newFileList)
  },
  beforeUpload: (file:any) => {
    setFileList([...fileList, file]); 
    return false;
  },
  onChange(info:any) {
    setLoading(true);
    const listFiles = info.fileList;
    setFileList(listFiles); 
    
    const newArrayFiles  = listFiles.map((file:any) => file.originFileObj? (file.originFileObj) : file );
    
    const anAsyncFunction = async (item:any) => {
      return convertBase64(item)
    }
    
    const getData = async () => {
      return Promise.all(newArrayFiles.map((item:any) => anAsyncFunction(item)))
    }
    
    getData().then(data => {
      /*  setFileSend(data) */
      setFileListBase64(data);
      setLoading(false);
      //    console.log(data);
    });
  },
  directory: true,
  fileList: fileList,
};

const convertBase64 = (file:File) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file)
    fileReader.onload = () => {
      resolve(fileReader?.result);
    }
    fileReader.onerror = (error) => {
      reject(error);
    }
  })
}

const handleDeleteListFiles = () => {
  setFileList([]);
  setFileListBase64([]);
}

Upvotes: 1

FaFa
FaFa

Reputation: 398

Maybe this can work: formData.append('mFiles[]', mFiles) If you add [] to the string it should not overwrite but add to the array

Upvotes: 0

Niraj Kaushal
Niraj Kaushal

Reputation: 1502

It seems like you are overriding the value of mFiles.

 const formData = new FormData();
 formData.append('webtoonId', this.state.selectedToonId);
 formData.append('epiTitle', this.state.epiTitle);
 formData.append('eFile', this.state.thumbnail[0].originFileObj);

 let mFiles = [];

 for( let i = 0; i< this.state.mains.length ; i++){
    mFiles[i] = this.state.mains[i].originFileObj; 
 }

 formData.append('mFiles', mFiles)

 uploadEpi(formData)

Upvotes: 0

Related Questions