Sending blob data via ajax

Question

So I'm trying to send an image via ajax as a blob. The blob has the correct type and is about 4.5 kb in size. I try to send it like this:

document.getElementById("canvas").toBlob(function (blob) {
    var data = new FormData();
    data.append('name', name);
    data.append('program', YouTomaton.Main.get_CurrentProgram());
    data.append('image', blob);
    $.ajax({
        type: "Post",
        url: "save.php",
        data: data,
        processData: false,
        contentType: false,
        success: function (result) {
            if(result != undefined && result.length > 0)
                alert(result);
        }
    });
});

The recieving page looks like this:

<?php
include("session.php");
writeProgram($_POST['name'], $_POST['program'], $_POST['image']);
?>

It tells me that the index 'image' could not be found. So not only does the data not get sent, but even the index is omitted. What am I doing wrong ?

EDIT: neither toBlob nor toDataURL produce anything but an empty PNG. Is there a way to convert the data from a framebuffer into a base64 encoded jpg or png ?

Community · Accepted Answer · 2017-05-23 12:00:07Z

1

Read this. Then think of what you would like to do.

If you could use a plugin for jQuery. I would recommend using FileUpload

For an HTML file input, minimal syntax would be like this:

<input type="file" name="fs" id="fileupload" />

And JS script:

$('#fileupload').fileupload({
                url: "fileupload?additional=data",
                done: function (e, data) {
                    console.log(data.result);
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jun 6, 2015 at 19:53

Jake OS

1901 silver badge16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jake OS Over a year ago

okay, how about his first sugesstion? saving canvas and posting image not an alternative for you?

pixartist Over a year ago

Jake, I definately can't ask the user to manually upload anything. I wonder why the ajax solution doesn't work though... Edit: the second link looks promising...

pixartist Over a year ago

Unfortunately toDataURL produces a blank image

Jake OS Over a year ago

var canvas = document.getElementById("gameCanvasId"); var dataURL = canvas.toDataURL(); console.log(dataURL);

MJHd · Accepted Answer · 2019-02-12 19:57:10Z

I'm working on a similar problem right now - I'm using PDF's - here's my working ajax call:

$.ajax({
            dataType: "native",
            url: ("handle.php?filename=" + event.target.dataset.name),
            xhrFields: { responseType: "blob" },
            data: "secure=<?php echo $pass ?>",
            success: function(result){
                    console.log(result.size)
                    download(result, event.target.dataset.name, "application/pdf")
            }
        })

The download() part is a call to the FileSaver tool - which is how the Blob gets saved on the client side in my case...

I'm using data-name attr in the markup to store JUST the filename (not full path) - hope that helps!

EDIT:: Sorry for the PHP mixed in! - that statement just passes a hashed nonce token to the script to make sure no requests have been duplicated/gotton out of order - etc...

Collectives™ on Stack Overflow

Sending blob data via ajax

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related