ReactJS Получить файл POST в Flask Backend (данные не будут отправляться)

Question

Я уже прочитал много документации по fetch и ReactJS, и я просто не могу найти проблему своего кода, ситуация такова, что я могу выбрать и сохранить желаемый файл в состоянии, но когда я отправляю отправку , Flask не получает файл, только это сообщение:

127.0.0.1 - - [08 / May / 2020 18:50:44] «POST / upload HTTP / 1.1» 200 -

Вот мой ReactJS код:

import React from 'react';

class Main extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            file: null,
            brand: null
        };

        this.handleFile = this.handleFile.bind(this);
        this.handleBrand = this.handleBrand.bind(this);
        this.handleUpload = this.handleUpload.bind(this);
    }

    handleBrand(e) {
        let brand = e.target.value
        this.setState({brand: brand});
      }

    handleFile(e){

        let file = e.target.files

        this.setState({file: file})
        console.log(file)

    }

    handleUpload(e){
        e.preventDefault();

        const data = new FormData();
        data.append('file', this.state.file);
        console.log(this.state.file)

        fetch('http://localhost:5000/upload', {
            method: 'POST',
            body: data,
        })

    }

    render() {
        return (
            <form onSubmit={this.handleUpload}>
                <div>
                    <input onChange={this.handleFile} id="fileToUpload" type="file" name="filesToUpload" id="filesToUpload"/>
                </div>

                <div>
                    <select value={this.state.value} onChange={this.handleBrand}>
                    <option value="">- Please select -</option>
                        <option value="toyota">Toyota</option>
                        <option value="quick_lanes">Quick Lanes</option>
                        <option value="volvo">Volvo</option>
                        <option value="alfa_romeo">Alfa Romeo</option>
                    </select>
                </div>

                <br />
                <div>
                    <button>Upload</button>
                </div>

            </form>
        );
    }
}

export default Main;

А вот мой Flask код:

from flask import *
from flask_cors import *
import os

app = Flask(__name__)
CORS(app)

UPLOAD_FOLDER = "C:/projects/poi_dealers/files"
app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER

@app.route("/upload", methods=["GET", "POST"])
def upload_image():

    if request.method == "POST":

        if request.files:

            filesToUpload = request.files["file"]

            filesToUpload.save(os.path.join(app.config["UPLOAD_FOLDER"], filesToUpload.filename))

            print(filesToUpload)

            return redirect(request.url)


    return "All ok"

if __name__ == "__main__":
    app.secret_key = os.urandom(24)
    app.run(debug=True, host="0.0.0.0", use_reloader=False)

Вот в чем дело, я нашел этот код в сети и это работает! Я не могу понять почему, я уже прочитал его сверху вниз и не вижу различий, я не хочу использовать этот код, я хочу понять, что происходит, какие-либо предложения? Вот код, который я нашел:

import React from 'react';

class Main extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            imageURL: '',
        };

        this.handleUploadImage = this.handleUploadImage.bind(this);
    }

    handleUploadImage(ev) {
        ev.preventDefault();

        const data = new FormData();
        data.append('file', this.uploadInput.files[0]);
        data.append('filename', this.fileName.value);

        fetch('http://localhost:5000/upload', {
            method: 'POST',
            body: data,
        }).then((response) => {
            response.json().then((body) => {
                this.setState({ imageURL: `http://localhost:5000/${body.file}` });
            });
        });
    }

    render() {
        return (
            <form onSubmit={this.handleUploadImage}>
                <div>
                    <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
                </div>
                <div>
                    <input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
                </div>
                <br />
                <div>
                    <button>Upload</button>
                </div>
                <img src={this.state.imageURL} alt="img" />
            </form>
        );
    }
}

export default Main;

И это результат в терминале python (конечно, он сохраняет файл правильно, «Competitive_process.py» - это имя файла, который я использую для тестирования целей):

<FileStorage: 'competitive_process.py' ('text/plain')>
127.0.0.1 - - [08/May/2020 18:39:09] "POST /upload HTTP/1.1" 302 -
127.0.0.1 - - [08/May/2020 18:39:09] "GET /upload HTTP/1.1" 200 -

PS: К счастью, ошибок CORS нет, я трижды проверил это

С уважением!

Answer 1

Я нигде не вижу, чтобы вы создавали ссылку для ввода файла в конструкторе.

Это есть где-нибудь в конструкторе?

this.uploadInput = React.createRef();

Кроме того, где вы объявляете / инициализируете this.uploadInput? Я где-то упускаю это?