Реагировать - прогресс загрузки файла для каждого - PullRequest
Новая
       31

Реагировать - прогресс загрузки файла для каждого

1 голос
/ 20 февраля 2020

I m running into a problem related with file uploading. I m - создание компонента Dropzone на основе библиотеки Reaction-Dropzone. Мне нужно загрузить файлы и показать прогресс загрузки для каждого из них. Более того, я хочу сохранить свои загруженные файлы (с результатом) в зоне и удалять только по клику пользователя.

Это мой оператор возврата. 

return (
    <Container {...getRootProps({ isDragActive, isDragAccept, isDragReject })}>
      <input {...getInputProps()} />
      {filesToRender || (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </Container>
  );

После того, как я перетаскиваю некоторый файл в зону, он вызывает эту функцию: 

 const onDrop =  acceptedFiles => {
    for (const file of acceptedFiles) {
      const formData = new FormData();
      formData.append("file", file);
       axios.post(`http://localhost:8080/files`, formData, {
        headers: {
          Authorization:
            "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJmb28iLCJleHAiOjE1ODIxNzc2NjAsImlhdCI6MTU4MjE0MTY2MH0.CWtDOIrFoitXHDeXCha0mT3HVyvTrwg8nXhsNaLkZVs"
        },
        onUploadProgress: progressEvent => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          file.progress = percentCompleted;
          // set progress for an each file
        }
      });
    }
    setFiles([...files, ...acceptedFiles]);
  };

Я хочу установить файлы а затем каким-то образом изменить его во время загрузки .

My filesToRender : 

const filesToRender =
    files.length &&
    files.map((file, index) => {
      return (
        <File key={index}>
          <FileInfo>
            {file.name}
            {file.progress} //get progress from an each file object
          </FileInfo>
          <Button onClick={event => removeFile(event, index)}>
            Убрать файл
          </Button>
        </File>
      );
    });

Как я могу это сделать? setFiles isyn c, поэтому у меня проблемы с его сбросом.

...