Saving uploaded base64 data gives TypeError: a bytes-like object is required, not 'str'

Question

I am using a JavaScript library to upload an image. It places the image data in a form field that is a JSON encoded object with the file name and base64 encoded data.

When I try to save the image in Flask, I get this error:

builtins.TypeError TypeError: a bytes-like object is required, not 'str'

The image file is created with the correct name, but the data is corrupt, I can't open it. How do I save the uploaded data?

app = Flask(__name__)
UPLOAD_FOLDER = app.root_path + '/images/'

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        image_base = json.loads(request.form['file'])['output']['image']
        image_base = image_base[image_base.find(',')+1:]
        file_data = io.StringIO(image_base)
        file = FileStorage(file_data, filename=json.loads(from_form)['output']['name'])
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return redirect(url_for('uploaded_file', filename=filename))

    return render_template('index.html', methods=['GET', 'POST'])

  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1836, in __call__
    return self.wsgi_app(environ, start_response)
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1820, in wsgi_app
    response = self.make_response(self.handle_exception(e))
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1403, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/usr/local/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1817, in wsgi_app
    response = self.full_dispatch_request()
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1477, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1381, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/usr/local/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1475, in full_dispatch_request
    rv = self.dispatch_request()
  File "/usr/local/lib/python3.5/site-packages/flask/app.py", line 1461, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/Users/kr/PycharmProjects/instaup/instaup.py", line 32, in index
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
  File "/usr/local/lib/python3.5/site-packages/werkzeug/datastructures.py", line 2656, in save
    copyfileobj(self.stream, dst, buffer_size)
  File "/usr/local/Cellar/python3/3.5.1/Frameworks/Python.framework/Versions/3.5/lib/python3.5/shutil.py", line 76, in copyfileobj
    fdst.write(buf)
TypeError: a bytes-like object is required, not 'str'

Answer 1

StringIO represents a string, not bytes, you want BytesIO. Base64 encoded data is not the actual image bytes, it needs to be decoded with b64decode.

file_data = io.BytesIO(b64decode(image_base))

Answer 2

You need to encode either app.config['UPLOAD_FOLDER'] or , filename to be a byte-like object. Try the .encode('utf-8') method.