File upload in ionic (image or any file)? - ionic-framework

can any one please sort it out it gives error FileTransfer is not defined.
Below is my code
controller("ExampleController", function($scope, $cordovaFileTransfer) {
$scope.upload = function() {
var options = {
fileKey: "avatar",
fileName: "yedu.jpg",
chunkedMode: false,
mimeType: "image/jpg"
};
$cordovaFileTransfer.upload("http://192.168.1.109/uploads/upload", "/android_asset/www/img/yedu.jpg", options).then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function(err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
// constant progress updates
});
}
});

I think you getting error in browser . As per the official documentation of plugin this plugin is not supported to browser for more details go to here and here.
If you testing in browser then before installing app in device add the cordovaFileTransfer plugin to your project.
cordova plugin add org.apache.cordova.file-transfer
And for the full implementation of file upload and download with cordova you may go to here.

Related

Uploading large files (200+ mbs) from by ajax to sharepoint 2013 on premise

I'm trying to upload files to a library on sharepoin 2013 on premise by Ajax. I'm using the following code:
function uploadFileee(file) {
// var file = element.files[0];
console.log(file);
var reader = new FileReader();
reader.onload = function (e) {
enviar(e.target.result, file.name);
}
reader.onerror = function (e) {
alert(e.target.error);
}
//reader.readAsArrayBuffer(file);
reader.readAsArrayBuffer(file);
function enviar(file, name) {
var url = String.format(
"{0}/_api/Web/Lists/getByTitle('{1}')/RootFolder/Files/Add(url='{2}', overwrite={3})",
_spPageContextInfo.webAbsoluteUrl, "TreinamentoLib", name, "true");
console.log(url);
jQuery.ajax({
url: url,
type: "POST",
data: file,
processData: false,
headers: {
Accept: "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log("sucesso");
},
error : function(err)
{
console.log("erro");
}
})
}
}
As long the file is below 200mb's, it works just fine, but bigger than that, the browser crashes.
Chunks just work on the online version of sharepoint.. cound't make it work on On Premise.
Already though on creating an webApi in C# to receive the chunks and group it together and upload it to the library..
Anyone have ever done something like it? does anyone have any sugestion?
In SharePoint On Premise, you can try to increase the maxRequestLength="51200" executionTimeout="999999" in the web.config file at "C:\Inetpub\wwwroot\wss\VirtualDirectories\< Virtual Directory >" folder.
Or check maximum upload size for the web application : Central Admin> Application Management> Manage Web Applications> Select the desired web app and click General Settings on the ribbon.

How to get uploaded image url in sails js

I am successfully able to upload files. But i need to get the url.
For eg: localhost:1337/images/image.jpg
I have tried to do this but not successful yet
Sails version i am using is 1.2.3
Here is my code for upload
try{
var uploadFile = req.file('images');
uploadFile.upload({ dirname: '../../assets/images' }, function onUploadComplete(err, files) {
if (err)
return res.serverError(err);
return res.json({ status: 200, file: files });
});
}catch(err){
return res.serverError(err);
}
localhost:1337/images/image.jpg
This says Not Found
You may want to use sails-hook-uploads and check out https://github.com/mikermcneil/ration
Check this file too
https://github.com/mikermcneil/ration/blob/master/api/controllers/things/upload-thing.js

cordova camera plugin issue with FILE_URI

I am using IONIC 3.7.0 in my current project. In one requirement I need to use cordova camera plugin to take photo uri from image gallery. Every time when I am trying to get the URI , I get the data_uri which is base64 long string.
I only need the file_uri of image to go further. Please suggest.
var options = {
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.FILE_URI
};
Camera.getPicture(options)
.then((imageData) => {
console.log(imageData);
this.fileToUpload = imageData;
const base64Image = "data:image/jpeg;base64," + imageData;
this.preloadImage._img.src = base64Image;
this.codeservice.doProfileImageUpload(base64Image)
.subscribe(res => {
if(res.length()>0){
console.log('updated');
}
})
}, (err) => {
console.log(err);
});

Handling Facebook/Google login with ngCordovaOauth in Ionic + Firebase

I'm trying to implement Firebase authentication with angularfire signInWithCredential method for my Ionic app. As I'm using Firebase 3.x SDK, the methods signInWithRedirect and signInWithPopup are not yet supported on mobile devices. Thus I'm using the plugin ngCordovaOauth.
var ref = firebase.database().ref().child("users");
$scope.users = $firebaseArray(ref);
$cordovaOauth.facebook("//removed_client_id", [ "public_profile", "email"]).then(function(result) {
var credentials = firebase.auth.FacebookAuthProvider.credential(result.access_token);
$scope.authObj.$signInWithCredential(credentials).then(function(authData) {
var existUser = $scope.users.$getRecord(authData.uid);
if(existUser == null){
$scope.user = {
uid: authData.uid,
displayName: authData.displayName,
avatar: authData.photoURL,
email: authData.email,
contact: "0000000000",
provider: "facebook"
}
firebase.database().ref("users/" + authData.uid).set($scope.user);
}
$rootScope.result = authData;
$state.go("menu.home");
}, function(error) {
console.error("ERROR: " + error);
});
}, function(error) {
console.log("ERROR: " + error);
});
The problem that I'm facing is I have no idea what the structure of 'authdata' is as I couldn't find any documentation for the same. With sigInWithPopup, firebase returns 'result' object; contents of which can be accessed like 'result.user.uid', 'result.user.displayName' or 'result.user.email'. How can I achieve the same here as I'm trying to store the user profile when he logs in for the first time? Any help? I'm testing on android device. Thank you!
signInWithCredential returns a promise that resolves with a firebase.User same as signInWithEmailAndPassword and all other sign in apis.
Check the docs for more info on firebase.User:
https://firebase.google.com/docs/reference/js/firebase.User

filepicker exportFile and popup blocker

I program a webapp which use ink filepicker for opening/saving text files from/to the cloud. In mobile browsers, when I open a file via :
filepicker.pick({extension: '.txt'},
function(FPFile) {
filepicker.read(FPFile, function(data) {
// Open file
});
});
There is no problem, whether or not the "block popup" option is activated in browser. But when I save file via :
filepicker.store(
mycontent64,
{base64decode: true, mimetype: 'text/plain'},
function(InkBlob) {
filepicker.exportFile(
InkBlob,
{suggestedFilename:"myfile.txt",extension: ".txt"},
function(InkBlob) {
// ******* Save file
},
function(FPError) {
console.log(FPError.toString());
});
},
function(FPError) {
console.log(FPError.toString());
}
);
it only works when the "block popup" option is deactivated in the browser (Safari on iPad or Android stock browser, or google chrome Android...).
If it's activated, browser refuse to open export dialog in a new tab, and with "FPError 131" in console...
I can't tell my users to deactivate this option !
So is there any workaround that do the trick ?
Thank's !
Some workaround would be open filepicker dialog inside filepicker in the same page.
For mobile devices change filepicker.exportFile options:
filepicker.store(
mycontent64,
{base64decode: true, mimetype: 'text/plain'},
function(InkBlob) {
filepicker.exportFile(
InkBlob,
{
suggestedFilename:"myfile.txt",
extension: ".txt"
container: "yourIframeId",
mobile: true
},
function(InkBlob) {
// ******* Save file
},
function(FPError) {
console.log(FPError.toString());
});
},
function(FPError) {
console.log(FPError.toString());
}
);
"yourIframeId" is Id of iFrame tag inside your website.
'mobile: true' will force mobile - responsive version of dialog.
Check docs: https://developers.filepicker.io/docs/web/#export