Télécharger des fichiers avec React Hooks et Ant Design

Question

J'essaie de télécharger des fichiers à l'aide de React Hooks et du composant Upload d'AntDesign. Je pensais que ce ne serait pas un problème et j'ai essayé de nombreuses façons différentes de le faire en utilisant React Hooks (sans Hooks, je peux le faire sans aucun problème).

J'ai fait un exemple simplifié ici : https://codesandbox.io/embed/upload-with-react-hooks-ant-design-1jmod?fontsize=14&hidenavigation=1&theme=dark

Je suis sûr que je m'y prends mal, mais il semble que je ne parvienne pas à trouver la meilleure façon d'y parvenir. Je me heurte toujours à des fermetures périmées et je ne sais pas comment éviter cela.

Quel est le problème ? Je n'obtiens pas le fichier dans le processRemainingFiles. Regardez dans la console, après avoir déposé un fichier dans celle-ci. Vous obtiendrez :

[uploadFile] undefined

Même si la logique semble fonctionner ici pour moi Je sais qu'il y a un autre problème avec ce code : si un autre fichier est déposé, le téléchargement commence instantanément. Il y a plusieurs façons de contourner ce problème, mais comme cela allonge le code, j'ai préféré partager quelque chose de plus simple.

Answer 1

    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.