Upload image with form in Ionic or Angular

2

I want to take pictures of the device and upload the image to a certain path on my server. I'm trying to use 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 this for now 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 base 64 of the file which is huge, accurate, believe, convert to JPEG and upload to my server.

How can I do this using this plugin, or if there is another way and how to do it.

Thank you!

    
asked by anonymous 18.10.2016 / 19:05

1 answer

3

Oops, I really like working with the base64 image, because String is easier to carry.

Try to get something in the backend that undoes the conversion from base64 to JPG, or PNG.

    
31.10.2016 / 14:53