ios converting file to blob in CDVWKWebViewEngine ionic cordova angularJS

468 views Asked by At

Just trying my luck here.

I've been tasked to update a Ionic 1, AngularJS, Cordova app for the changes in iOS camera and file permissions.

In most areas on the app I can simply convertFileSrc and trustAsResourceUrl to retrieve and display in the app. In the scenario below I need to convert the new safe ionic path to a blob for posting.

original file path format: file:///var/mobile/Containers/Data/Application/10298A9F-7E24-48C4-912D-996EA731F2B0/Library/NoCloud/cdv_photo_001.jpg

after sanitising: ionic://localhost/app_file/var/mobile/Containers/Data/Application/10298A9F-7E24-48C4-912D-996EA731F2B0/Library/NoCloud/cdv_photo_001.jpg

below is what I've tried so far:

function getDirectory(path) {
    return path.substr(0, path.lastIndexOf('/'));
}

function getFilename(path) {
    return path.substr(path.lastIndexOf('/') + 1);
}


      function getImage(path) {
            const pathStr = path;

            if (window.ionic.Platform.isIOS() && typeof path === 'string') {
                const fixedURL = window.Ionic.WebView.convertFileSrc(path);
                path = $sce.trustAsResourceUrl(fixedURL);
            } 

            if (typeof navigator.camera === 'undefined') {
                return window.fetch(path, { method: 'GET' })
                    .then(function(response) {
                        return response.blob();
                    });
            }

            const filename = getFilename(`${path}`);
            const directory = getDirectory(`${path}`);

            return $cordovaFile.readAsArrayBuffer(directory, filename)
                .catch(function(error) {
                    const err = {
                        message: 'read failed for image',
                        filename,
                        directory,
                        error
                    };
                    $log.error(`getImage, Error: ${JSON.stringify(err)}`);
                    return $q.reject(err);
                })
                .then(function(data) {
                    return new Blob([data], { type: 'image/jpeg' });
                });
        }
1

There are 1 answers

0
digital-pollution On

for anyone else who might need to do this in the future I figured out that it was the location of saved files casuing the problem.

In the cordova getPicture config I just needed to add

saveToPhotoAlbum: true

from there the file can just be pulled with the fetch api within the need for $cordovaFile:

return window.fetch(path, { method: 'GET' })
         .then(function(response) {
          return response.blob();
});