SimpleHTTPServerWithUpload.py post image via javascript

Question

..using SimpleHTTPServerWithUpload.py (or any fork of it) https://gist.github.com/arulrajnet/af376482bbe95346824e419b7c9cbdd0

..it works fine using curl: i.e. curl -F file=@/path/file.ext localhost:8000

..but cant seem to get the header correct when submitting via javascript, I get various errors/hangs depending on how the header is set / not set. tried hundreds of combinations, added timeouts btween image-creation and submission but no joy.

..I'm noob w/ javascript and even less w/ python so cant really tell what SimpleHTTPServerWithUpload is expecting.

function sendBase64ToServer(name){

// make a canvas and fill it
var mycanvas = document.createElement("canvas");
document.body.appendChild(mycanvas);
var context = mycanvas.getContext("2d");
context.rect(0, 0, 80, 80);
context.fillStyle = 'yellow';
context.fill();

// convert to base64 data
var dataURL = mycanvas.toDataURL("image/png");

var url = "http://localhost:8000";
var httpPost = new XMLHttpRequest();
    httpPost.open("POST", url, true);

// Set headers ..tried all/every combination
//httpPost.setRequestHeader("Content-Type", "multipart/form-data");
//httpPost.setRequestHeader("Content-enctype", "multipart/form-data");
//httpPost.setRequestHeader("ENCTYPE", "multipart/form-data");
//httpPost.setRequestHeader("Cache-Control", "no-cache");
//httpPost.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//httpPost.setRequestHeader("X-File-Name", name);
//httpPost.setRequestHeader("X-File-Size", dataURL.length);
//httpPost.setRequestHeader("X-File-Type", 'image/png');

httpPost.send(dataURL);

}

..even tried converting to json first ..but still nothing

var data = JSON.stringify({image: dataURL});
var httpPost = new XMLHttpRequest();    
httpPost.open("POST", url, true);
// various header settings here too
httpPost.send(data);

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

Try sending a Blob:

httpPost.send(new Blob([dataURL], { type: "image/png" }));

I believe that should do all the required wiring for you. You may need to convert the data uri like in this answer: https://stackoverflow.com/a/5100158/724626

edited May 23 '17 at 12:00

Community

1
1

answered Dec 23 '16 at 18:01

Joe

80,724
18
127
145

thanks for the quick response, ..forgot to mention I tried blob like your example, ..and just tried converting it as suggested in your link but all still get basically the same thing. this time was a bit different, got a response from the server – David M Dec 23 '16 at 18:47
..from the server: File "./SimpleUpload.py", line 85, in deal_post_data boundary = self.headers.plisttext.split("=")[1] IndexError: list index out of range ---------------------------------------- – David M Dec 23 '16 at 18:48

score 1 · Accepted Answer · edited May 23 '17 at 12:00

..figured it out finally. two things that got it to work. 1. needed to convert the blob to something more binary per the link suggested by Joe above https://stackoverflow.com/a/5100158/724626 2. SimpleHTTPServerWithUpload is expecting a "file" not just data.

Here is the complete example for anybody interested. leaving the original question as it may be useful to document what does not work.

function sendBase64ToServer(name){

// make a canvas and fill it
var mycanvas = document.createElement("canvas");
document.body.appendChild(mycanvas);
var context = mycanvas.getContext("2d");
context.rect(0, 0, 80, 80);
context.fillStyle = 'yellow';
context.fill();

var dataUrl = mycanvas.toDataURL();

// convert base64/URLEncoded data to raw binary data held in a string
var blob = dataURItoBlob(dataUrl);

// SimpleHTTPServerWithUpload is expecting a "File"
var fileOfBlob = new File([blob], 'testSave.png'); 

// add the file to a form
var formData = new FormData();
    formData.append("file", fileOfBlob);

// send it
var url = "http://localhost:8000";
var httpPost = new XMLHttpRequest();
    httpPost.open("POST", url, true);
    httpPost.send(formData);

}

SimpleHTTPServerWithUpload.py post image via javascript

2 Answers2