Фоновая служба работает на React - PullRequest
Новая
       10

Фоновая служба работает на React

0 голосов
/ 04 октября 2018

Я работаю в системе загрузки файлов, используя react-dropzone.Я могу успешно загрузить файл и отобразить имя и размер файла под элементом перетаскивания.

Current App Condition

Я пытался с большим провалом, чтобы область перетаскивания работала в фоновом режиме, когда отображаются файлы .Но я не могу этого сделать.Я знаю, что это можно сделать, поскольку именно так работают Dropbox, Google Drive и почти все остальные сайты для загрузки файлов.Каков наилучший способ добиться этого?

Вот моя работа уже сделана;

Контейнер FileUploader 

onFileUploader = ( files ) => {
    files.forEach(file => {
        this.setState({...this.state, files : this.state.files.concat(file)})

        const jsonFile = new FormData();
        jsonFile.append('file', file)
        jsonFile.append('multichainAddress', this.state.multichainAddress);

        axios({
            method: "POST",
            url: url,
            data: jsonFile,
            dataType: "json",
            cache: false,
            processData: false,
            contentType: false
        })
            .then(response => {
                console.log("post success - ", response);
            })
            .catch(error => {
                console.log("post failed - ", error);
            });
    });

    this.setState({...this.state, filesUploaded : true});
    console.log(this.state.files);
}

render () {
    console.log("[FileUploader] render");

    return (
        <Aux>
            <div>
                <Grid container spacing={8}>
                    <Grid item md={10}>
                        <FileDropzone onDropHandler={this.onFileUploader} dropzoneReference={this.onDropzoneRef}/>
                        <Files files={this.state.files} />
                    </Grid>
                    <Grid item md={2} >
                        <Button
                            variant="outlined"
                            component="span"
                            onClick={() => {
                                this.dropzoneRef.open();
                            }}
                        >
                            Upload
                            <CloudUploadIcon />
                        </Button>
                    </Grid>
                </Grid>
            </div>
        </Aux>
    );
}

Компонент FileDropzone 

render () {
    return (
        <section>
            <div>
                <Dropzone
                    onDrop={this.props.onDropHandler}
                    className={classes.FileDropzone}
                    ref={(node) => {
                        this.props.dropzoneReference(node);
                    }}
                >
                    Drag n drop files here
                </Dropzone>
            </div>
        </section>
    );
}

До сих пор я пытался скрыть элемент, но, похоже, он тоже отключен.Я также попытался добавить проп preventDropOnDocument к компоненту Dropzone, но это ничего не дало.

...