CODEWITHSUNDEEP
filecordovauploadxmlhttprequestcordova-plugin-file
Marcus
Marcus

Reputation: 11

Select local file via cordova-plugin-file and upload it via xhr

In my cordova app, a user can record an audio file (via media plugin) which is then stored in the local file (cordova.file.dataDirectory) - this works like a charm.

I now want to select this file and upload it via xhr but the file element is empty on the server side. This is how my code looks like:

window.resolveLocalFileSystemURL(
    cordova.file.dataDirectory + "" + voiceMediaFilename,  
    function(fileEntry) {
      console.log("resolveLocalFileSystemURL done for " + voiceMediaFilename);
      fileEntry.file(
        function(file){
          console.log("getFile done for " + voiceMediaFilename);
          console.log("file done, starting fd ...");
          var fd = new FormData();
          fd.append("sender", uuid);
          fd.append("receiver", receiver);
          fd.append("timestamp", timestamp);
          fd.append("random", random);
          fd.append("media", file);
          console.log(file);
          console.log("Filesize of audio: " + file.size);
          uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
          voiceMediaFilename = "";
        }, 
        function(err){
          alert("Error getting file");
        }
      );
          },
    function(err){
      alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
    }
  );

The uploadMedia() function itself performs the xhr request - the function works because I am using it also in other cases (e.g. user selects a file via input type file). I assume I am missing something in order to really select the file object but I do not really know what.

Thanks

Upvotes: 1

Views: 906

Answers (1)

Marcus
Marcus

Reputation: 11

Finally figured it out - maybe it helps someone else.

It is required to read the file as an ArrayBuffer (blob) in order to be able to add this Blob to the FormData object.

This is how my final code looks like:

window.resolveLocalFileSystemURL(
cordova.file.dataDirectory + voiceMediaFilename,  
function(fileEntry) {
    fileEntry.file(function(file){
        console.log("getFile done for " + voiceMediaFilename);
        var reader = new FileReader();
        reader.onloadend = function() {
            console.log("reader done, starting fd ...");
            var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
            var fd = new FormData();
            fd.append("sender", uuid);
            fd.append("receiver", receiver);
            fd.append("timestamp", timestamp);
            fd.append("random", random);
            fd.append("type", messageTypeOwn);
            fd.append("duration", audioDuration);
            fd.append("media", blob, voiceMediaFilename);
            uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
            voiceMediaFilename = "";
        };
        reader.readAsArrayBuffer(file);
    }, 
    function(err){
        alert("Error getting file");
    });
},
function(err){
    alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
});

Upvotes: 0

Related Questions