3

I really want to load the source of a video from my applications cache. In the native part of my application I'm saving a video to a folder within a folder within caches.

/var/mobile/Containers/Data/Application/639797B4-1726-4350-91D7-2E212ACB974D/Library/Caches/.../.../clip.mov

So I was looking into using the cordova file plugin:

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html#display-an-image-file-

and honestly I'm so confused as to how I'm supposed to implement it. I've done almost nothing on the web side of the application. Just a few basic functions and I'm sort of unsure as to how to do this and where I am supposed to do it. I understand that it's supposed to come after the device is ready.

all I want to do is read the file but it says I need a fileEntry object for which I think I need to create a temporary or persistant file. (Not sure which is appropriate because I only want to use the file temporarily but I am saving it into the file caches file system so I guess it's persistant?) I'm just generally confused about what I need to include.

Below is my barebones JS:

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        ...
        //some button events
        ...
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        // <---
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};
app.initialize();

if anybody could point me in the right direction it would be greatly appreciated.

Thanks.

AlecGamble
  • 109
  • 6

1 Answers1

1

Here you have, with this code you can take the file from the path you said, and have it in Base64 in a variable. In base of this you can do wherever you want with it.

window.resolveLocalFileSystemURL(cordova.file.applicationStorageDirectory, function(dir) {
          console.log("got main dir",dir);

          dir.getFile("clip.mov", {create:false}, function(fileEntry) {
            console.log("got the file", fileEntry);
            fileEntry.file(function(file) {
              var reader = new FileReader();
              reader.onloadend = function(e) {
                //In this e you have your file
                console.log(e);
              };
              reader.readAsDataURL(file);
            });
          });
        }, function(err) {
            console.log(err);
        });
Víctor
  • 3,029
  • 3
  • 28
  • 43
  • Hi, thanks for your response this seems really helpful. However window.resolveLocalFileSystemURL doesn't seem to be firing for me. I've tried putting it in several locations including inside the onDeviceReady event as indicated in my question and after app.initialize() however I'm not even getting a response from console.log or an alert. Any ideas? – AlecGamble May 23 '16 at 09:57
  • Do you have cordova file plugin installed? – Víctor May 23 '16 at 10:00
  • so at the moment I have a log before the function which fires, one in the function which doesn't fire, one in the error catching which doesn't fire and one after which doesn't fire. Apart from that I've commented out all of the contents so it seems like it's getting stuck on the function itself for some reason. – AlecGamble May 24 '16 at 09:01