Win Wongsawatdichart
Win Wongsawatdichart

Reputation: 87

FLASK uploads broken image

I am trying to upload pictures and display it in a URL.

my server:

app = Flask(__name__)
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
UPLOAD_FOLDER = os.path.join(APP_ROOT, 'static/uploads')
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/post_pic',methods=['POST','GET'])
def post_picture():
    if request.method == 'POST':
        file1 = request.files['image']
        path1 = os.path.join(app.config['UPLOAD_FOLDER'], file1.filename)
        file1.save(path1)
        return_status = {"success":"true"}
        return jsonify(return_status)

    list_of_files = glob.glob(UPLOAD_FOLDER + '/*') # get latest file
    latest_file = max(list_of_files, key=os.path.getctime)    
    return render_template("show_pic3.html", file1=latest_file)

show_pic3.hrml code:

<html>
<head>
    <title>show_pic</title>
</head>
<body>
    <img src="{{url_for('static', filename=file1)}}" align= "middle" />
</body>
</html>

I then use POST request to upload picture which doesn't show any problems. but after I use GET on the same endpoint, the image became broken.

enter image description here

Upvotes: 0

Views: 218

Answers (1)

coldy
coldy

Reputation: 2195

Usually, a web server will handle a load of content (nginx). If you are trying to save content then the best option is to save them somewhere in a location and use the send_from_directory with a get image as an API call.

A quick fix for your question would be to replace the /app/static/ with nothing at the end before rendering.

list_of_files = glob.glob(UPLOAD_FOLDER + '/*') # get latest file
latest_file = max(list_of_files, key=os.path.getctime).replace("/app/static/","")
return render_template("show_pic3.html", file1=latest_file)

Upvotes: 1

Related Questions