89

Admittedly, there are similar questions lying around on Stack Overflow, but it seems none quite meet my requirements.

Here is what I'm looking to do:

  • Upload an entire form of data, one piece of which is a single file
  • Work with Codeigniter's file upload library

Up until here, all is well. The data gets in my database as I need it. But I'd also like to submit my form via an AJAX post:

  • Using the native HTML5 File API, not flash or an iframe solution
  • Preferably interfacing with the low-level .ajax() jQuery method

I think I could imagine how to do this by auto-uploading the file when the field's value changes using pure javascript, but I'd rather do it all in one fell swoop on for submit in jQuery. I'm thinking it's not possible to do via query strings as I need to pass the entire file object, but I'm a little lost on what to do at this point.

Can this be achieved?

2

2 Answers 2

97

It's not too hard. Firstly, take a look at FileReader Interface.

So, when the form is submitted, catch the submission process and

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

Then, on the server side (i.e. myscript.php):

$data = $_POST['data'];
$fileName = $_POST['name'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

Or something like it. I may be mistaken (and if I am, please, correct me), but this should store the file as something like 1287916771myPicture.jpg in /uploads/ on your server, and respond with a JSON variable (to a continueSubmission() function) containing the fileName on the server.

Check out fwrite() and jQuery.post().

On the above page it details how to use readAsBinaryString(), readAsDataUrl(), and readAsArrayBuffer() for your other needs (e.g. images, videos, etc).

9
  • Hey Clark, am I understanding correctly? This will send the uploaded file as soon as it's loaded into the FileReader constructor from the file system, bypassing jQuery's low-level .ajax handler. Then the rest of the form will submit as normal? Commented Oct 24, 2010 at 4:16
  • All right, so I was wrong in my understanding before. Now I'm taking the readAsDataUrl of an image, adding it to my datastring in .ajax, and submitting all my info together. My previous solution involved CodeIgniter's default file input class which grabbed data from $_FILES['field'], so it looks like I'll need to switch to a different solution for parsing the base64 image data. Any advice on that is welcomed, upvoting your answer here, and once I finish implementation, I'll mark it as correct. Commented Oct 24, 2010 at 7:13
  • 1
    @Joshua Cody - I updated the answer to give a little more detail. You'll have to forgive that I haven't used CodeIgniter in many moons and couldn't tell you how to integrate this into their codebase. I'm not sure why you need to upload the file before submission, but this should at least give you a clue. (You could also insert the image into a database if that's better for you).
    – clarkf
    Commented Oct 24, 2010 at 9:43
  • @Clarkf, I don't need to upload before submission, I was misunderstanding your previous example :) After SO went down and I spent some time on the w3 and HTML5Rocks, I started to understand. I'll give this a shot and be back here. Commented Oct 24, 2010 at 15:11
  • 1
    All right, been messing with this all morning. PHP seems to be returning badly-formatted files. See two images, one rendered immediately and the other after a $_POST to the server and immediate echo. A diff on the two elements reveals this, that apparently PHP is stripping all "+" characters. A str_replace fixes this for immediate return, but the file that's saved is still corrupt and can't be opened via my file system. Also, going ahead and marking this as correct. Thanks so much for your help so far. Commented Oct 24, 2010 at 17:26
6

With jQuery (and without FormData API) you can use something like this:

function readFile(file){
   var loader = new FileReader();
   var def = $.Deferred(), promise = def.promise();

   //--- provide classic deferred interface
   loader.onload = function (e) { def.resolve(e.target.result); };
   loader.onprogress = loader.onloadstart = function (e) { def.notify(e); };
   loader.onerror = loader.onabort = function (e) { def.reject(e); };
   promise.abort = function () { return loader.abort.apply(loader, arguments); };

   loader.readAsBinaryString(file);

   return promise;
}

function upload(url, data){
    var def = $.Deferred(), promise = def.promise();
    var mul = buildMultipart(data);
    var req = $.ajax({
        url: url,
        data: mul.data,
        processData: false,
        type: "post",
        async: true,
        contentType: "multipart/form-data; boundary="+mul.bound,
        xhr: function() {
            var xhr = jQuery.ajaxSettings.xhr();
            if (xhr.upload) {

                xhr.upload.addEventListener('progress', function(event) {
                    var percent = 0;
                    var position = event.loaded || event.position; /*event.position is deprecated*/
                    var total = event.total;
                    if (event.lengthComputable) {
                        percent = Math.ceil(position / total * 100);
                        def.notify(percent);
                    }                    
                }, false);
            }
            return xhr;
        }
    });
    req.done(function(){ def.resolve.apply(def, arguments); })
       .fail(function(){ def.reject.apply(def, arguments); });

    promise.abort = function(){ return req.abort.apply(req, arguments); }

    return promise;
}

var buildMultipart = function(data){
    var key, crunks = [], bound = false;
    while (!bound) {
        bound = $.md5 ? $.md5(new Date().valueOf()) : (new Date().valueOf());
        for (key in data) if (~data[key].indexOf(bound)) { bound = false; continue; }
    }

    for (var key = 0, l = data.length; key < l; key++){
        if (typeof(data[key].value) !== "string") {
            crunks.push("--"+bound+"\r\n"+
                "Content-Disposition: form-data; name=\""+data[key].name+"\"; filename=\""+data[key].value[1]+"\"\r\n"+
                "Content-Type: application/octet-stream\r\n"+
                "Content-Transfer-Encoding: binary\r\n\r\n"+
                data[key].value[0]);
        }else{
            crunks.push("--"+bound+"\r\n"+
                "Content-Disposition: form-data; name=\""+data[key].name+"\"\r\n\r\n"+
                data[key].value);
        }
    }

    return {
        bound: bound,
        data: crunks.join("\r\n")+"\r\n--"+bound+"--"
    };
};

//----------
//---------- On submit form:
var form = $("form");
var $file = form.find("#file");
readFile($file[0].files[0]).done(function(fileData){
   var formData = form.find(":input:not('#file')").serializeArray();
   formData.file = [fileData, $file[0].files[0].name];
   upload(form.attr("action"), formData).done(function(){ alert("successfully uploaded!"); });
});

With FormData API you just have to add all fields of your form to FormData object and send it via $.ajax({ url: url, data: formData, processData: false, contentType: false, type:"POST"})

1
  • 3
    This solution does not address the limitation that XMLHttpRequest.send() imposes upon the data funnelled through it. When passed a string (such as your multipart), send() does not support binary data. Your multipart here will be treated as a utf-8 string, and will choke on or corrupt binary data that is not valid utf-8. If you really need to avoid FormData, you need to use XMLHttpRequest.sendAsBinary() (polyfill available. Unfortunately this means that using jQuery for the ajax call becomes much more difficult.
    – user2609094
    Commented Jul 24, 2013 at 11:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.