Javascript - Sending Signature-pad Results To Flask

I'm using the signature-pad JavaScript library to have people digitally sign documents (this is just for testing, nothing legally binding, etc.) but I'm having a hard time passing

Solution 1:

This answer seems to be what you're looking for. This is using jQuery however. To do this in pure JavaScript look at this answer. Then to access the file you would use flask.request.files.

A blind (read: untested) example would be:

$(function() {
    $('#upload-file-btn').click(function() {
        var data = signaturePad.toDataURL('image/png');
        $.ajax({
            type: 'POST',
            url: '/uploadUrl',
            data: data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

Now in your flask's endpoint view function, you can access the file's data via flask.request.files.

Note: As I said this is untested, and I don't know if the ajax config (for instance making the request synchronous or setting contentType to false) are all necessary. My intuition would be to rewrite it like this:

NOT TESTED

$(function() {
    $('#upload-file-btn').click(function() {
        var data = signaturePad.toDataURL('image/png');
        $.ajax({
            type: 'POST',
            url: '/uploadUrl',
            data: data,
            contentType: 'image/png'
        }).done(function(data) {
            console.log('Success!');
        }).fail(function(data) {
            console.log('Fail!');
        });
    });
});