How to get path from html5 input field file object for phonegap

Question

How do you get a path from a file object which is returned from an html5 input field?

Basically the phonegap app is setup to go online and download a sound file from a thirdparty website, then browse to the downloaded file and move it to the local directory. (short < 1 sec sound files).

The problem is that file objects attribute .fullPath is undefined. and getFile takes a path input, not an [object File] input.

From the following code:

<input style="opacity:0;" type="file" name="soundInput" id="soundInput"/>

<script type="text/javascript" charset="utf-8">
    var soundInput = document.getElementById('soundInput');
    soundInput.addEventListener('change', function(){handleFileSelect(type);}, false);
    soundInput.click();

    function handleFileSelect() {
        var file = this.files[0]; // FileList object
        var type = isThumpy;

        alert("file = " + file.name + "\n full path = " + file.fullPath);

        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
            gotFS(fs,file,type);
        }, fail);
    }

    function fail(error) {
        alert("error " + error.code);
    }

    function gotFS(fileSystem, file, type) {
        alert("got filesystem");
        var flags = {create: false, exclusive: false};
        fileSystem.root.getFile(file, flags, function(fe){
            gotFileEntry(type,fe);
        },fail);
    }

    function gotFileEntry(type, fileEntry) {
        alert("got fileEntry");
        fileEntry.copyTo(path, function(fe){successfulCopy(type, fe);}, fail);
    }

    function successfulCopy(type, fileEntry) {
        alert("copy success");
        setSoundByUri(type, fileEntry.name)
    }
</script>

It doesn't get past "got filesystem", and it doesn't throw an error ("error " + error.code). Please help.

izzy · Answer 1 · 2013-07-12T22:04:14.200

You can not get the path data from a file input. File inputs are read only. Try changing the approach. Use the phoneGap fileEntry to create the new file and write data from the file input to it.

like this:

<script type="text/javascript" charset="utf-8">
function handleFileSelect(type) {
    var file = this.files[0]; // FileList object
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
        gotFS(fs,file,type);
    }, fail);

}

function gotFS(fileSystem, file, type) {
    var flags = {create: true, exclusive: false};
    fileSystem.root.getFile(file.name, flags, function(fe) {gotFileEntry(fe, file, type);}, fail);
}

function gotFileEntry(fileEntry, file, type) {
    fileEntry.createWriter(function(w){gotFileWriter(w, file, type);}, fail);
}

function gotFileWriter(fileWriter, file, type) {
    fileWriter.onwriteend = function(evt){setSoundByUri(type, path + file.name);};
    var reader = new FileReader();
    reader.onload = function(event) {
        var rawData = event.target.result;
        fileWriter.write(rawData);
    };
    reader.onerror = function(event){
        alert("error, file could not be read" + event.target.error.code);
    };
    reader.readAsArrayBuffer(file);
}

function fail(error) {
    alert("error " + error.code);
    if (error.code == FileError.PATH_EXISTS_ERR){
        alert("The file already exists.");
    }
}
</script>

I try running the code above and it freezes without an error on the console log in either weinre or phonegap-desktop ... — izzy, Jul 12 '13 at 20:07
Okay, I fixed all there error in the code, but it throws an error code 5 when I try to run it. — izzy, Jul 12 '13 at 21:06
Error code 5 might mean there is a problem with the path. To setup the path correctly see the following post, http://stackoverflow.com/questions/6417055/download-files-and-store-them-locally-with-phonegap-jquery-mobile-android-and-io — izzy, Jul 12 '13 at 21:09
I got it, it doesn't need a path, just a file name and the path will auto populate depending on the platform, slick! Thanks a million. updated answer to correct typos. — izzy, Jul 12 '13 at 21:55

How to get path from html5 input field file object for phonegap

1 Answers1