• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

html5 uploading problem with XHR

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

rebelwarlock

Member
Joined
Dec 13, 2004
I'm going to go ahead and post my problem here, but it's also on stack overflow. If you have a stack overflow account and would like to claim the bounty, jump on over to http://stackoverflow.com/questions/7155975/uploading-problem-with-xmlhttprequest-level-2

Either way works for me. On to my question:

I'm attempting to upload a file via drag and drop with HTML5. The dragging and dropping bit works no problem - I can get the image I drag to display immediately by dumping the base64 in an img src tag. However, I need to pass the file to the server via POST. In the same request, I also need to pass a unique ID. Here's what my processing function looks like:

Code:
 function processXHR (file)
    {
    	var xhr = new XMLHttpRequest();	
    	var fileUpload = xhr.upload;
    					
    	fileUpload.addEventListener("progress", uploadProgressXHR, false);
    	
    	fileUpload.addEventListener("error", uploadErrorXHR, false);
    	
    	xhr.open("POST", "changePicture");
    	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    	xhr.setRequestHeader("Content-length", file.length);
    	
    	xhr.sendAsBinary(file.getAsBinary());
    	xhr.setRequestHeader("Connection", "close");
    	
    }

However, doing this returns an error from codeigniter: "Disallowed Key Characters". Also, it's not sending the unique ID I need. So I changed a few lines:

Code:
var params = "card_num="+selected+"&newPicture="+file.getAsBinary();
xhr.open("POST", "changePicture");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.send(params);
xhr.setRequestHeader("Connection", "close");

But that just sends the file as a string. What do I need to be doing here?
 
Back