Error while uploading file from react to flask

Question

I am trying to upload file using React and passing it to flask backend using post request. But i am getting error as Failed to load resource: the server responded with a status of 400 (BAD REQUEST). I can't figure out the problem. If there is any other method possible, that also will be helpful.

This is upload.js:

import axios from 'axios';
import React from 'react';

class UploadVideo 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);
        console.log(data)
        axios('/upload', {
            method: 'POST',
            body: data,
        }).then((response) => {
            console.log(response)
        }).catch(err => {
            console.log(err)
          });
  }

  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 type="submit" className="btn">Upload</button>
        </div>
        <img src={this.state.imageURL} alt="img" />
      </form>
    );
  }

This is index.py in flask:

@app.route('/upload', methods=['POST'])
def fileUpload():

   file = request.files['file'] 
   filename = secure_filename(file.filename)
   print(request.body, '1')
   return {"message":"Saved"}

can you share your localhost url for both react and flask apps — Besufkad Menji
– Besufkad Menji, Commented Sep 22, 2020 at 15:44
Does this answer your question? file upload with Reactjs and Flask — ggorlen
– ggorlen, Commented Sep 25, 2023 at 18:18

Besufkad Menji · Accepted Answer · 2020-09-22 16:05:12Z

0

since react and flask running in different port use full URL. check the code below

handleUploadImage(ev) {
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);
    console.log(data)
    axios('http://localhost:8000/upload', {
        method: 'POST',
        body: data,
    }).then((response) => {
        console.log(response)
    }).catch(err => {
        console.log(err)
      });
}

edited Sep 22, 2020 at 16:05

answered Sep 22, 2020 at 15:56

Besufkad Menji

1,58813 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mrunal Joshi Over a year ago

It says url must start with leading slash

Besufkad Menji Over a year ago

sorry, I thought I edited the react code, check the edit please

Mrunal Joshi Over a year ago

Now i get error as localhost:8000/upload 400 (BAD REQUEST)

Sujan Adiga Over a year ago

Open network console in your browser and check the exact error message you are getting from your flask app for the upload request. Also check if the file object is being sent in the request body

Collectives™ on Stack Overflow

Error while uploading file from react to flask

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related