How to write UTF-8 or Base64 data into a file (jpg/doc/pdf) on local storage(sdcard) in Phonegap

Question

I am getting byte array like var byteArr=[12,-123,43,99, ...] from API, Then I am converting it into UTF-8 String by

     var utf8_str = String.fromCharCode.apply([], new Uint8Array(byteArr));

Then converting UTF-8 string to Base64 string by

      var base64_str= window.btoa(utf8_str);

Now I am writing UTF-8 or Base64 string to file (xyz.pdf/xyz.jpg) by FileWriter in Phonegap, but it show me blank file when open it.

function gotWriteFile(dirEntry) {

   dirEntry.getFile(FILE_NAME, {create: true, exclusive: false}, gotFileWriteEntry,  failWrite);
}

function gotFileWriteEntry(fileEntry) {

fileEntry.createWriter(gotFileWriter, failWrite);
}

function gotFileWriter(writer) {

 writer.onwriteend = function(evt) {
        console.log("File write successfully....");
        hideModal();
    };
    writer.write(utf8_str);
    //writer.write(base64_str);
 }

What is solution guys.... ?

score 10 · Accepted Answer · answered Nov 01 '13 at 07:29

10

I have found solution to create file by byte array in Phonegap.

In phonegap, Text and Binary data are supported for Android and iOS to write into file. So I have convert BYTE array to BINARY array, then write by FileWriter.

 var byteArr=[12,-123,43,99, ...] ;
 var UTF8_STR = new Uint8Array(byteArr);  // Convert to UTF-8...                
 var BINARY_ARR=UTF8_STR.buffer;         // Convert to buffer...

Then pass 'BINARY_ARR' to FileWriter to write in file.

 function gotFileWriter(writer) {
     writer.onwriteend = function(evt) {
     console.log("File write successfully....");        
   };
   writer.write(BINARY_ARR);   
 }

Have a nice day.. :)

answered Nov 01 '13 at 07:29

Saurabh

254
1
4
12

I am trying to save a png file to the filesystem that i have in a base64 string . Can you pls help me out – vijar Jan 29 '14 at 12:21
have you solved problem or still facing problem? @Vijar – Saurabh Jan 29 '14 at 12:45
i am still facing a problem, i am new to javascript so can you please tell me how i can apply your soln with a base64 string instead of a byte array like you have used @Saurabh – vijar Jan 29 '14 at 12:52
would i have to use atob? – vijar Jan 29 '14 at 13:42
3

Try this code.. /* * Convert Base64 -> Binary -> Blob -> write to file */ function dataFile(bs64data) { var binary = atob(bs64data.split(',')[1]); // atob() decode base64 data.. var array = []; for (var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); // convert to binary.. } var file = new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); // create blob file.. } – Saurabh Jan 30 '14 at 14:27
Then return file variable to filewriter to write file. @vijar – Saurabh Jan 30 '14 at 14:30
I believe blob is only partially supported on android and is deprecated. Can you edit for array buffer. Thanks i appreciate the help – vijar Feb 05 '14 at 17:29
Thanks for all the help i got it to work . Now i was wondering if you know how to view the saved image in the gallery in IOS ? – vijar Feb 06 '14 at 23:13

score 1 · Answer 2 · answered Oct 29 '13 at 11:40

try this (make sure u are getting utf8_str properly):

var utf8_str = String.fromCharCode.apply([], new Uint8Array(byteArr));
var base64_str= window.btoa(utf8_str);
function writeFile() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
    fileSystem.root.getFile(FILE_NAME, {create: true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
    writer.onwrite = function (evt) {
        alert('done');
    }
    writer.write(utf8_str);
}
function fail(error) {
    console.log(error.code);
}

I tried this example from phonegap DOCS, but not usefull. @Vicky — Saurabh, Oct 29 '13 at 11:52

score 0 · Answer 3 · answered Oct 29 '13 at 17:24

0

I had issues on another project with btoa not doing a proper conversion, so I ended up using Base64 binary in my project to decode the Base64 response.

What I noticed was that the file I transferred was bigger when saved on the phone compared to the file residing on the server.

Maybe that is the case for you as well?

answered Oct 29 '13 at 17:24

gaqzi

3,707
3
30
30

when I am getting data by 'btoa', images/pdf are showing in browser but when saving in mobile by File writer, its show blank file.. – Saurabh Oct 29 '13 at 18:00
When you say blank file, do you mean file size 0 or something else? – gaqzi Oct 29 '13 at 19:25

How to write UTF-8 or Base64 data into a file (jpg/doc/pdf) on local storage(sdcard) in Phonegap

3 Answers3

Linked