Why HTTP request place image file into request.form instead of request.files?

Question

I would like to upload an image file and some text to my API end point, I have a Flask API server to handle post requests from React Native APP and unit test script, but I don't know why I can only get the data from request.form instead of request.files, and the request.files is ImmutableMultiDict([]) and the request.form is ImmutableMultiDict([('image', "<FileStorage: 'test.jpg' ('image/jpeg')>")]) which the value in request.form['image'] is str instead of FileStorage object. Here is my code:

unit_test.py

import io
import unittest
from api import app

class FlaskAppTests(unittest.TestCase):
  def setUp(self):
    self.app = app.test_client()
    self.app.testing = True
    with open('image/test.jpg', 'rb') as img:
      self.binary_image = img.read()

  def test_facial_authentication_response(self):
    response = self.app.post('/facial_authentication', content_type='multipart/form-data', data={
      'image': (self.binary_image, 'test.jpg', 'image/jpeg')
    })

    self.assertEqual(response.status_code, 200)
    self.assertEqual(response.content_type, 'application/json')

if __name__ == '__main__':
  unittest.main()

React Native code:

await fetch('http://api-end-point', {
      method: 'POST',
      headers: {'Content-Type': 'multipart/form-data'},
      body: formData,
    }).then(res => res.json()).then(json => {
      console.log(json);
    }).catch((error) => {
      console.error(error);
    });
  };

Flask app.py:

import io
from flask import Flask, request

app = Flask(__name__)
CORS(app)

@app.route('/', methods=['POST'])
def api():
  image_from_form = request.files['image'] # error raised cause the dict is empty
  image_from_files = request.form['image'] # return "<FileStorage: 'test.jpg' ('image/jpeg')>"
  print(image_from_form, " and ", image_from_files)
  # ImmutableMultiDict([]) and ImmutableMultiDict([('image', "<FileStorage: 'test.jpg' ('image/jpeg')>")])
  with open(os.path.join(dirname, 'temp.jpg'), "wb") as file:
    file.write(binary_image)

The image itself is binary/Blob object, depends on the client side. I have tried to ask ChatGPT or google from the anwser, but almost results are only mention that the request.files should contain files if the content-type and file field is correct.

score 0 · Answer 1 · answered Aug 09 '23 at 08:27

In comments of the code you have mentioned,

image_from_form = request.form['image'] # error raised cause the dict is empty
image_from_files = request.files['image'] # return "<FileStorage: 'test.jpg' ('image/jpeg')>"

request.files['image'] contains the image. You can save it using the code -

image_from_files = request.files['image']
image_from_files.save('test.jpg')

If request.form is ImmutableMultiDict([('image', "<FileStorage: 'test.jpg' ('image/jpeg')>")]) then also you can save it using -

request.form['image'].save('test.jpg')

My apologies for the incorrect information, request.files is empty dict instead of request.form. About your suggestion, I have tried to do so, it shows "str object has no attribute 'save'", the value of request.form['image'] is str but not FileStorage object. — KPB98115, Aug 10 '23 at 02:32

Why HTTP request place image file into request.form instead of request.files?

1 Answers1