javascriptandroidcordovahtml5-filesystemcordova-plugin-file

How to save file in cordova project?


I am trying to save a file with cordova-plugin-file. The script seems to work but I cannot locate the file on the device and cdv: references don't seem to resolve.

export const SaveFile = function(fFile, sFileName) {
    return new Promise((resolve, reject) => {
        console.log("requestFilesystem", fFile);
        window.requestFileSystem(
            LocalFileSystem.PERSISTENT,
            fFile.size,
            function(fs) {
                console.log("got fs", fs);
                fs.root.getFile(
                    sFileName,
                    { create: true, exclusive: false },
                    function(fileEntry) {
                        console.log("got fileentry", fileEntry);
                        fileEntry.createWriter(function(fileWriter) {
                            fileWriter.onwriteend = (eEvent) => {
                                console.log(
                                    `${ fileWriter.localURL } saved`,
                                    `${ fFile.size }kb`
                                );
                                resolve(fileWriter);
                            };

                            fileWriter.onerror = (eError) => {
                                console.error('onErrorCreateWriter', JSON.stringify(eError));
                                reject(eError);
                            };

                            fileWriter.write(fFile);
                        });
                    },
                    (eError) => {
                        console.error('onErrorCreateFile', eError);
                        reject(eError);
                    }
                );
            },
            (eError) => {
                console.error('onErrorLoadFs', eError.message);
                reject(eErroreError.message);
            }
        );
    });
};

I get the following in logs:

SaveFile.js:3 requestFilesystem Blob {size: 1707639, type: "video/webm"}
SaveFile.js:8 got fs FileSystem {name: "persistent", root: DirectoryEntry}
SaveFile.js:13 got fileentry FileEntry {isFile: true, isDirectory: false, name: "1eb4d914-3d81-a313-7744-bea86b90f042.mp4", fullPath: "/1eb4d914-3d81-a313-7744-bea86b90f042.mp4", filesystem: FileSystem, …}
SaveFile.js:16 cdvfile://localhost/persistent/1eb4d914-3d81-a313-7744-bea86b90f042.mp4 saved 1707639kb

So it saved right? but i dont see the video on fs and the cdvfile: ref in a video tag comes up broken.

Video tag trying to consume the file in a component is just:

<video controls="" src="cdvfile://localhost/persistent/1eb4d914-3d81-a313-7744-bea86b90f042.mp4"></video>

Solution

  • In the end I found other steps that seem to work. I needed to request a folder (and it had to be the cache folder) before I could find fies on the phone.

    export const SaveFile = function(fFile, sFileName) {
        return new Promise((resolve, reject) => {
            window.resolveLocalFileSystemURL(
                cordova.file.externalCacheDirectory,
                function(directoryEntry) {
                    directoryEntry.getFile(
                        sFileName,
                        { create: true },
                        function(fileEntry) {
                            fileEntry.createWriter(
                                function(fileWriter) {
                                    fileWriter.onwriteend = (eEvent) => {
                                        resolve(fileWriter.localURL);
                                    };
    
                                    fileWriter.onerror = (eError) => {
                                        console.error('onErrorCreateWriter', JSON.stringify(eError));
                                        reject(eError);
                                    };
    
                                    fileWriter.write(fFile);
                                },
                                (eError) => {
                                    console.error('onErrorCreateFile', eError);
                                    reject(eError);
                                }
                            );
                        }
                    );
                }
            );
        });
    };