read images and upload, after

Question

What I'm trying to accomplish

[x] 1) User fills out form

[x] 2) User adds images to form through "drag & drop (html5)" or by "click to choose images" and a preview is displayed on the page. (done) Here it's easy to add code to trigger an upload of theese images to the server but I don't want that just yet.

[x] 3) Users clicks "add me & my desk" --> Create user account if doesn't already exist

[x] 4) Desk is added, and a connection to the right user is added as well.

[x] 5) Create a folder with the same name (id) as the desk_id.

::::THE QUESTION::::

6) -->> now I want to upload those dragged and dropped, or selected images to that folder.

:::::::::::::::::::

I've gotten this far with the information I found here: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (the actual page really rocks!9

I know about this awesome solution: http://blueimp.github.com/jQuery-File-Upload/ But it's overkill for what I'm trying to do, and I happen to be so proud that I've got everything else working, and I really do think I'm so close.

words and expressions that keep coming up: read blob, check array blob, read from sandbox, canvas.toDataURL()

I feel that the answer is here: http://www.html5rocks.com/en/tutorials/file/xhr2/ AND / OR HERE http://www.html5rocks.com/en/tutorials/file/dndfiles/ Or HERE / http://www.html5rocks.com/en/tutorials/file/filesystem/ (under "Duplicating user-selected files"), OR HERE http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

You could say I'm at the next step after this: Preview an image before it is uploaded but perhaps I could get a push in the right direction? :)

Of course I've had a look at these: HTML5 Pre-resize images before uploading facebook js api - HTML5 canvas upload as a photo

Currently displaying preview from DND files like this:

for (var i = 0, f; f = uppladdadeFiler[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb preview" src="', e.target.result,
                          '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('listImages').insertBefore(span, null);

        var span2 = document.createElement('span');
        span2.innerHTML = ['<img class="thumb inside" src="', e.target.result,
        '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('huvudbilden').insertBefore(span2, null);
      };        
    })(f);
        $('#valdaBilder').show();

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }

Answer 1

I will give you some inputs which I hope will lead you in the right direction. Please note that I am not providing an off-the-shelf working answer because of two reasons - 1. I am just too lazy:) and 2. from what I can see you are smart enough to figure it out once you get the gist of it... so here goes:

First thing to do is have a button named, say, 'Upload Files' and attach a fn to it like uploadFiles(). Now this function will look something like below:

function uploadFiles()
{
    var file = files[0]; 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    { 
        if (xhr.readyState==4 && xhr.status==200) 
        alert(xhr.responseText);
    };   
    xhr.open('POST', '/upload.php', true);
    xhr.setRequestHeader('X-FILE-NAME', file.name);
    xhr.send(file);
}

Ok, so the explanation:

var file = files[0];

The files object array should be something that you create in your drag and drop eventlistener functions, which will be file objects representing the files you dropped into the dropzone. Usually you create them so: files = event.dataTransfer.files; which creates a FileList object named files In the example I am only considering the first file in the dropzone - hence files[0]

I guess the rest of the code is pretty self-explanatory. One thing to note is:

 xhr.setRequestHeader('X-FILE-NAME', file.name);
 xhr.send(file);

As you can see we are sending out raw binary data content to the server. So the post operation is writing into the server stream with raw binary data of what the file contains. This is an important point because this affects how the server is able to read this posted data.

Server side upload.php: I am just going to read the first 1000 bytes of the uploaded file and print it back into the client (which, based on the javascript code above, will alert it into the browser)

<?php
$streamHandle = fopen("php://input","rb");
$streamContent = fread($streamHandle,1000);
echo $streamContent;
?>

Many people get confused on how to read content at the server side and think about using $_POST, or $_FILES, but if you are sending data using X-FILE-NAME, then you have to read it by opening a handle to php://input which is the standard input stream of the running php process.

Once you have read the stream, it is only a matter of fwrite-ing it into a new file in whatever directory you want to.

Like I said, this is not a turn-key solution that you can just copy-paste into your particular code, but I hope this helps you in looking in the right direction for file uploads using HTML5's drag and drop and the file API provided by Javascript to support it.