I am trying to save images i take with the camera on my phonegap app to a more permanent destination. I run the app on iOS and Android so i need this to work on ios and android.
So far i can get the image file name and temporary storage path.
I can also get the base file system path for the device i am running (currently an Android Galaxy S7 edge).
However, i am unable to move/copy the file from the temporary storage to the new one as it fails.
Ive got the following code and ive got a try/catch around the code which moves the images. in the catch i have an alert which triggers always as there is something wrong with my code.
Ive tried changing the moveTo to CopyTo and changing the code from output.moveTo to things like cordova.file.moveTo without success.
If anyone could help i would be greatful.
Thanks Kind regards
const tempFilename = imageURI.substr(imageURI.lastIndexOf('/') + 1);
const tempBaseFilesystemPath = imageURI.substr(0, imageURI.lastIndexOf('/') + 1);
const newBaseFilesystemPath = cordova.file.dataDirectory;
var output=tempBaseFilesystemPath+tempFilename;
var saveOutput=newBaseFilesystemPath+tempFilename;
alert(tempFilename+","+tempBaseFilesystemPath+","+newBaseFilesystemPath+","+tempFilename);
try{
output.moveTo(tempBaseFilesystemPath, tempFilename, newBaseFilesystemPath,tempFilename)
.then(function (success) {
alert("done");
}, function (error) {
alert("not done");
});
}
catch{
alert("didnt run");
}
const storedPhoto = output;
localStorage.setItem('imageLoc',storedPhoto);
localStorage.setItem('goodPic','not');
},
function( message ) {
},
{
quality: 30,
destinationType: Camera.DestinationType.FILE_URI,
});
}
Related
Im using react-native-fs to download files from a server and to read the local system. Everything works great, however Im having an issue where I don't know how to catch the failure when downloading a file.
For example, if the user lost network, how can I catch that? What I want is to show an alert message to the user, hide the download percentage message that I'm showing and delete the uncomplete download.
I have the following code, but the catch never runs:
const result = FS.downloadFile({
fromUrl: url, // URL to download file from
toFile: `${CACHE_DIR}/${name}`, // Local filesystem path to save the file to
background: false,
progressDivider: steps,
begin: onBegin,
progress: onProgress,
readTimeout: 2 * MIN,
connectionTimeout: 30 * SEC,
});
return result.promise
.then(() => {
this.index[name] = {
name,
path: `${CACHE_DIR}/${name}`,
size: 0,
};
return this.index[name];
})
.catch((error) => {
console.log('error!', error); // <-- This code never runs :(
// Show and alert message to the user...
// Hide downloading message
// Delete incomplete download file
});
For now I'm only focusing on Android, but later on I will move on to iOS. I wonder if the same issue happens on iOS as well or if is only on Android.
Thank you so much for your help.
You can use the second callback of then
return result.promise
.then(() => {
this.index[name] = {
name,
path: `${CACHE_DIR}/${name}`,
size: 0,
};
return this.index[name];
}, (error) => {
console.log('error!', error); // <-- This code never runs :(
// Show and alert message to the user...
// Hide downloading message
// Delete incomplete download file
});
I am attempting to open a PDF file with FileOpener2 (through ng-cordova) with the following code:
$cordovaFile.checkFile(cordova.file.dataDirectory, attachmentPath)
.then((fileEntry) => {
// success
fileEntry.getMetadata((metadata) => {
// metadata.size is in bytes
var megabyteSize = metadata.size / 1048576;
if (megabyteSize > 5) {
var path = cordova.file.dataDirectory + attachmentPath;
console.log(path); // prints: file:///data/data/com.ionicframework.enhatch146189/files/attachments/CS-353ES_CS-420ES_Eng.pdf which is correct
$cordovaFileOpener2.open(path, 'application/pdf').then(() => {
console.log("Opened!") // prints
}, (error) => {
console.log(error);
usePDFJs(); // tries to render PDF in app with PDFJs
});
} else {
usePDFJs();
}
})
}, function (error) {
// error
console.error(error);
});
What happens confuses me: it prompts me with an "open this file in Adobe Reader?" and lists the other PDF viewers, and the console prints "Opened!"
However, no matter what I open ANY pdf in, I get some sort of error such as "cannot open this PDF file".
Can anyone see something wrong with this code?
Apparently, if you use cordova.file.dataDirectory on android you can't open those files in other applications or attach them to emails. Silly mistake -- coded too fast and read too little on the documentation. Using cordova.file.externalApplicationStorageDirectory solved the issue.
this code returns:
Cannot read property 'getPicture' of undefined
Have no idea what im doing wrong, can you please help me with the code?
My App:
angular.module('Todo', ['ionic', 'Todo.controllers','ngStorage',
'Todo.services', 'ngCordova'])
my Controller:
.controller('profileEditCtrl', function($scope,Camera, $localStorage,
$cordovaCamera)
{
$scope.$storage = $localStorage.$default({ data:[]});
$scope.takePicture = function()
{
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL });
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src ="data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}});
Your code is correct, just add an html button with ng-click="takePicture()".
There is no problem here, It's sure that the browser "cannot read
property 'getPicture' of undefined" because it has no configuration
for a mobile camera that you defined, which means you should test your application on
a real device using:
> ionic run android.
Notice that the new update of Google Chrome has a new feature which
helps your test your device on the browser if it is connected to the
PC/laptop, for testing go to chrome's navigation panel >> More tools >> Inspect devices
or just go to this link:
chrome://inspect/#devices
I'm sure your camera will function normally if you have the plugin cordova plugin add org.apache.cordova.camera installed in the app,
I hope this helps you.
After trying various solutions with no luck for my cordova project, I simply went ahead to use the built-in JavaScript APIs. Essentially:
async function startCapturing() { // get ready to shoot
await getPermission('android.permission.CAMERA');
let stream = await navigator.mediaDevices.getUserMedia({ video: {width: 480, height: 320, facingMode:'environment' }, audio: false });
let video = document.getElementById("pVideo"); // a <video> element
video.srcObject = stream;
video.play();
video.style.display = "block";
}
function shootPhoto(){ // take a snapshot
let video = document.getElementById("pVideo");
let canvas = document.getElementById("pCanvas"); // a <canvas> element
let context = canvas.getContext('2d');
context.drawImage(video,0,0,480,320);
document.getElementById('fsPhotoI').src = Photo.current.src = canvas.toDataURL('image/png');
Photo.current.changed = Profile.current.changed = true;
video.style.display = "none";
}
In particular, some plugins did not work for me because they could't use the Android rear camera right away. The following in getUserMedia(...) does the trick:
facingMode:'environment'
Also make sure you have the CAMERA permission in your AndroidManifest.xml.
Hi im currently trying to create an gallery app with phonegap build, but i cant read files from the local storage. I`m using this function:
function listDir(directoryEntry){
var directoryReader = directoryEntry.createReader();
directoryReader.readEntries(function(entries){ // success get files and folders
for(var i=0; i<entries.length; ++i){
alert(entries[i].name) // this is just for checking purposes, no matter what i put here it wont fire
}
}, function(error){ // error get files and folders
alert(error.code);
});
}
function getFileSystem(){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){ // success get file system
var sdcard = fileSystem.root;
sdcard.getDirectory('dcim',{create:false}, function(dirEntry){
listDir(dirEntry);
}, function(error){
alert(error.code);
})
}, function(evt){ // error get file system
console.log(evt.target.error.code);
});
}
getFileSystem();
The listDir function wont even fire (the error function wont too). I have tried to add an "OnDeviceReady" listener to call the getFileSystem() function but it wont work too, plus i have tried toons of ways, even using the official phonegap docs, but it cant read my directory. Anyone know how to do this (im currently using android)? Thanks in advance.
You need remember that the cordova api is async.
This code read the list of files in my app external storage directory:
function getFilesList(callback) {
console.log('getFilesList');
var fileList = [];
function onDirResolved(dir) {
var reader =dir.createReader();
reader.readEntries(function(entries) {
console.log('readEntries');
for (var i=0; i<entries.length; i++) {
if (entries[i].name.indexOf(".fototoon") != -1) {
fileList.push(entries[i].fullPath);
};
};
console.log('fileList ' + fileList);
callback(fileList);
}, errorHandler);
};
function onFsResolved(fs) {
window.resolveLocalFileSystemURL(
cordova.file.externalApplicationStorageDirectory,
onDirResolved, errorHandler);
};
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
onFsResolved, errorHandler);
};
The callback function will receive the list of files read.
I'm trying to capture an image using the camera and upload it to my AJAX endpoint. I've confirmed that this endpoint can accept the file (I created a test HTML file on my desktop that sends a form with an image in it). I'm using Cordova (phonegap) 1.7.0, and am trying to get the fileTransfer() to work. Here is the link for the documentation that I followed:
http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#FileTransfer
The success callback triggers, but no $_FILES data is to be found on the endpoint.
I then found this article:
http://zacvineyard.com/blog/2011/03/25/upload-a-file-to-a-remote-server-with-phonegap/
Which suggested using options.chunkedMode = false. Now the upload takes an age and a half, before eventually failing with an error code of 3, which I believe is FileError.ABORT_ERR.
Am I missing something?
My code from the app below:
navigator.camera.getPicture(function(imageURI){
console.log('take success! uploading...');
console.log(imageURI);
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = 'spot_image.jpeg';
options.mimeType = 'image/jpeg';
var params = new Object();
params.spot_id = 1788;
params.param2 = 'something else';
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI,serverURL + '/ajax.php?fname=appuploadspotimage',function(r){
console.log('upload success!');
console.log(r.responseCode);
console.log(r.response);
console.log(r.bytesSent);
},function(error){
console.log('upload error')
console.log(error.code);
},options,true);
console.log('after upload');
},function(message){
console.log('fail!');
console.log(message);
},{
quality: 50,
destinationType: navigator.camera.DestinationType.DATA_URL,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
serverURL is defined as the domain for my AJAX endpoint, which has been whitelisted in cordova.xml.
I've seen a number of questions here in SO regarding this, which varying opinions as to whether chunkedMode should be used. Anyone having this issue as well?
Am trying this on a Samsung Galaxy S, running ICS.
May the person who helps me solve this issue mysteriously inherit a beer factory.
You can not use imageUri that you get from camera success callback in FileTransfer upload method, you have to first resolve uri as a filename like this:
navigator.camera.getPicture(function(imageURI){
window.resolveLocalFileSystemURI(imageUri, function(fileEntry) {
fileEntry.file(function(fileObj) {
var fileName = fileObj.fullPath;
//now use the fileName in your method
//ft.upload(fileName ,serverURL + '/ajax.php?fname=appuploadspotimage'...);
});
});
});
After puzzling a bit, it seems to me you can use the image uri directly....
see my answer here: (this works for me on android):
android phonegap camera and image uploading