Upload files with React Hooks and Ant Design

user_564867 0
Viewed 1860

I am trying to upload files using React Hooks and the Upload component from AntDesign. I thought it would be no problem, and I have been trying many different ways to do this using React Hooks (without Hooks, I can do it without any issue at all).

I made a simplified example here: https://codesandbox.io/embed/upload-with-react-hooks-ant-design-1jmod?fontsize=14&hidenavigation=1&theme=dark

I am sure I am doing it wrong, but it seems I am not able to find the best way to achieve this. I am always running into stale closures and I am not sure how to avoid this.

What's the problem? I don't get the file in the processRemainingFiles. Have a look in the console, after dropping a file in it. You'll get:

[uploadFile] undefined

Even though the logic seems to work here for me, I know there is another issue with this code: if another files is dropped, then it would start uploading instantly as well. There are many ways to go around this, but since it makes the code longer, I preferred to share something simpler.

antd react-hooks reactjs file-upload javascript
1 Answers
    import { Upload} from 'antd';
    const Dragger = Upload.Dragger;
    
     const [fileList, setFileList] = useState<any[]>([]);
     const [FileSend, setFileSend] = 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) {
      const listFiles = info.fileList.slice(-3);

      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)
        console.log(data);
      })
    },
    multiple: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);
      }
    })
  }

.......................
In return method:
.......................

       <Dragger {...propsUpload}>
                <p className="ant-upload-drag-icon">
                     <Icons.FaInbox />
                </p>
                <p className="ant-upload-text">Clique ou arraste o arquivo para fazer o upload</p>
                <p className="ant-upload-hint">Aguarde o carregamento para realizar o upload dos arquivos.</p>
       </Dragger>```


.........................
To send files in base64, send array FileSend.
user_126853500
Related