2
I want to take images of the device and upload the image to a certain path on my server. I’m trying to use the Cordova Image Picker with Base 64.
In my controller I use:
.controller("form_identidade_visualCtrl", function($scope,$rootScope,$state,$location,$ionicScrollDelegate,$http,$httpParamSerializer,$stateParams,$timeout,$ionicLoading,$ionicPopup,$ionicPopover,$ionicSlideBoxDelegate,$ionicHistory,ionicMaterialInk,ionicMaterialMotion,$window,$ionicModal,base64, $cordovaImagePicker){
$rootScope.headerExists = true;
$rootScope.page_id = "form_identidade_visual" ;
$rootScope.last_edit = "forms" ;
// TODO: form_identidade_visualCtrl --|-- $scope.scrollTop
$scope.scrollTop = function(){
$ionicScrollDelegate.$getByHandle("top").scrollTop();
};
// TODO: form_identidade_visualCtrl --|-- $scope.openURL
// open external browser
$scope.openURL = function($url){
window.open($url,"_system","location=yes");
};
// TODO: form_identidade_visualCtrl --|-- $scope.openAppBrowser
// open AppBrowser
$scope.openAppBrowser = function($url){
window.open($url,"_blank","hardwareback=Done");
};
// TODO: form_identidade_visualCtrl --|-- $scope.openWebView
// open WebView
$scope.openWebView = function($url){
window.open($url,"_self");
};
// TODO: form_identidade_visualCtrl --|-- $scope.redirect
// redirect
$scope.redirect = function($url){
$window.location.href = $url;
};
// Set Motion
$timeout(function(){
ionicMaterialMotion.slideUp({
selector: ".slide-up"
});
}, 300);
$scope.collection = {
selectedImage : ''
};
$scope.getImageSaveContact = function() {
// Image picker will load images according to these settings
var options = {
maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
width: 800,
height: 800,
quality: 80 // Higher is better
};
// abre as imagens no aparelho
$cordovaImagePicker.getPictures(options).then(function (results) {
// Loop through acquired images
for (var i = 0; i < results.length; i++) {
$scope.collection.selectedImage = results[i]; // We loading only one image so we can use it like this
window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){ // Encode URI to Base64 needed for contacts plugin
$scope.collection.selectedImage = base64;
$scope.form_identidade_visual.logomarca = $scope.collection.selectedImage;
//$scope.addContact(); // Save contact
});
}
}, function(error) {
console.log('Error: ' + JSON.stringify(error)); // In case of error
});
};
// Form Request
//identidade_visual
$scope.form_identidade_visual= {};
// TODO: form_identidade_visualCtrl --|-- $scope.submitIdentidade_visual
$scope.submitIdentidade_visual = function(){
// animation loading
$ionicLoading.show({
template: '<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
});
var $messages, $title = null;
$http({
method:"POST",
url: "http://vovocooks.com.br/admin/apis/put/vovos_put.php?form=identidade_visual&json=submit",
data: $httpParamSerializer($scope.form_identidade_visual), // pass in data as strings
headers: {"Content-Type":"application/x-www-form-urlencoded"} // set the headers so angular passing info as form data (not request payload)
})
.then(function(response) {
$messages = response.data.message;
$title = response.data.title;
},function(response){
$messages = response.statusText;
$title = response.status;
}).finally(function(){
// event done, hidden animation loading
$timeout(function() {
$ionicLoading.hide();
if($messages !== null){
// message
var alertPopup = $ionicPopup.alert({
title: $title,
template: $messages,
});
// clear input
$scope.form_identidade_visual.descricao_empresa = "";
$scope.form_identidade_visual.logomarca = "";
$scope.form_identidade_visual.facebook = "";
}
}, 500);
});
};
// code
// TODO: form_identidade_visualCtrl --|-- controller_by_user
// controller by user
function controller_by_user(){
try {
} catch(e){
console.log("error: page form_identidade_visual => custom controller");
console.log(e);
}
}
$scope.rating = {};
$scope.rating.max = 5;
// animation ink (ionic-material)
ionicMaterialInk.displayEffect();
controller_by_user();
})
In my view, I’m doing for now this way for testing:
<ion-view view-title="Identidade Visual" hide-nav-bar="false" >
<!-- content -->
<ion-content delegate-handle="top" lazy-scroll id="page-form_identidade_visual" class="has-header page-form_identidade_visual">
<div class="list list" >
<form ng-submit="submitIdentidade_visual()">
<label class="item item-input item-floating-label">
<span class="input-label">Descrição da Empresa</span>
<textarea ng-model="form_identidade_visual.descricao_empresa" name="descricao_empresa" placeholder="Descrição da Empresa" ></textarea>
</label>
<button class="button button-full button-positive" ng-click="getImageSaveContact()">
Inserir foto ou logo
</button>
<img ng-src="{{collection.selectedImage}}" style="width:100%; height: auto;"/>
<p>{{collection.selectedImage}}</p>
<label class="item item-input item-floating-label">
<span class="input-label">{{collection.selectedImage}}</span>
<input type="text" ng-model="form_identidade_visual.logomarca" name="logomarca" placeholder="{{collection.selectedImage}}" />
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Facebook</span>
<input type="text" ng-model="form_identidade_visual.facebook" name="facebook" placeholder="Facebook" />
</label>
<div class="item item-button">
<button class="button button-full button-assertive ink">Enviar dados (Passo 2 de 3)</button>
</div>
</form>
</div>
<br/><br/><br/><br/>
</ion-content>
<!-- ./content -->
</ion-view>
The result is the base 64 file which is huge, accurate, I believe, convert to JPEG and send to my server.
How can I do using this plugin, or if there is another way and how to do.
Thank you!
Perfect! Obrgado! :))
– Ramos