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"
Related
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
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".
I am trying to use camera plugin with cordova app in ionic angular.js. My problem is that when i get picture it gives me a url of image not base64 string
I need base64 string.
in Services.js
.factory('Camera', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
});
I user code above this returns
file:///storage/emulated/0/Android/data/com.example.app/cache/1313513121.jpg
but I want base64 string because I send it to server to save the image in server
in Controller.js
$scope.AddImage = function () {
var options = {
quality : 75,
targetWidth: 200,
targetHeight: 200,
sourceType: 1
};
Camera.getPicture(options).then(function(imageData) {
alert(imageData);
var item={
image: imageData
}
Pictures.push(item);
$scope.Photos = Pictures;
}, function(err) {
console.log(err);
});
}
I wrote code above. How can I solve this problem
Thanks in advance
Use the destinationType option parameter with value DATA_URL on the [ cameraOptions ].
navigator.camera.getPicture( cameraSuccess, cameraError, [
cameraOptions ] );
The option destinationType: Camera.DestinationType.DATA_URL will allow you to take a photo and retrieve the Base64-encoded image. Default this is set to destinationType: Camera.DestinationType.FILE_URI which will retrieve the image file location.
Below a general code sample which you can use to adapt your existing code.
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);
}
Documentation here
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
);
};
Good day, i have a project on cordova that uses image gallery and camera and stores images in local cache folder.
So i installed:
org.apache.cordova.camera 0.3.1 "Camera"
org.apache.cordova.file 1.3.1 "File"
org.apache.cordova.file-transfer 0.4.6 "File Transfer"
Android and iOS works perfectly, but when it comes to WP8 (Windows Phone 8), following code:
$scope.uploadImageFromPhone = function(isCamera){
console.log('uploadImageFromPhone');
var opt = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: (isCamera) ? Camera.PictureSourceType.CAMERA : Camera.PictureSourceType.PHOTOLIBRARY,
encodingType: Camera.EncodingType.JPEG
};
function onGetImageSuccess(fileUrl) {
console.log('onGetImageSuccess:\n'+fileUrl);
window.resolveLocalFileSystemURL(fileUrl, resolveSuccess, resolveFails);
}
function onGetImageFail(message) {
//console.log('onGetImageFailed:\n' + JSON.stringify(message));
}
function resolveSuccess (path) {
console.log('resolveSuccess:');
console.log(JSON.stringify(path));
uri = path.nativeURL;
//wp8 returns null as path.nativeURL
/*IE10 specific hack*/
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
uri = path.fullPath;
}
}
function resolveFails(err){
console.log('resolveFails:\n' + JSON.stringify(err));
};
navigator.camera.getPicture(onGetImageSuccess, onGetImageFail, opt);
}
The resolveSuccess function always returns path variable as shown below:
{"isFile":true,"isDirectory":false,"name":"wp_ss_20140923_0001.png","fullPath":"///CapturedImagesCache/wp_ss_20140923_0001.png","filesystem":"<FileSystem: temporary>","nativeURL":null}
Problem is that nativeURL is null.
According to my app, chosen file must be put in application local cache, so i try to download it and store in cache by approaching to fullPath with file-transfer plugin:
var fileTransfer = new FileTransfer();
fileTransfer.download(
uri, // equals to '///CapturedImagesCache/wp_ss_20140923_0001.png'
'wp_ss_20140923_0001.png',
function(entry){
//file processing
console.log('downloaded successfull');
},
function(error){
console.log("download error" + JSON.stringify(error));
},
false,
{}
);
This code always returns me console output:
download error: {"code":2,"source":"///CapturedImagesCache/wp_ss_20140923_0001.png","target":null,"http_status":null,"body":null,"exception":null}
I don't get it, what am i doing wrong here?
P.S: cordova version: '3.6.3-0.2.13'