Save this pdf in the cache/local storage on ionic - javascript

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
);
};

Related

Where are files stored with cordova-file-plugin

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

Imported library in UI5 app disappear when calling it

I have downloaded this library into my project and put it into "lib" folder in my project.
Then I add it into the cotroller of my view, when I want to call it when clicking the button, as described in the documentation
sap.ui.define([
"sap/ui/core/mvc/Controller",
"Test_ScreenRecordingTest_ScreenRecording/lib/RecordRTC"
], function(Controller, RecordRTC) {
"use strict";
return Controller.extend("Test_ScreenRecordingTest_ScreenRecording.controller.View1", {
onStartRecording: function(){
debugger;
var mediaConstraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(mediaConstraints).then(this.successCallback.bind(this)).catch(this.errorCallback);
},
successCallback: function(stream) {
// RecordRTC usage goes here
var options = {
mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
audioBitsPerSecond: 128000,
videoBitsPerSecond: 128000,
bitsPerSecond: 128000 // if this line is provided, skip above two
};
//jQuery.sap.require("Test_ScreenRecordingTest_ScreenRecording.lib.RecordRTC");
this.recordRTC = RecordRTC(stream, options);
this.recordRTC.startRecording();
},
errorCallback: function(error) {
console.log(error)
debugger;
},
onStopRecording: function(){
this.recordRTC.stopRecording(function (audioVideoWebMURL) {
video.src = audioVideoWebMURL;
var recordedBlob = this.recordRTC.getBlob();
debugger;
this.recordRTC.getDataURL(function(dataURL) {
debugger;
});
});
}
});
If I don't use the RecordRTC variable, I can see it in the debugger. If I use it, it appears as "undefined". So can never call it.
Could you please help??Ç
EDIT 09-feb-2018: Solved declaring a new variable in the Controller extension
return Controller.extend("Test_ScreenRecordingTest_ScreenRecording.controller.View1", {
//this line solved the issue
RecordRTC: RecordRTC,
onStartRecording: function(){
debugger;
var mediaConstraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(mediaConstraints).then(this.successCallback.bind(this)).catch(this.errorCallback);
},
Thank you in advance
The dependency string in your code looks strange:
"Test_ScreenRecordingTest_ScreenRecording/lib/RecordRTC".
Can it be a typo?
Anyway, the dependency path should be like this: "<app ID from manifest.json>/lib/RecordRTC".

OneDrive Saver Api (Multiple Files Upload)

var MyFiles = [];
if (val == "Address") {
MyFiles.push({ 'file': 'http://----/Content/File/Addresses.xlsx', 'fileName': 'Addresses.xlsx' });
}
if (val == "DebitDetail") {
MyFiles.push({ 'file': 'http://----/Content/File/DebitDetails.xlsx', 'fileName': 'DebitDetails.xlsx' });
}
if (val == "AddressAssociated") {
MyFiles.push({ 'file': 'http://----/Content/File/AddressAssociatedCompanies.xlsx', 'fileName': 'AddressAssociatedCompanies.xlsx' });
}
if (val == "DebitDetailAssociated") {
MyFiles.push({ 'file': 'http://----/Content/File/DebitDetailsAssociatedCompanies.xlsx', 'fileName': 'DebitDetailsAssociatedCompanies.xlsx' });
}
var saverOptions = {
file: myFiles,
success: function () {
// upload is complete
},
progress: function (p) {
// upload is progressing
},
cancel: function () {
// upload was cancelled
},
error: function (e) {
// an error occured
}
};
OneDrive.save(saverOptions);
I have used the above code for DropBox and it works well because it takes an array of objects but i cant find solution for OneDrive.com!
Below documentation only shows how to upload a single file using URL. but i want to upload multiple files.
The Format From The OneDrive Site
var saverOptions = {
file: "inputFile",
fileName: 'file.txt',
success: function(){
// upload is complete
},
progress: function(p) {
// upload is progressing
},
cancel: function(){
// upload was cancelled
},
error: function(e) {
// an error occured
}
}
https://dev.onedrive.com/sdk/javascript-picker-saver.htm
Currently the OneDrive Saver only lets you upload one file at a time. Depending on the type of app you're writing, it may be an option to go directly to the OneDrive API. Here's info about uploading files with the API.

Download file from FileSystem in Google Chrome

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();

How to create nested directories in Phonegap

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?

Categories