Компонент React Dropzone Uploader - как изменить поведение файлового объекта на экране после загрузки? - PullRequest
Новая
       78

Компонент React Dropzone Uploader - как изменить поведение файлового объекта на экране после загрузки?

0 голосов
/ 09 мая 2020

Я работаю с react-dropzone-uploader. Это отличный маленький компонент, но я новичок, чтобы отреагировать, и документация «немного» легковесна. У каждого файла есть «виджет» в компоненте загрузчика, который показывает статус загрузки. Как только файл будет завершен, я хочу - после небольшой задержки - изменить виджет, который представляет собой поле, на простое текстовое сообщение, в котором указано имя файла и загрузка этого файла завершена. Я обнаружил, как я могу полностью удалить виджет, используя это: 

    const handleChangeStatus = (file, status) => {
       if (status === 'done') {
         setTimeout(file.remove(), 5000);
       }
    }

И это удаляет весь виджет. Но я хочу заменить виджет простым текстом, который гласит:

FilenameXYZ загрузка завершена.

Весь компонент выглядит следующим образом: 

import React from 'react';
import ReactDOM from 'react-dom';

import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'

const Standard = () => {
    const getUploadParams = () => {
        return { 
          url: $('#jsVars').attr('data-url'),

        }
    }

    const handleChangeStatus = (file, status) => {
        console.log(status, file)
        if (status === 'done') {
            setTimeout(file.remove(), 5000);
        }
    }

    const handleSubmit = (files, allFiles) => {
        console.log(files.map(f => f.meta))
        allFiles.forEach(f => f.remove())
    }

    return (
        <Dropzone
            getUploadParams={getUploadParams}
            onChangeStatus={handleChangeStatus}
            onSubmit={handleSubmit}
            //accept="image/*"
            //inputContent={(files, extra) => (extra.reject ? 'Image files only' : 'Drag Files or click to browse')}
            submitButtonContent="CLEAR"
            styles={{
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                //dropzone: { minHeight: 1000, maxHeight: 1000 } ,
            }}
        />
    )
}

//<Standard />

export default Standard;

if (document.getElementById('example')) {
    ReactDOM.render(<Standard />, document.getElementById('standard'));
}

1 Ответ

0 голосов
/ 12 мая 2020

Отметьте, я бы попробовал что-то подобное, используя условный рендеринг. 

const Standard = () => {
    const [fileStatus, setFileStatus] = useState(null);
    const getUploadParams = () => {
        return { 
          url: $('#jsVars').attr('data-url'),

        }
    }

    const handleChangeStatus = (file, status) => {
        console.log(status, file)
        if (status === 'done') {
            setTimeout(() => {
              /* set the state to the message we want to show */
              setFileStatus(`File ${file.name} uploaded.`);
            }, 5000);
        }
    }

    const handleSubmit = (files, allFiles) => {
        console.log(files.map(f => f.meta))
        allFiles.forEach(f => f.remove())
    }

    /* here we show the fileStatus message if it is set,
       this could also be used for error handling with a
       retry button that sets fileStatus back to null
       and calls file.remove() */
    if(fileStatus) return <div>{fileStatus}</div>

    return (
        <Dropzone
            getUploadParams={getUploadParams}
            onChangeStatus={handleChangeStatus}
            onSubmit={handleSubmit}
            //accept="image/*"
            //inputContent={(files, extra) => (extra.reject ? 'Image files only' : 'Drag Files or click to browse')}
            submitButtonContent="CLEAR"
            styles={{
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                //dropzone: { minHeight: 1000, maxHeight: 1000 } ,
            }}
        />
    )
}

Подробнее о topi c в официальных документах https://reactjs.org/docs/conditional-rendering.html

...