Drag, drop upload with new W3C standards problem

Josh

unread,

Sep 8, 2010, 12:14:23 PM9/8/10

to Chromium HTML5

Hello

I'm on chrome 6, trying to build a simple drag and drop upload using
the new W3C standards - File API / blob and the updated
XMLHTTPRequest.

I have ran into problems setting the right request headers for files.
Every time I try to drop a file on a canvas, I am able to get the file
via the dataTransfer object. I set the variable "file" as that
object, set the headers and send the file through the XMLHttpRequest.
However on my readystatechange I notice that my status is always 400
and nothing actually gets sent to the php file. I was wondering if
anyone could help me spot the problem with my headers / code or have
any advice as to how to implement this sort of feature.

Code:
var url = "upload.php";
var request = new XMLHttpRequest();
... function drop( evt ) {
var file = evt.dataTransfer.files[0]; //only one drag and drop file
object.
request.open( "POST", url, true ); // open asynchronous post request

request.onreadystatechange=function() {
alert( "readyState: " + request.readyState );
alert( "status: " + request.status );
}

request.setRequestHeader('Content-Type', 'multipart/form-data');
request.setRequestHeader('X-File-Name', file.fileName);
request.setRequestHeader('X-File-Size', file.fileSize);
request.setRequestHeader('X-File-Type', file.type);
request.send(file);
}

thanks in advance

Eric Bidelman

unread,

Sep 8, 2010, 1:33:40 PM9/8/10

to Josh, Chromium HTML5

Have you considered xhr.send(FormData)? Here's a test case that worked well for me:

<!DOCTYPE html>

<html>

<head>

<title>xhr.send(FormData)</title>

</head>

<body>

<br/>

document.querySelector('#afile').addEventListener('change', function(e) {

var formData = new FormData();
//formData.append("username", "Larry");
//formData.append("accountnum", 123456);

// Could also get a ref to the File obj from dnd from the desktop.

formData.append("afile", this.files[0]);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'handle_file_upload.php', true);
xhr.send(formData);
xhr.onreadystatechange = function() {

  if (this.readyState == 4 && this.status == 200) {
   var resp = JSON.parse(this.responseText);

   var image = new Image();
   image.src = resp.dataUrl;
   document.body.appendChild(image);

  }
};

}, false);

</script>

</body>

</html>

====

<?php

$fileName = $_FILES['afile']['name'];

$fileType = $_FILES['afile']['type'];

$fileContent = file_get_contents($_FILES['afile']['tmp_name']);

$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

echo json_encode(array(

'name' => $fileName,

'type' => $fileType,

'dataUrl' => $dataUrl,

'username' => $_REQUEST['username'],

'accountnum' => $_REQUEST['accountnum']

));

?>

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

--
Eric Bidelman
Developer Relations - Google
e.bid...@google.com

Josh

unread,

Sep 8, 2010, 10:18:42 PM9/8/10

to Chromium HTML5

That seemed to have worked.

I realize that you don't need the <input> tag. But aside from
everything else, it worked like a charm.

Thanks Eric.

> > To post to this group, send email to chromium-ht...@chromium.org.

> > To unsubscribe from this group, send email to

> > chromium-html5+unsubscr...@chromium.org<chromium-html5%2Bunsubscr...@chromium.org>
> > .

> > For more options, visit this group at
> >http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.
>
> --
> Eric Bidelman
> Developer Relations - Google

> e.bidel...@google.com

Eric Bidelman

unread,

Sep 8, 2010, 10:51:57 PM9/8/10

to Josh, Chromium HTML5

Excellent! Glad it worked for ya.

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

--
Eric Bidelman
Developer Relations - Google

e.bid...@google.com

Reply all

Reply to author

Forward