0

I am trying to put together a flask api endpoint that can take an image, drop it in a an 'uploads' folder and then perform an operation on it. The image will be sent from a reactjs front end. I have the beginnings of a python script that I know allows me to upload a photo via flask. But I want to alter it to:

  1. lose the front end upload option instead giving me just the endpoint to upload the image
  2. set it up to run a python script on that image once it lands in the uploads folder that extracts text

I've put below some of the pieces I have so far:

reactjs

#just the piece where i am sending an image to flask
  fileUploadHandler =() => {
    const fd = new FormData();
    fd.append('image', this.state.selectedFile, this.state.selectedFile.name)
    console.log('file is uploaded')
    //axios.post('my_endpoint');
 }

app.py

#from https://stackoverflow.com/questions/52152464/convert-normal-python-script-to-reset-api
import sumTwoNumbers
from flask import Flask, request
from flask_restful import Resource, Api
import os
from werkzeug.utils import secure_filename
import cv2

PROJECT_HOME = os.path.dirname(os.path.realpath(__file__))
UPLOAD_FOLDER  = '{}/uploads/'.format(PROJECT_HOME)

app = Flask(__name__)
api = Api(app)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
ALLOWED_EXTENSIONS = set(['jpg','png'])

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route("/", methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            _path = os.path.abspath("<FILE PATH>")
            #uf = str(uuid.uuid4())
            return redirect(url_for('index'))
    return """
    <!doctype html>
    <title>Upload new File</title>
    <h1>Upload new File</h1>
    <form action="" method=post enctype=multipart/form-data>
      <p><input type=file name=file>
         <input type=submit value=Upload>
    </form>
    <p>%s</p>
    """ % "<br>".join(os.listdir(app.config['UPLOAD_FOLDER'],))

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000, debug=True)

imageToText.py

#script to run on the image that pulls text
import cv2
import pytesseract
import imutils

img = cv2.imread('note.PNG')

#use tesseract to convert image into strinf
text = pytesseract.image_to_string(img, lang='eng')
print(text)
LoF10
  • 1,907
  • 1
  • 23
  • 64
  • 1
    You don't have to return the HTML if that's what you mean with frontend. Just return 200 Success. see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status – Joe Apr 04 '20 at 19:02
  • 1
    https://stackoverflow.com/questions/26079754/flask-how-to-return-a-success-status-code-for-ajax-call – Joe Apr 04 '20 at 19:02
  • 1
    Section Reponses in http://blog.luisrei.com/articles/flaskrest.html – Joe Apr 04 '20 at 19:03
  • Then you could call the other function right before, maybe in a thread.https://stackoverflow.com/questions/14384739/how-can-i-add-a-background-thread-to-flask – Joe Apr 04 '20 at 19:05
  • Or Async https://smirnov-am.github.io/background-jobs-with-flask/ – Joe Apr 04 '20 at 19:06
  • If you are just playing around and your task takes a second to complete then do it within `index()`. – Joe Apr 04 '20 at 19:08
  • The bigger hammer would be something like https://stackoverflow.com/questions/31866796/making-an-asynchronous-task-in-flask – Joe Apr 04 '20 at 19:09

0 Answers0