JS Eror пытается использовать Dropzone для загрузки файлов в Reactjs - PullRequest
Новая
       16

JS Eror пытается использовать Dropzone для загрузки файлов в Reactjs

0 голосов
/ 11 апреля 2019

Я просмотрел много материалов в Интернете о том, как использовать Dropzone для загрузки файлов на мой Сервер, и я фактически написал приведенный ниже код для выполнения этой задачи. К сожалению, когда я нажимаю на ссылку, чтобы открыть эту страницу, на моей консоли появляется пустой экран со следующей ошибкой

Предупреждение: сбойный тип пропеллера: недопустимая опора children типа string, предоставленная для Dropzone, ожидаемая function. TypeError: Object (...) не является функцией

this.onDrop является функцией.

Я попытался изменить {this.onDrop} на {() => this.onDrop ()}, {this, onDrop ()} и т. Д. 

import React, { Component,Fragment } from 'react';
import {Row, Col, Input, Button, Card, CardBody} from 'mdbreact';
import request from 'superagent';
import Dropzone from "react-dropzone";
import { Line } from 'rc-progress';
class Fileupload extends Component {

constructor(props) {
    super(props);
    this.state = {
      files: [],
      name:'test'
    };
    this.onDrop = this.onDrop.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

//this function takes a a file and attach it to the previous files.
onDrop(files) {
    this.setState({
      files: this.state.files.concat(files),
    });
}

//Handling Submision
handleSubmit(event) {
    event.preventDefault();
    let authKey = 'myKey';
    const {files} = this.state;
    this.setState({ submitted: true });
    if (files) {
        //sent to my server now using
        let req = request.post('http://localhost/api/upload?access-token='+authKey);
        req.on('progress', event => {
            let percent = Math.floor(event.percent);
            if (percent >= 100) {
                this.setState({ percent: 100 });
            } else {
                this.setState({ percent: percent });
            }
        });
        const that = this;
        req.send(this.state);
        req.end((err, res) => {
            console.log('Successfully uploaded');
        });
    }
}

render() {
    const previewStyle = {
      display: 'inline',
      width: 100,
      height: 100,
    };
    return (
        <Card className="space-above">
            <CardBody>
                <form name="form" onSubmit={this.handleSubmit}>
                    <Dropzone
                      onDrop={this.onDrop}
                    >
                      Drop an image, get a preview!
                    </Dropzone>

                    <div className="text-center">
                        <Button type="submit" onClick={this.handleSubmit} className=" btn-primary pull-right">Upload Files</Button>
                    </div>
                </form>
                {this.state.submitted &&
                    <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
                }
                {this.state.files.length > 0 &&
                  <Fragment>
                    <h3>Previews</h3>
                    {this.state.files.map((file) => (
                      <img
                        alt="Preview"
                        key={file.preview}
                        src={file.preview}
                        style={previewStyle}
                      />
                    ))}
                  </Fragment>
                }
            </CardBody>
        </Card>
    );
}
}
export default Fileupload;

Пожалуйста, любая помощь по этому вопросу будет принята с благодарностью, так как я не вижу, где я иду не так, хотя я знаю, что я должен пропустить что-то незначительное.

...