Upload image with form in Ionic or Angular

Asked

Viewed 918 times

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!

1 answer

3


Oops, I quite like working with the image Base64, being String is easier to carry.

Try to catch something in the backend that undoes the conversion from Base64 to JPG, or PNG.

  • Perfect! Obrgado! :))

Browser other questions tagged

You are not signed in. Login or sign up in order to post.