0

I am running two Flask instances, currently just locally on 'localhost', at two different ports. I would like for one Flask instance (I call it the "frontend" instance) to accept an image from the user via form upload, then send it to another Flask instance (I call it the "display" instance) where the image is displayed for the user without saving the file to the local file system as an intermediate step. Yes, I realize this can all be done within one Flask instance, but this is being done as a coding exercise for a non-realistic application.

I see from this question that Flask has a send_file() function, but apparently that only works if the image is saved on disk, which it is not in this case.

I have also seen some questions recommend sending the image within a JSON object, which does seem to transmit the image data, but something with the photo encoding does not work - alas the receiving webpage shows a broken image. A comment on this post seems to suggest that in order to send images between Flask instances, we must use base64 encoding, which I have both tried and not tried (sent both encoded and un-encoded versions of the uploaded image). (This SO question seems closest to my problem, but they don't seem to use the "POST" method to send the image from one Flask instance to another)

Other things I've tried include this post which seems to just remind us about adding the mime encoding format when displaying the image, which I've added to no effect.

In summary, I can't seem to find any resources online that talks about sending images from one Flask instance to another, with the image coming from a form upload and not the filesystem, and not saving the file to disk/filesystem at any time during this process.

If there is a solution to this problem, it would be greatly appreciated.

EDIT: Following metatoaster's comment below, I've tried "Attempt 3", whereas the "Frontend" Flask instance sends the image as a file and the "Display" Flask instance attempts to open the file in the same way. (I added "Attempt 3" to the code snippets below). The image still does not display, however, I can see that on the "Frontend" instance, when I do print(value) it shows <FileStorage: 'IMG_45A21537E24C-1.jpeg' ('image/jpeg')> whereas the same print(value) on the "Display" instance shows <FileStorage: 'image' (None)> -- so I think the problem now is, why is the receiving Flask instance showing the file type as "None"? (Which may be a different question altogether). Tried this as well, receiving object type is still "None".

"Frontend" Flask Instance (running on Port 5000)

@webapp.route('/upload_image', methods=["GET", "POST"])
def upload_image():
    if request.method == "POST":
        uploaded_image = request.files['image']

        # Attempt 1: Sending image in "data" payload with POST request
        uploaded_image_b64 = base64.b64encode(uploaded_image.read()).decode('utf-8')
        requests.post('http://localhost:5001/receive_image', data=value)
        # Result: 400 Status Code on "Display" Flask instance, image not displayed

        # Attempt 2: Sending image in json
        uploaded_image_b64 = base64.b64encode(uploaded_image.read()).decode('utf-8')
        requests.post('http://localhost:5001/receive_image', json={"text":"Testing", "image"=uploaded_image_b64})
        # Result: I can see "Testing" show up and the "image" shows up as a "?" on the receiving webpage. 
        # 200 Status Code on "Display" Flask instance, so at least HTTP seems to have gone correctly.

        # Attempt 3: Sending image through "files" in requests
        requests.post('http://localhost:5001/receive_image', files={'image':uploaded_image})

Corresponding Webpage for "Frontend" Flask Instance where user can upload their photo

<h2>Upload your image here</h2>
<form method="POST" action="/upload_image" enctype="multipart/form-data">
<input class="form-control form-control-sm" name="image" type="file" accept="image/jpeg, image/png">
</form>

"Display" Flask Instance (running on Port 5001)

@webapp.route('/receive_image', methods=["GET", "POST"])
def receive_image():
    if request.method == "POST":
        content = request.json
        print(content["text"])
        file = content["image"]

        # This comes from yet another SO post:
        # https://stackoverflow.com/questions/60091029/python-requests-post-image-with-json-data
        # It doesn't help the situation, but I've tested it as well
        # image_original = base64.b64decode(file)
        # img_as_np = np.frombuffer(image_original, dtype=np.uint8)
        # img = cv2.imdecode(img_as_np, flags=1)
        return render_template("receive.html", image=file)

        # Attempt 3
        received_image = request.files['image']
        print(received_image)
        # received_image = base64.b64encode(received_image.read()).decode('utf-8') -- tried adding this, both with and without doesn't help
        return render_template("receive.html", image=received_image)

Corresponding Webpage for "Display" Flask Instance where uploaded photo is displayed

<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
    <h1>Test Server Image Receiving Page</h1>
    <!-- All three options below do not display the image -->
    <img src="data:image/jpeg;base64, {{image}}">
    <img src="data:image, {{image}}">
    <img src="{{image}}">
</body>
</html>
a2xia
  • 125
  • 1
  • 3
  • 11
  • Is there a reason why on the "Display" flask instance you aren't receiving the image using the same method as the "frontend" flask instance (i.e. using multipart file)? You could then just use the `requests` library as you have except posting that with the files attribute, e.g. [answer](https://stackoverflow.com/a/10234640/). – metatoaster Oct 13 '22 at 02:12
  • @metatoaster Thank you for the tip! To be honest, I'm fairly new to Flask so using multipart file as an option did not even occur to me. I've given that a try (edited my post to show what I tried), and now I think the problem boils down to why the received object type is "none"... time for more searching. – a2xia Oct 13 '22 at 02:35

1 Answers1

1

You were very close to getting this done. What you were missing is that the FileStorage object has a stream field that must be read to get to the underlying file contents in memory (though technically it may still be backed by a temporary file). The following is a fully self-contained demo:

frontend.py

from flask import Flask, request, redirect
import requests

app = Flask(__name__)

@app.route('/upload_image', methods=["GET", "POST"])
def receive_image():
    if request.method == "POST":
        requests.post('http://localhost:5001/receive_image', files={
            'image': request.files['image'].stream.read()
        })
    return redirect('http://localhost:5001/receive_image')
        
app.run(port=5000, debug=True)

display.py

from flask import Flask, request, render_template
from base64 import b64encode

app = Flask(__name__)
image = b''

@app.route('/receive_image', methods=["GET", "POST"])
def receive_image():
    # lazily store/reference the last image uploaded
    global image
    if request.method == "POST":
        received_image = request.files['image']
        image = received_image.stream.read()
    return render_template(
        "receive.html",
        # TODO should detect mimetype here. 
        mimetype='image/png', 
        image=b64encode(image).decode('ascii'),
    )

app.run(port=5001, debug=True)

templates/receive.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
    <h1>Test Server Image Receiving Page</h1>
    <img src="data:{{mimetype}};base64, {{image}}">
</body>
</html>

Since I lacked a browser-friendly frontend attached to frontend.py, I will simply use requests to upload the file:

>>> r = requests.post('http://localhost:5000/upload_image', files={
...     'image': open('demo.png', 'rb').read()
... })

Once the upload is done, point a browser to http://localhost:5001/receive_image and it should display the last image that got uploaded.

metatoaster
  • 17,419
  • 5
  • 55
  • 66