1

I'm trying to upload a video from react to flask but when I make a POST request it gives me this error

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'file'

here is the backend:

@app.route("/releaseVideo",methods=["POST"])

def release():

    request_data = request.files.get["file"]
    print(request_data)
    try:
        request_data.save(os.path.join(app.config['UPLOAD_FOLDER'],'first video'))
    except Exception:
        print('COULD NOT')
    return {"msg":"What am I DOING"},200


if __name__ == '__main__':
    app.run(debug=True)

Here is the front end...I'm using axios instead of fetch because I heard that axios is better for file uploads than fetch .

    const upload_file = (event) => {
        event.preventDefault()
        let file = document.querySelector('input[type="file"]')
        const formdata = new FormData()


        formdata.append("file",file);
    axios("/releaseVideo", {
        method:'POST',
        body:formdata
    })
    .then(res => console.log(res))
    .catch(err => console.warn(err));

    }







    return (
        <>
            <form onSubmit={upload_file}>
                <label>Title: </label><br />
                <input type="text" onChange={onTitleChange} value={title}/><br />
                <label>Description:</label><br />
                <textarea value={textArea} onChange={onTextAreaChange}></textarea>
                <input type="file" id="file"/>
                <input type="submit" value="Upload Video!" />

            </form>
        </>
    )

So how can I get the video from the front end in a proper way?

Koussay Dhifi
  • 35
  • 1
  • 5
  • 1
    you should have to specify `Content-Type: multipart/form-data` in request header(in axios request) – faris404 Aug 29 '21 at 06:41

0 Answers0