Search code examples
javascriptasp.netcordovabase64telerik-appbuilder

How to download base 64 image using cordova filetransfer


I have used cordova file transfer protocol and used download function for downloading base-64 image. When i have put remote server path like "https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" then it download but when i put base-64 image pah on filepath then it not download. I have no idea about base-64 conversion.Please help.

----My code is Below----

  function download(){
        var imageData = image.src;
        imageData = imageData.replace('data:image/png;base64,', '');

        var d = new Date();
        var imageName = "sample" + d.getTime() + ".png";

        //var filepath = encodeURI("https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png");
        var filepath = encodeURI(imageData);

        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
            fileSystem.root.getFile(imageName, { create: true, exclusive: true }, function (fileEntry) {
                // get the full path to the newly created file on the device
                var localPath = fileEntry.fullPath;

                // massage the path for android devices (not tested)
                if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
                    localPath = localPath.substring(7);
                }

                // download the remote file and save it
                var remoteFile = filepath;
                var fileTransfer = new FileTransfer();
                fileTransfer.download(remoteFile, localPath, function (newFileEntry) {
                    // successful download, continue to the next image
                    console.log('successful download');
                },
                function (error) { // error callback for #download
                    console.log('Error with #download method.', error);
                });
            });
        })

    })
}
}

Thanks in advance.


Solution

  • I found solutions of my own question.

    First i have converted base64 image into file stream and create image on server using webservices and uploaded image on server and get that server path and download using cordova filetransfer.

    My code is below

    => Web service code for convert base64 image to image

    string strImg = imageData.imageData;
       string fullName = "d:\\uploadimages";
       FileStream fs = new FileStream(fullName, FileMode.Create);
       BinaryWriter bw = new BinaryWriter(fs);
    
       byte[] data = Convert.FromBase64String(strImg);
    
       bw.Write(data);
       bw.Close();
    

    => download image on mobile

    function download()
    {
        var filepath = encodeURI("http://www.telerik.com/sfimages/default-source/logos/app_builder.png"),
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
                    fileSystem.root.getFile("sample.jpg", { create: true, exclusive: false }, function (fileEntry) {
    
                        // get the full path to the newly created file on the device
                        var localPath = fileEntry.fullPath;
    
                        // massage the path for android devices (not tested)
                        if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
                            localPath = localPath.substring(7);
                        }
    
                        // download the remote file and save it
                        var remoteFile = filepath;
                        //loadingOverlay.displayLoading("Image will be save on your device.");
    
                        var fileTransfer = new FileTransfer();
                        fileTransfer.download(remoteFile, localPath, function (newFileEntry) {
                            // successful download, continue to the next image
                            var dwnldImagePath = newFileEntry.fullPath;
                            console.log('successful download');
    
                        },
                        function (error) { // error callback for #download
                            console.log('Error with #download method.', error);
    
                        });
                    });
                    function(error) { // error callback for #getFile
                        console.log('Error with #getFile method.', error);
                    });
    
                })
    }