Get User Complete File Path for resume File Upload

Question

There might not be an answer for this, but I will still ask anyway, since I can't find anything in Google. I have a file upload site created using php and HTML5 mostly. I know that, using HTML5 chunking system, I can do some sort of pause and resume file upload by checking in the server which chunk have been uploaded. But it required the user to try upload the same file in order for it to work.

Now, I was wondering is there anyway, to get the user full file path, during the the first time user try to upload that file, so that I save that path into database. if something happened, in the site I can just tell user click here to resume (then since I have the file path, I can just auto submit, instead of requiring the user to try browse that file again).

I know if using java we are able to do that (using a signed certificate), but is there anyway using preferable php or javascript or html5 to be able to do this. I'm trying to avoid java. Or maybe any other language?

NOTE: This file upload is for huge upload (ranging from 1MB - 4GB files) and so far it works perfectly fine. It's just I'm trying to add pause/resume feature to this project.

I don't mind to buy trusted certificate or smtg for this to work

Or is there anyway, maybe to use silverlight to get the filepath, and then after I have the filepath, autosubmit it in html form for my php to processed the pause resume feature

Thank you

Answer 1

You can use FileReader and some kind of local storage to store the image locally and upload from cache. I wrote an example for a similar problem using sessionStorage here: Get complete filepath for cached images

var input = document.querySelector("#imageInput");
input.addEventListener("change", function(e){
    var reader = new FileReader();
    reader.onload = function(evt){
        var newImage = document.createElement("img");
        newImage.src = evt.target.result;
        document.querySelector("body").appendChild(newImage);
        sessionStorage.setItem("image", evt.target.result);
    };
    reader.readAsDataURL(e.target.files[0]);
}, false);

window.addEventListener("load", function(e){
    if(sessionStorage.getItem("image")){
        var newImage = document.createElement("img");
        newImage.src = sessionStorage.getItem("image");
        document.querySelector("body").appendChild(newImage);
    }
}, false);

So all you have to do is reference the cached image.