0

を使用してファイルアップロードシステムに取り組んでいますreact-dropzone。ファイルを正常にアップロードし、ドラッグ/ドロップ div の下にファイル名とサイズを表示できます。

現在のアプリの状態

ファイルが表示されたら、ドラッグ/ドロップ領域をバックグラウンドで実行しようとしましたが、大きな失敗をしました。しかし、私はこれを行うことはできません。これは、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コンポーネントに小道具を追加しようとしましたが、何もしませんでした。

4

0 に答える 0