I am building an app that lets the user download a PDF file when he clicks on a button.
I use the library react-native-fetch-blob for this purpose.
It works well on Android.
On iOS, the console log tells me the download has worked well, but:
I don't see anything happening on screen (on Android, there is a notification that tells me the download is complete)
I cannot find the file anywhere on the iPad. There is no "My files" folder or equivalent.
What is the right way to achieve what I want?
The solution thats worked for me in iOS was use RNFetchBlob.ios.openDocument function inside the then of fetch. This function open the file on the device file explorer where you have the option to download. Here is the code example:
downloadPDFiOS (uri) {
let uriSplitted = uri.split("/");
const fileName = uriSplitted.pop();
const dirs = RNFetchBlob.fs.dirs;
RNFetchBlob
.config({
path: dirs.DocumentDir + '/' + fileName,
fileCache: true,
})
.fetch('GET', uri, {
//some headers ..
})
.then((res) => {
RNFetchBlob.ios.openDocument(res.data);
})
.catch((e) => {
console.log('Error en el fetch: ', e);
})
}
Related
I know this is a very old issue but honestly I did not find a single complete piece of code for dropzonejs which is working as described.
I am trying to implement dropzonejs for file uploading. What I need is upload file to the server when it is dragged, and remove the file from the server when Remove file url is clicked.
I saw many solutions, for me, uploading just works fine. But when I try to implement the remove, I found no sample.
for the upload process, I configured my dropzone like below:
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
init: function() {
//upload process
}
};
It shows the addRemoveLink like "Remove file" just under the uploaded file.
I have seen someone to use another property like
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
removedFiles: function() {
//remove process
}
};
I am not sure how to implement this. Should I implement this like below? :
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
init: function(){
//upload process
}
removedFiles: function() {
//remove process
}
};
Please NB. I am expecting a full working example with server side upload and file delete.
I need a "support" mode for my Cordova app currently running on Windows Mobile and iOS. For this purpose, I need to compress an sqlite database file and upload it to a server. The database has to be compressed as it might grow over 250MB and the upload has to work without a wifi connection.
Searching the web brought up different approaches but all of them were outdated or did only solve my problem for either iOS or Windows Mobile. For example, when using the Cordova file plug-in I've encountered this in the plug-in documentation:
Supported Platforms
Android iOS OS X Windows* Browser
These platforms do not support FileReader.readAsArrayBuffer nor FileWriter.write(blob).
This was my approach: Cordova - Zip files and folders on iOS
Any ideas?
I would suggest you to give FileReader() a second chance.
In my case wich may be very similar to yours, I read a file using FilerReader.readAsArrayBuffer and after that, compress it using the JSZip library: http://stuartk.com/jszip
In opposition to the cordova-file-plugin's API documentation (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/)
"Windows*"->"These platforms do not support FileReader.readAsArrayBuffer nor FileWriter.write(blob))"
I experienced that readAsArrayBuffer works under Windows UWP platform, but slower.
So in my case, with a file of approx. 50M I had to wait for nearly 2min for the whole process to finish!
Try following this example:
You'll need to adapt to your paths but this runs for WINDOWS UWP and IOS (didn't test it with Android but that was not your question).
Also, you'll need to implement your own error handler (errorHandler).
This solution uses Promises since you'll have to wait for the file beeing read and compressed.
PS1: Always be sure your "device ready's event" as been fired in order to access plugins.
PS2: You may encouter no access permission on the database file, this may be related to the fact, that it's being used by another process.
Be sure the database is closed.
SQLITE:
var sqlite = window.sqlitePlugin.openDatabase({ name: 'yourdb.db', location: 'default' });
sqlite.close(function () {
console.log("DONE closing db");
}, function (error) {
console.log("ERROR closing db");
console.log(JSON.stringify(error));
});
"ZIP" function:
function zipFile(sourceFileName, targetFileName) {
return new Promise(function (resolve, reject) {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
fs.root.getFile(sourceFileName, { create: false, exclusive: false }, function (fe) {
fe.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (data) {
var zip = new JSZip();
zip.file(sourceFileName, data.target.result);
zip.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: {
level: 9
}
// level 9 means max. compression
// this may also take some time depending on the size of your file
// I tested it with a 50M file, it took about 65 sec.
}).then(
// following is post-zip in order to transfer the file to a server
function (blob) {
fs.root.getFile(targetFileName, { create: true, exclusive: false }, function (newzip) {
writeFile(newzip, blob, "application/zip").then(function () {
var f = blob;
var zipReader = new FileReader();
zipReader.onloadend = function (theFile) {
var base64 = window.btoa(theFile.target.result);
resolve(base64);
};
// need to "resolve" the zipped file as base64 in order to incluse it in my REST post (server-upload)
zipReader.readAsBinaryString(f);
});
});
}
)
};
reader.readAsArrayBuffer(file);
// this may take some time depending on the size of your file
// I tested it with a 50M file, it took about 72 sec.
}, errorHandler);
}, errorHandler);
});
});
}
ex call:
if (window.cordova) {
document.addEventListener('deviceready', function () {
zipFile("yourDatabaseFileName.db","compressedDatabaseFile.zip");
});
}
Why not use sqlite ".dump" command as query and get result via steam and then compress the output. Even though text dump will be larger it will get reasonable size when you compress it. I think there are some very good text only compression algorithms as well,
In my react native app i am showing several images in <Image> tags and i load those images from local folder.
<Image source={require('./src/images/image1.jpg')} />
I want to save image when the user tapped on it.
I can get which image user tapped and pass it to the function. But i put a single image path to it.
_onPressButton(imgName) {
CameraRoll.saveToCameraRoll( './src/images/image1.jpg' , 'photo').then(function(result) {
alert(result);
}).catch(function(error) {
alert(error);
});
}
But this gives me an error in iOS emulator saying it cant find the image in the path.
When i give as,
CameraRoll.saveToCameraRoll( 'https://i.imgur.com/JnrwMpZ.jpg' , 'photo')
It works.
But i want to save these files in my src/images folder.
How can i get a path of this image file OR get this done..?
I appreciate any help regarding this.
Thanks
Here is my solution with Expo, worked in android and should work on ios too
onSave = async () => {
const asset = Asset.fromModule(require('./src/images/image1.jpg'))
if (!asset.localUri) {
await asset.downloadAsync();
}
const uri = asset.localUri;
CameraRoll.saveToCameraRoll(uri, 'photo')
}
WKWebview and Phonegap Build: Is communication between index.js and WKWebView even possible?
I'm using Phonegap Build to generate my mobile device executables. I'm opening a webview and loading a page off our website. While using UIWebView I had no problem coding index.js on the mobile device to listen for a loadstop event and call executescript to execute javascript on the web page in the webview and return the results to index.js where I could do whatever I needed.
But UIWebView is dog-slow, so for iOS I've been trying to get WKWebView to work via the cordova-plugin-wkwebview-engine plug-in.
I can get the WKWebview to open my URL, and it is blazing fast compared to UIWebView, but after days of searching (every page containing 'WKWebView' and 'Phonegap' that Google knows of) and experimentation I have been unable to find any way to detect loadstop (or equivalent), nor have I found any way to execute a script in WKWebView from index.js.
I would probably be happy with ANY method to communicate between index.js and WKWebView. Is there a process similar to executescript after loadstop event, even if it is async? Is there some type of messaging capability?
I'd love to see some code examples for index.js.
I'm beginning to think that I'm going to have to break down and resort to learning native code in xcode to make this happen. I sure hope not because Phonegap Build has worked fine for me thus far.
Has anyone had any luck with this?
Here is the code that works under UIWebView. It works well enough under WKWebView to open the URL, but loadstop does not trigger and there is no execution of the script.
launchBrowserWindow: function (url) {
var ref;
try {
ref = window.open(url, '_self', 'location=no,toolbar=no');
} catch (e) {
console.log("McMApp catch window.open fail: " + url + " err: " + e.message);
}
try {
ref.addEventListener("loadstop", function () {
ref.executeScript(
{ code: 'window.location.search' },
function (value) {
var requestString = value[0];
console.log("McMApp loadstop request string: " + requestString);
});
});
} catch (e) {
console.log("McMApp FAIL ref.addeventlistener loadstop");
}
},
50 hard-boiled eggs to anyone that can help me get this working.
InAppBrowser is a fickle beast, so happy to help! For reference, I have an app now that uses InAppBrowser and WKWebView and both work using the following:
"LoadStop" not firing:
Self vs _blank:
I typically open the Browser via "_blank" instead of "self". Try that.
Newer versions of InAppBrowser should still be automatically aliased to 'window.open' but in the docs they mention this will go away soon. You can do that in the deviceready event like so:
window.open = cordova.InAppBrowser.open;
Or, and probably the safer option, just use "cordova.InAppBrowser.open".
Here's code I use. Try printing out or "alert"-ing the URLs that are coming through. They may not be what you expect, especially if there are multiple redirects.
var inAppBrowserRef = cordova.InAppBrowser.open("www.google.com", '_blank', 'location=no,toolbar=yes');
inAppBrowserRef.addEventListener('loadstop', function(event) {
console.log("loadstop: " + event.url);
alert("loadstop: " + event.url);
// run execute script code
}
});
Also, make sure any use of InAppBrowser is within/after the 'deviceready' event fires.
Execute Script Issue
I believe here the problem is that your code isn't firing. See here, wrap it into a function and call it immediately:
ref.executeScript(
{ code: 'var runCode = function() { window.location.search; } runCode();' },
function (value) {
var requestString = value[0];
console.log("McMApp loadstop request string: " + requestString);
});
I'm not totally sure, but according to MDN, shouldn't you be passing a parameter to the location search function too?
// Append "someData" as url parameter query
window.location.search = "someData";
Last, note that WKWebView does have lots of known issues currently. Always check first for known issues on GitHub or official Apache Cordova site, etc, because as you wrote, you can burn many hours getting nowhere. I'm currently using this fork of the WKWebView - this team is moving much faster than the "official" plugin fixing bugs so you might try that.
Is it possible to list the files inside the www PhoneGap folder? And recursively?
I need it because I would like to preload all the images inside it.
The official documentation for working with files in phonegap can be rather hard to get started with.
Here's a working example of listing the files in a folder other than the root (in this case one called Downloads).
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("Downloads", {
create: true
}, function(directory) {
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
log(entries[i].name);
}
}, function (error) {
alert(error.code);
});
} );
}, function(error) {
alert("can't even get the file system: " + error.code);
});
Note this will give you a directory in the writable area (Documents on iOS, sdcard on Android, so may not help that much).
here's a PhoneGap app that does just that, even if written for BlackBerry, the jscript/html code is the same and should work in your iOS app as well.
Hope this helps