I am updating an app from phonegap 2.* to cordova 3.4
Things are running smooth now, only the file download is not working.
I need to download a file from the internet (host edited) and store it as an JSON file, to have the contents processed later on.
The download is working fine, the file will be shown in the filesystem, but the FileReader does not fire the onloadend event.
I have tried a few things like onprogress or onerror events, also file.toURI and FileReader.readAsDataURL - nothing worked. Anybody any ideas?
Notes:
app.log can be seen as an alias for console.log
print_r is defined in another file, working fine
The downloaded file is just a few kB, shouldn't be a performance issue
Running on iOS hardware
Full code (extracted and shortened):
var fileTransfer = new FileTransfer();
var loadingStatus = 0;
fileTransfer.onprogress = function (progressEvent) {
// if we have the complete length we can calculate the percentage, otherwise just count up
if (progressEvent.lengthComputable) {
loadingStatus = Math.floor(progressEvent.loaded / progressEvent.total * 100);
} else {
loadingStatus++;
}
app.log('Transfer Progress: ' + loadingStatus);
};
fileTransfer.download(
encodeURI('http://www.example.com/export'),
'cdvfile://localhost/persistent/import.json',
function (file) {
var FileReader = new FileReader();
FileReader.onloadend = function (evt) {
app.log('Filereader onloadend');
app.log(evt);
};
FileReader.readAsText(file);
},
function (error) {
// FileTransfer failed
app.log("FileTransfer Error: " + print_r(error));
}
);
The File API has been updated. See this post: https://groups.google.com/forum/#!topic/phonegap/GKoTOSqD2kc
file.file(function(e) {
console.log("called the file func on the file ob");
var reader = new FileReader();
reader.onloadend = function(evt) {
app.log('onloadend');
app.log(evt.target.result);
};
reader.readAsText(e);
});
Cant verify this at the moment but since 3.0, Cordova implements device-level APIs as plugins. Use the CLI's plugin command, described in The Command-line Interface, to add or remove this feature for a project:
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
$ cordova plugin rm org.apache.cordova.core.file
Did you add the plugin to your project?
Related
I am creating an App for Android using Cordova, and I would like to open and display a file (PDF or image) that is served from the server as Base64-encoded binary data.
Of course I have read the multiple other posts on the subject that already exist on this website, but none of the proposed solutions have worked for me, more details below.
To be more precise, the server sends a JSON-file to the app, which among many other things contains a string consisting of the base64-encoded contents of a PDF file. I want to convert this data back into the represented PDF and display it to the user.
If this were a pure browser page, I would simply package my base64 data into a data-URL, attach this as the href of some anchor, and add a download-attribute. Optionally I could wrap all of my data into a blob and create an object url for that first.
In Cordova, this does not work. Clicking the <a> does nothing. Here is what I have attempted so far:
Using the file plugin, I can write the binary data to a file on the device. This works, and using a terminal I can see that the file was downloaded correctly, but into an app-private directory which I cannot access normally (e.g. through the file explorer).
Accessing the user's "downloads" folder is blocked by the file system
Using window.open with the file path as the first argument and "_system" as the target does nothing. There is no error but also nothing happens. Setting the target to "_blank" instead, I get an error saying ACCESS_DENIED.
Using cordova.InAppBrowser behaves the same was as window.open
With the plugin file-opener2 installed, the app will not compile, because the plugin is looking for an android4 toolchain, and I am building for android 9 and up
The plugin document-viewer (restricting to PDFs for the time being) suffers the same problem and does not compile.
Passing the data-URI to window.open (or cordova.InAppBrowser) directly loads for a very long time and eventually tells me that the desired page could not be loaded.
The PDF file I am using for testing is roughly 17kb after converting to base64. I know this is technically above the spec for how long data-URIs can be, but Chrome in the browser has no trouble with it whatsoever, and using a much shorter URI (only a few dozen bytes) produces the same behavior.
Ideally, what I would like to do, is download the file and then trigger the user's standard browser to open the file itself. That was, I would not have to deal with MIME types and also it would look exactly how the user expected from their own device.
Alternatively, if that doesn't work, I would be ok with downloading the file into a system-wide directory and prompting the user to open it themselves. This is not optimal, but I would be able to swallow that pill.
And lastly, if there is a plugin or some other solution that solves the problem amazingly, but for PDFs only, then I can also work out something else for images (e.g. embedding a new into my app and assigning the URI to that).
I would be thankful for any suggestion you might have on how to solve this problem. The code I use to download the file currently is shown below.
Thank you for your time.
var filePath = cordova.file.externalDataDirectory; // Note: documentsDirectory is set to "" by Cordova, so I cannot use that
var fileName = "someFileName.pdf";
var mime = "application/pdf";
var dataBlob = /* some blob containing the binary data for a PDF */
function writeFile(fileEntry, dataBlob) {
// Create a FileWriter object for our FileEntry.
// This code is taken directly from the cordova-plugin-file documentation
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function() {
console.log("Successful file write...");
readFile(fileEntry);
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};
fileWriter.write(dataBlob);
});
}
window.resolveLocalFileSystemURL(
filePath,
function onResolveSuccess (dirEntry) {
dirEntry.getFile(
fileName,
{ create: true },
function onGetFileSuccess (file) (
writeFile(file, dataBlob);
// At this point, the file has been downloaded successfully
window.open(file.toURL(), "_system"); // This line does nothing, and I don't understand why.
}
);
}
);
I managed to solve the problem.
As per the documentation of the file-opener2 plugin, you need to also add the androidx-adapter plugin to correct for the outdated (android 4) packages. With the plugins file, file-opener2 and androidx-adapter installed, the complete code is the following:
var filePath = cordova.file.externalDataDirectory; // Note: documentsDirectory is set to "" by Cordova, so I cannot use that
var fileName = "someFileName.pdf";
var mime = "application/pdf";
var dataBlob = /* some blob containing the binary data for a PDF */
function writeFile(fileEntry, dataBlob) {
// Create a FileWriter object for our FileEntry.
// This code is taken directly from the cordova-plugin-file documentation
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function() {
console.log("Successful file write...");
readFile(fileEntry);
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};
fileWriter.write(dataBlob);
});
}
window.resolveLocalFileSystemURL(
filePath,
function onResolveSuccess (dirEntry) {
dirEntry.getFile(
fileName,
{ create: true },
function onGetFileSuccess (file) (
writeFile(file, dataBlob);
// At this point, the file has been downloaded successfully
cordova.plugins.fileOpener2.open(
filepath + filename,
mime,
{
error : function(){ },
success : function(){ }
}
);
}
);
}
);
I am using the image-picker (cordova-imagePicker) plugin in order to get images from gallery and upload them to a server.
I am using Cordova 6.1.1 with Android platform 5.1.1 and the following plugins:
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-imagepicker 1.1.0 "ImagePicker"
cordova-plugin-inappbrowser 1.4.0 "InAppBrowser"
cordova-plugin-media 2.3.0 "Media"
As callback to the plugin, I am converting the path I get to a File using the following code. Note that I use resolveFile because this code is running also in desktop in which case, the entry is already a File object.
var resolveFile = function(entry) {
if (typeof(entry) === "string") {
var deferred = $q.defer();
// first convert to local file system URL
window.resolveLocalFileSystemURL(entry, function(fileEntry) {
// now read/convert the file to file object.
fileEntry.file(function(file) {
console.log("File converted to file entry");
deferred.resolve(file);
}, function(err) {
console.log("Failed to convert to file entry", err);
deferred.reject(err);
});
}, function(err) {
console.log("Failed to resolve to file URL", err);
deferred.reject(err);
});
return deferred.promise;
} else {
return $q.when(entry);
}
};
This, in turn is used to read the image and pass it to a function that uploads it to the server ($files is what I am getting from plugin or from input in case of desktop/browser):
var upload = function () {
if (!$files[currentFile]) {
onAllFinished();
return;
}
file = $files[currentFile];
beforeLoad(file);
fileReader = new FileReader();
fileReader.onload = onload;
fileReader.onprogress = progress;
resolveFile(file).then(function(actualFile) {
fileReader.readAsDataURL(actualFile);
});
currentFile++;
};
In the above, onload cuts the image data (following 'base64,' in string) and sends it to the the upload code which expects a base64 string and uploads the data to the server using simple AJAX call:
var uploadPhoto = function(url, photo, callback, error)
$http.post(url, {
photo: photo,
})
.success(callback)
.error(function (data, status, headers, config) {
if (error)
error(data, status, headers, config);
});
The last function works also with the camera plugin camera plugin using DATA_URI target (I know, it's not recommended) which also return a base64 string (so I can reuse the code).
It seems to me there's something wrong going on with the file reader output (I am guessing). What (I think) hints to that is that small images (10s kb) are loaded fine as well as already prepared base64 string from camera plugin but larger images (few MBs) that goes through the filereader (on Android, on desktop it is fine) are uploaded corrupted (see below).
Has anyone run into such issues? Can anyone suggest a fix (other than changing the code to use FileTransfer plugin)?
The original image:
The uploaded (corrupted) image. Note, some of it is read/uploaded fine:
I found your question while searching for a solution for a similar problem. DataURL's of large images from camera would show up when used as the source of an image but the same image got corrupted when I use fileReader.readAsDataURL.
I've been able to bypass the problem by using fileReader.readAsBinaryData instead of fileReader.readAsDataURL and then turning the binarystring into a dataURL.
window.resolveLocalFileSystemURL(imageUri, function done(fileEntry) {
fileEntry.file(function (fileObj) {
var image = new Image();
var reader = new FileReader();
reader.onloadend = function (e) {
image.src = "data:image/jpeg;base64," + window.btoa(e.target.result)
}
reader.readAsBinaryString(fileObj);
}
}
Hopefully this helps you to find a workaround of your own.
using webkitRequestFileSystem, I want to do something very simple: get a file from user, save it to browser local filesystem, and use it later (for example as image src etc)
I read about webkitRequestFileSystem but I didn't find anything about cloning files from user (maybe I missed it?).
so I tried a naive implementation of reading, getting file, writing, and everything seems to works (calls the success callback), and I can see the file with a chrome extension (HTML5 filesystem explorer), but when I try to use the image url it shows a broken image icon.
here's the snippet to clone the file (sort-of, had to clean it up a little):
var src_file = .... <-- got it from user
filesystem.root.getFile("output.png", {create: true}, function(dest_file)
{
var reader = new FileReader();
reader.onerror = function() {alert("ERROR")};
reader.onload = function(e)
{
read_buffer = e.target;
dest_file.createWriter(function(fileWriter) {
var blob = new Blob([read_buffer.result], {type: 'application/octet-stream'}); // <-- also tried "image/png" etc..
fileWriter.onerror = function() {alert("ERROR2")};
fileWriter.onwriteend = function(writer)
{
alert("SUCCESS!");
};
fileWriter.write(blob);
}, function() {alert("ERROR3")});
};
reader.readAsBinaryString(src_file);
});
PS I work on localhost, is that an issue?
Thanks!
answering myself: should have used readAsArrayBuffer() instead of readAsBinaryString()... what a waste of time that was :/
After the user uploads a zipped file, i want to remove the images folder from it before sending it over the network. I am using kendo for uploading, and the existing functionality works fine. I just want to add on the removing images part. This is what i have so far:
function onSelect(e) {
var file = e.files[0];
if (endsWith(file.name, '.eds')) {
var contents = e.target.result;
var jszip = new JSZip(contents);
jszip.remove("apldbio/sds/images_barcode");
fileToSend = jszip.generate({type: "base64", compression: "DEFLATE"});
}
e.files[0] = fileToSend;
openProgressDialog(e.files.length); //this is existing code, works fine
}
target.result doesn't seem to exist in the event e. And nothing works properly from that point on. e should probably be used inside a FileReader object's onload(), (as seen here and here) but i have no idea how to use a FileReader for my purpose, with kendo Upload.
EDIT:I did some more reading and now i am using FileReader like this:
var reader = new FileReader();
reader.onload = function (e) {
// do the jszip stuff here with e.target.result
};
reader.onerror = function (e) {
console.error(e);
};
reader.readAsArrayBuffer(file);
Note : file = e.files[0] as in the 1st code block.
With this though, i get the error:
Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.
I write a phonegap app and in it I will copy a file selected in android gallery to SD-Card.
This function works, but freeze the Main Thread for the copy time.
Now I tested to write this in a Web Worker, I post the fileEntry to Web Worker but there comes an Error:
03-18 09:31:37.575 1713-1713/de.scisys.app I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught TypeError: Object #<Object> has no method 'copyTo'", source: blob:file%3A///7fd968c1-2d2b-469e-b4b7-fab1172bb496 (1)
Here is my Code:
function(fileEntry) {
...
var blob = new Blob(['onmessage = function(e) { var data = e.data; data.fileEntry.copyTo(data.parentEntry, data.newName, function() { postMessage("success") }, function() { postMessage("error") }); }'], {type: 'text/javascript'});
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
alert(e.data)
};
worker.postMessage({'fileEntry': fileEntry, 'parentEntry': parentEntry, 'newName': fileId+"."+fileName[fileName.length-1]});
...
}
Is there an error in my code, or have some one an idea?
Thanks for your help!
Edit:
I found a Solution by editing the Phonegap Core File Plugin. In FileUtils "execute" method I changed the work to Thread.
http://www.mindfiresolutions.com/Implementing-MultiThreading-In-Android-Plugin-For-PhoneGap-260-2572.php
As per my knowledge Web Workers never works on local directory
file://
it works on server side. For example instead of placing files at "file://" so the path should be
***> http://locahost/ or***
***> http://server_ip_address***
Hence Phonegap consists of HTML and Javascript which are at device directory hence web workers are not supported in Phonegap.
^^is what I found out just a small googling :) . Please google first