I'm trying to create a excel on a mobile device, I'm testing with android but it should work for iOS too
I used the following code from the documentation
Documentation
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) {
console.log("fileEntry is file?" + fileEntry.isFile.toString());
fileEntry.name == 'someFile.txt'
fileEntry.fullPath == '/someFile.txt'
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function() {
console.log("Successful file write...");
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function() {
console.log("Successful file read: " + this.result);
//displayFileData(fileEntry.fullPath + ": " + this.result);
};
reader.readAsText(file);
},);
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};
let dataObj = new Blob(['some file data'], { type: 'text/plain' });
fileWriter.write(dataObj);
});
});
});
I've tried changing the first three lines for the following ones, with the same result
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) { ...
I get the following console log
file system open: persistent
fileEntry is file?true
Successful file write...
Successful file read: some file data
so, the file is created and I can read it, but I don't get any prompt or something, then I navigate to my file on Android/data/com.myapp.app/files and I don't have any file
Seems the files were saving but I couldn't see them, but I could read them via cordova-file-plugin
I changed the destination folder to
let ruta = cordova.file.externalRootDirectory
let directoryRoute = "myApp";
window.resolveLocalFileSystemURL(ruta, function (fs) {
fs.getDirectory(directoryRoute, { create: true }, function (fs2) {
fs2.getFile(fileName, { create: true, exclusive: false }
, function (fileEntry) { ...
with cordova.file.externalRootDirectory I'm creating if doesn't exist a folder to save my app documents, this works with android, probably there will be changes to iOS
I'm going to update the answer on a few days when I have the answer for iOS in case this can help someone
Related
Ho to everyone. I followed this tutorial to create a modal view with a pdf generated with pdfmake.
http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/
My simply question is how can i save the pdf in my local storage on in cache? I need that to send the pdf by email or open it with openfile2. I'm using Ionic and cordova.
I don't know how you code it, but I know what plugin you should use:
https://github.com/apache/cordova-plugin-file
The git contains a complete documentation of the plugin so everything you could need should be there.
Sample code to write pdf file in device using cordova file and file transfer plugin:
var fileTransfer = new FileTransfer();
if (sessionStorage.platform.toLowerCase() == "android") {
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, onFileSystemSuccess, onError);
} else {
// for iOS
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);
}
function onError(e) {
navigator.notification.alert("Error : Downloading Failed");
};
function onFileSystemSuccess(fileSystem) {
var entry = "";
if (sessionStorage.platform.toLowerCase() == "android") {
entry = fileSystem;
} else {
entry = fileSystem.root;
}
entry.getDirectory("Cordova", {
create: true,
exclusive: false
}, onGetDirectorySuccess, onGetDirectoryFail);
};
function onGetDirectorySuccess(dir) {
cdr = dir;
dir.getFile(filename, {
create: true,
exclusive: false
}, gotFileEntry, errorHandler);
};
function gotFileEntry(fileEntry) {
// URL in which the pdf is available
var documentUrl = "http://localhost:8080/testapp/test.pdf";
var uri = encodeURI(documentUrl);
fileTransfer.download(uri, cdr.nativeURL + "test.pdf",
function(entry) {
// Logic to open file using file opener plugin
},
function(error) {
navigator.notification.alert(ajaxErrorMsg);
},
false
);
};
I am developing a mobile application and I getting an error when the user try to change the picture profile, the error after do a lot of debugging is not in the camera is in the file transfer function when I try to send the image to the server, there is no error code or message, simply the application stop work, this is the code:
$scope.addImage = function (option) {
var options = {
quality: 75,
targetWidth: 300,
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 300,
saveToPhotoAlbum: false,
correctOrientation: true
};
if (option == 1) {
options.sourceType = Camera.PictureSourceType.CAMERA;
} else {
options.sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
}
$cordovaCamera.getPicture(options).then(function (imageData) {
console.log("IMAGE DATA");
console.log(imageData);
//alert("SUCCESS");
$scope.user.image = "data:image/jpeg;base64," + imageData;
console.log(JSON.stringify($scope.user));
$scope.savePicture();
}, function (err) {
alert("ERRROR");
alert(JSON.stringify(err));
// An error occured. Show a message to the user
});
};
$scope.savePicture = function () {
var options = {
fileKey: "avatar",
fileName: "image.jpg",
chunkedMode: false,
mimeType: "image/jpeg",
headers: {
Authorization: "Bearer " + $auth.getToken()
}
};
$cordovaFileTransfer.upload(api.getApi()+"user/updatephoto", $scope.user.image, options).then(function (result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function (err) {
console.log("ERROR: " + JSON.stringify(err));
alert("ERROR: " + JSON.stringify(err));
}, function (progress) {
// constant progress updates
});
};
Thank in advice for your help
you are not calling return appropriately on your functions that return a promise. From a quick review, $scope.savePicture(); should be return $scope.savePicture();
and $cordovaFileTransfer.upload() should also be return $cordovaFileTransfer.upload()
I would start there and see if you start to make some progress.
I had to debug the entire application including the cat log of android and I found the problem.
The problem was that I am using Ionic with crosswalk and the version of FileTransfer that I was using does not support crosswalk.
I fix this problem just installing the last version of file transfer:
cordova-plugin-file-transfer 1.2.1 "File Transfer"
I've created an app for Google Chrome that stores a file into the File System.
I can read this file but every time I try to export it, it doesn't work.
I've tried some methods:
method toUrl,
Download File Using Javascript/jQuery
create a file using javascript in chrome on client side
but they doesn't work.
Replacement for fileEntry.toURL() in Chrome Packaged Apps talks about my problem..
So I changed my code into
function readFileRdf() {
window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(filesystem) {
fs = filesystem;
fs.root.getFile('rdf.txt', {create: false}, function(fileEntry) {
// Get a File object representing the file,
// then use FileReader to read its contents.
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
fromFileSystemRdf = e.target.result;
arr = fromFileSystemRdf;
exportRdf(arr);
};
reader.readAsText(file);
}, errorHandler);
}, errorHandler);
});
}
and
function exportRdf(arr){
console.log(arr);
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
console.log(arr);
writer.write(new Blob([arr], {type: 'text/plain'}));
}, errorHandler);
});
}
the last problem is that I get an error with createWriter
Error in response to fileSystem.chooseEntry: TypeError: Cannot call method 'createWriter' of undefined
Up.. adding a console.log(chrome.runtime.lastError); it says
Object {message: "Invalid calling page. This function can't be called from a background page."}
Question solved.
Since is not possible to call a method from a background page, I've used this solution:
(Remember, Google Chrome doesn't accept inline javascript)
button for exporting is pressed
`document.getElementById("button2").addEventListener("click",readFileRdf);`
method readFileRdf creates a new page:
function readFileRdf() {
chrome.app.window.create("data.html");
}
data.html calls the data.js file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data page</title>
</head>
<body>
</body>
<script rel="text/javascript" src="data.js"></script>
</html>
and data.js allows the user to read the file from filesystem and download it
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function initFs() {
window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(filesystem) {
fs = filesystem;
readFile(fs);
}, errorHandler);
}
function readFile(fs) {
fs.root.getFile('rdf.txt', {create: false}, function(fileEntry) {
// Get a File object representing the file,
// then use FileReader to read its contents.
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
fromFileSystemRdf = e.target.result;
arr = fromFileSystemRdf;
exportRdf(arr);
};
reader.readAsText(file);
}, errorHandler);
}, errorHandler);
}
function exportRdf(arr){
console.log(arr);
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
console.log(chrome.runtime.lastError);
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob([arr], {type: 'text/plain'}));
}, errorHandler);
});
}
initFs();
I was wondering how do I put HTML form user input into a file using JavaScript ONLY.
I have struggled to find an answer to such a simple question.
Writing data to files on a local filesystem is only supported in modern browsers with a set of limitations, you can google for HTML FileSystem API.
As for writing to a file, this is a basic example:
function onInitFs(fs) {
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
console.log('Write completed.');
};
fileWriter.onerror = function(e) {
console.log('Write failed: ' + e.toString());
};
// Create a new Blob and write it to log.txt.
var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
fileWriter.write(blob);
}, errorHandler);
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
I have tried this, but it didn't satisfy my request at all. I write a new one:
var file_system;
var fs_root;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024*1024, onInitFs, request_FS_fail);
function onInitFs(fs) {
file_system= fs;
fs_root= file_system.root;
alert("ini fs");
create_Directory();
alert("ini fs done.");
}
var string_array;
var main_dir= "story_repository/"+ User_Editime;
string_array= new Array("story_repository/",main_dir, main_dir+"/rec", main_dir+"/img","story_repository/"+ User_Name );
function create_Directory(){
var start= 0;
var path="";
while(start < string_array.length) {
path = string_array[start];
alert(start+" th created directory " +" is "+ path);
fs_root.getDirectory(
path,
{create: true, exclusive: false},
function(entry) {
alert(path +"is created.");
},
create_dir_err()
);
start++;
}//while loop
}//create_Directory
function create_dir_err() {
alert("Recursively create directories error.");
}
function request_FS_fail() {
alert("Failed to request File System ");
}
Although the directories are created, the it sends me
ErrorCallback:"alert("Recursively create directories error.");"
First, I don't think this code will work since I have tried this, which failed:
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0,
//request file system success callback.
function(fileSys) {
fileSys.root.getDirectory(
"story_repository/"+ dir_name,
{create: true, exclusive: false},
//Create directory story_repository/Stallman_time.
function(directory) {
alert("Create directory: "+ "story_repository/"+ dir_name);
//create dir_name/img/
fileSys.root.getDirectory {
"story_repository/"+ dir_name + "/img/",
{create: true, exclusive: false},
function(directory) {
alert("Create a directory: "+ "story_repository/"+ dir_name + "/img/");
//check.
//create dir_name/rec/
fileSys.root.getDirectory {
"story_repository/"+ dir_name + "/rec/",
{create: true, exclusive: false},
function(directory) {
alert("Create a directory: "+ "story_repository/"+ dir_name + "/rec/");
//check.
//Go ahead.
},
createError
}
//create dir_name/rec/
},
createError
}
//create dir_name/img
},
createError
);
},
//Create directory story_repository/Stallman_time.
createError());
}
I just repeatedly call fs.root.getDirectory only but it failed. But the first one is almost the same...
What is the problem at all? Why does the first one always gives me the ErrorCallback?
Why can't the second one work?
Does anyone has a better solution? (no ErrorcallBack msg)
ps: I work on Android and PhoneGap 1.7.0.
I am not able to figure out mistake in your code. I have a library written to do localIO via PhoneGap 2.0. I have abstracted code for your requirements from there. See if it works for 1.7. I have not tested the code after abstraction. You may need to fix error, if any.
var fsroot = fs.root; // initialize this
function fileGetDir(path, cb) {
var fnGetOrCreateDir = function(p, de) {
var entry = p.shift();
if (entry) {
de.getDirectory(entry, {
create : true
}, function(dirEntry) {
fnGetOrCreateDir(p, dirEntry);
}, fileFSError);
}
else
if (cb) cb(de);
};
if (path) {
var arPath = path.split("/");
fnGetOrCreateDir(arPath, fsroot);
}
else {
if (cb) cb(fsroot);
}
}
function fileFSError(e) {
console.log(e.code);
try {
console.log("fileFSError: " + JSON.stringify(e));
} catch (err) {}
}
function printSuccess(dirEntry) {
console.log(dirEntry.fullPath);
}
// Now create your directories like:
var main_dir= "story_repository/"+ User_Editime;
fileGetDir(mainDir + "/rec", printSuccess);
fileGetDir(mainDir + "/img", printSuccess);
fileGetDir("story_repository/"+ User_Name, printSuccess);
There is a simple file manager for cordova-phoengap:
https://github.com/torrmal/cordova-simplefilemanagement
You can recursively create directories:
//CREATE A DIRECTORY RECURSIVELY
var a = new DirManager(); // Initialize a Folder manager
a.create_r('folder_a/folder_b',Log('created successfully'));
If the first directory off the root "story_repository" does not exist your first call to getDirectory will call the error callback because the call to create dir_name in a non-existent directory will error out on the native side.
Does "story_repository" exist?