My attempts to transfer the blob payload via FormData were unsuccessful

Question

My attempts to transfer the blob payload via FormData were unsuccessful

I've been experimenting with the FormData API. You can check out the fiddle I'm working on here - my goal is to embed blobs into my form and submit it via AJAX.

//ic0 and tc0 represent canvases
//image0 and thumb0 are file inputs
function ajaxSubmit(){
    var fd = new FormData(document.forms[0]);
    ic0.toBlob(
        function(blob){
            fd.set("image0", blob, "image0.jpg");
        }, "image/jpeg", 0.7);
    tc0.toBlob(
        function(blob){
            fd.set("thumb0", blob, "thumb0.jpg");
        }, "image/jpeg", 0.7);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/ajax-upload/", true);
    xhr.send(fd);
}

The behavior of browsers seems a bit peculiar:

Chrome 50 (in Ubuntu)

Encounters an issue, displaying:

Failed blob:https%3A//fiddle.jshell.net/uuid4 to load resource: the server responded with 404

I thought FormData.set() was now supported? It works with non-blobs, right?

Firefox 46 (in Ubuntu)

If the FormData() object is not initialized with an existing DOM object containing necessary file inputs, it doesn't seem to work as expected. FormData.set() doesn't appear to function properly with file inputs and blobs (despite calling

fd.set("thumb0", blob, "thumb0.jpg")

, resulting in thumb0 being null in the payload. By checking

console.log(fd.get("thumb0"))

immediately after setting, you'll notice that the value is indeed set. Additionally, the payload for image0 turns out to be the original image instead of the resized canvas image.

It's inconvenient not being able to customize multipart FormData using JavaScript. As someone relatively new to JavaScript, am I missing something crucial here, or could these browsers potentially have issues supporting the FormData API correctly? How do I correctly submit image0 and thumb0 in my fiddle?

Edit: Deciding to prioritize this. I'm aware of larger jQuery-dependent libraries like blueimp, but I prefer transmitting data as file inputs rather than basing it in base64 (and avoiding jQuery altogether). For this project, I only need support for the latest versions of Chrome and Firefox and hope to maintain clean code as suggested by the FormData API. Can anyone successfully extract an image from a canvas and include it in the POST payload as a file? Ideally, I'd like to access it in request.FILES within Django.

javascript ajax form-data

Answer 1

Answer №1

One element that seems to be overlooked is the asynchronous nature of JavaScript within your ajaxSubmit method -

function ajaxSubmit(){
    var fd = new FormData(document.forms[0]);
    ic0.toBlob(function(blob){
        fd.set("image0", blob, "image0.jpg");
    }, "image/jpeg", 0.7);                // this call operates asynchronously
    tc0.toBlob(function(blob){
        fd.set("thumb0", blob, "thumb0.jpg");
    }, "image/jpeg", 0.7);                // similarly, this call is also asynchronous
    /*
       Consequently, the code below may execute before
          fd.set("image0", blob, "image0.jpg");
       this statement. As a result, the canvas files are not submitted.
    */
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/ajax-upload/", true);
    xhr.send(fd);
}

To sync the code, you can adjust it as follows:

function ajaxSubmit(){
   var fd = new FormData(document.forms[0]);
   ic0.toBlob(function(blob){
      fd.set("image0", blob, "image0.jpg");
      tc0.toBlob(function(blob){
         fd.set("thumb0", blob, "thumb0.jpg");
         console.log(blob);
         console.log("Just processed thumb0");

         var xhr = new XMLHttpRequest();
         xhr.open("POST", "fileuploadbackend.jsp", true);
         xhr.send(fd);
      }, "image/jpeg", 0.7);

   }, "image/jpeg", 0.7);
}

Also, as advised by jornare, consider commenting out the line

URL.revokeObjectURL(img.src);

This line is causing an error in Chrome. Call it after the image has finished loading.

You have multiple elements with the same id,

<input id="image0" name="image0" type="file" />
<label for="image0">image0</label> 
<input id="image0" name="thumb0" type="file" />

Although this isn't causing issues in your code, different ids should be used.

UPDATE

Here's the functioning fiddle.

Please remember to update the request URL according to your requirements.

Explore the following links to delve deeper into the asynchronous behavior of JavaScript and how AJAX request callbacks are managed.

Understanding Asynchronous JavaScript Execution
Mozilla Developer - Synchronous and Asynchronous Requests
How JavaScript Manages AJAX Requests in the Background

Answer 2

One element that seems to be overlooked is the asynchronous nature of JavaScript within your ajaxSubmit method -

function ajaxSubmit(){
    var fd = new FormData(document.forms[0]);
    ic0.toBlob(function(blob){
        fd.set("image0", blob, "image0.jpg");
    }, "image/jpeg", 0.7);                // this call operates asynchronously
    tc0.toBlob(function(blob){
        fd.set("thumb0", blob, "thumb0.jpg");
    }, "image/jpeg", 0.7);                // similarly, this call is also asynchronous
    /*
       Consequently, the code below may execute before
          fd.set("image0", blob, "image0.jpg");
       this statement. As a result, the canvas files are not submitted.
    */
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/ajax-upload/", true);
    xhr.send(fd);
}

To sync the code, you can adjust it as follows:

function ajaxSubmit(){
   var fd = new FormData(document.forms[0]);
   ic0.toBlob(function(blob){
      fd.set("image0", blob, "image0.jpg");
      tc0.toBlob(function(blob){
         fd.set("thumb0", blob, "thumb0.jpg");
         console.log(blob);
         console.log("Just processed thumb0");

         var xhr = new XMLHttpRequest();
         xhr.open("POST", "fileuploadbackend.jsp", true);
         xhr.send(fd);
      }, "image/jpeg", 0.7);

   }, "image/jpeg", 0.7);
}

Also, as advised by jornare, consider commenting out the line

URL.revokeObjectURL(img.src);

This line is causing an error in Chrome. Call it after the image has finished loading.

You have multiple elements with the same id,

<input id="image0" name="image0" type="file" />
<label for="image0">image0</label> 
<input id="image0" name="thumb0" type="file" />

Although this isn't causing issues in your code, different ids should be used.

UPDATE

Here's the functioning fiddle.

Please remember to update the request URL according to your requirements.

Explore the following links to delve deeper into the asynchronous behavior of JavaScript and how AJAX request callbacks are managed.

Understanding Asynchronous JavaScript Execution
Mozilla Developer - Synchronous and Asynchronous Requests
How JavaScript Manages AJAX Requests in the Background

Answer 3

Answer №2

Upon reviewing your code on Fiddle, it appears that the dataURL was being cleaned up before it could be loaded, resulting in the thumbnails not appearing (hence the 404 error).

To address this issue, I have created an updated version of your Fiddle: https://jsfiddle.net/tLqch5x2/3/

function handleFiles(e){
    var img = new Image();
    img.onload = function(){
        var width = 30;
        var height = img.height * 30/img.width;
        e.target.ic0.width = width ;
        e.target.ic0.height = height ;
        e.target.tc0.width = width/2 ;
        e.target.tc0.height = height/2;
        var ctx = e.target.ic0.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        ctx = e.target.tc0.getContext("2d");
        ctx.drawImage(img, 0, 0, width/2, height/2);
        URL.revokeObjectURL(img.src); //cleanup memory here instead
    };
    img.src = URL.createObjectURL(e.target.files[0]);
    //perform cleanup to prevent memory leak
    //URL.revokeObjectURL(img.src); //too early
}

In testing the updated Fiddle, there still seems to be a 404 error due to attempting to post to a non-existent URL on jsfiddle.net. I recommend running the code in your own environment for further testing.

Additionally, I made some minor modifications to both the HTML and code sections such as correcting image naming conventions and eliminating unnecessary references to existing forms when creating new ones for submission.

Answer 4

Upon reviewing your code on Fiddle, it appears that the dataURL was being cleaned up before it could be loaded, resulting in the thumbnails not appearing (hence the 404 error).

To address this issue, I have created an updated version of your Fiddle: https://jsfiddle.net/tLqch5x2/3/

function handleFiles(e){
    var img = new Image();
    img.onload = function(){
        var width = 30;
        var height = img.height * 30/img.width;
        e.target.ic0.width = width ;
        e.target.ic0.height = height ;
        e.target.tc0.width = width/2 ;
        e.target.tc0.height = height/2;
        var ctx = e.target.ic0.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        ctx = e.target.tc0.getContext("2d");
        ctx.drawImage(img, 0, 0, width/2, height/2);
        URL.revokeObjectURL(img.src); //cleanup memory here instead
    };
    img.src = URL.createObjectURL(e.target.files[0]);
    //perform cleanup to prevent memory leak
    //URL.revokeObjectURL(img.src); //too early
}

In testing the updated Fiddle, there still seems to be a 404 error due to attempting to post to a non-existent URL on jsfiddle.net. I recommend running the code in your own environment for further testing.

Additionally, I made some minor modifications to both the HTML and code sections such as correcting image naming conventions and eliminating unnecessary references to existing forms when creating new ones for submission.

My attempts to transfer the blob payload via FormData were unsuccessful

Chrome 50 (in Ubuntu)

Firefox 46 (in Ubuntu)

Answer №1

Answer №2

Similar questions

When using AngularJS ng-repeat to populate a table, three empty rows are mistakenly created instead of repeating the content

What techniques did Google Maps use to incorporate multiple click-event handlers within a single image?

Top choice for removing items from a list array

Sending a group of checkboxes via Ajax using AngularJS

Using ReactJS to integrate a pananorama application with Three.js

Conceal element with Wicket while AjaxButton is loading lazily

My date function in Node JS is throwing an error, can someone please help me troubleshoot?

Component does not detect change when the same number is sent as input

When using JS, the open and close buttons function properly, however, the escape key always attempts to close the most recent modal

What kind of content can be duplicated but remains untraceable through search engines?

Is it possible to open a new tab by clicking on an anchor tag

Performing complete postbacks using ASP.Net AJAX on an ASP.NET webpage embedded within an IFRAME

Invoking Swift from a UIWebView using Javascript

Employ node's gm library in combination with promises and buffers

Creating your own XSRF protection system using Laravel and React

Exchanging items through Drag and Drop

Securing access for a Single Page Application and a Node.js server

Tips for adjusting the status bar color in iOS for a React Native drawer

Issues arise with the functionality of Zurb Foundation 5 tabs

"Using PHP functionality based on the output of a JavaScript function