Uploading canvas data with AJAX using Flask

Question

I am trying to upload canvas imageData using AJAX to a flask server. I get the imageData then convert it to a blob and post it using AJAX.

The problem I am having is that I have specified only certain file types to work for security, and I think that the Blob doesn't not count as one of these file types.

Here is the code I use for the flask view

import sys
from app import app
import os
from flask import Flask, request, render_template, redirect, url_for
from werkzeug import secure_filename

UPLOAD_FOLDER = '/home/tr0uble/work/Collabart/app/uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app.config['UPLOAD_FOLDER'] = "/home/tr0uble/work/Collabart/app/uploads"


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['image']
        print(file, file=sys.stderr)
        if file and allowed_file(file.filename):
            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')

And here is the JavaScript which sends the AJAX request

function base64toBlob(base64Data, contentType) {
canvas = document.getElementById("mainCanvas");
if (canvas.toBlob) {
canvas.toBlob(
    function (blob) {
        fd = new FormData();
        fd.append('image', blob);
        $.ajax({
            type: 'POST',
            url: '/',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            console.log(data);
        });
    },
    'image/png'
);
}
}

function canvasSave(imageData){
    blob = base64toBlob(imageData, 'image/png');
}

$( document ).ready(function() {
    $('#mainCanvas').jqScribble(width=800,height=800);
    var context = mainCanvas.getContext("2d");
    context.imageSmoothingEnabled = true;
    $('#mainCanvas').data('jqScribble').update({saveFunction: canvasSave});
});

The error that I am getting is that the line in the code if file and allowed_file(file.filename): Is not being accepted as true. I think this is because if I print the value of the variable file file = request.files['image'] then this is what is outputted <FileStorage: 'blob' ('image/png')>.

I would still like for there to be allowed extensions so that the AJAX request can't be changed to include HTML files for example.