Uploading files in Ionic application using Web API

Question

My issue is as below.

I have given WEB API where I have to add boards picture.

What I have to DO?

• User should able to select Image from Phone
• User can add Name of board
• When user click on submit, entered board name and board image should post using Web API with method of PUT. Here below is WEB API Details

WEB API Details

Header

• URL: https://example.com
• Content-Type: | Content Type |
• Method: PUT

Data

• board_id: 321
• board_title: | Title |
• board_background: | File |

I have used cordovaImagePicker plugin to select image and then I get stuck to uploading it to Server.

I can use cordova file transfer plugin but I think that will not help me in this case as there is no specified place to store image. All the file management done by WEB API, we have to just post file with Data.

Answer 1

Below link will definitely help you:

http://ionicmobile.blogspot.in/2015/10/jquery-file-upload.html

Make the appropriate changes if needed. Any help let me know...

Answer 2

First of all to need to select the image from device.

vm.getImages = function () {
            var options = {
                quality: 70,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit: true,
                correctOrientation:true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: true
            };

            navigator.camera.getPicture(onSuccess, onFail, options);

            function onSuccess(imageURI) {                
                vm.image = "data:image/jpeg;base64," + imageURI;
                vm.imageURI = imageURI;
            }

            function onFail(message) {                
                console.log('Failed because: ' + message);
            }
        };

You can change the source type for input if needed.

sourceType: Camera.PictureSourceType.CAMERA,

On success you get ImageURI either use it directly or convert it to base64 as mentioned below for uploading.

vm.image = "data:image/jpeg;base64," + imageURI;

After this you can use the FileTransfer plugin to upload file and track the progress at the same time.

cordovaFileTransfer.upload()
                .then(function (result) {},
                  function (err) {},
                  function (progress) {});

Answer 3

After trying a lot solution I have come with below answer.

Board.html

    <ion-view>
        <ion-nav-bar class="bar">
            <ion-nav-title>
                <h1 class="title">
                    Create Board
                </h1>
            </ion-nav-title>
        </ion-nav-bar>
        <form name="boardForm" ng-submit="addBoard(data)">
            <ion-content padding="false" scroll="true" has-bouncing="false">
                <div id="form">
                    <div style="text-align: center; padding-top: 2%; padding-bottom: 2%;">
                        <div id="image-preview">
                            <label for="image-upload" id="image-label"><img src="{{ImagePrefix}}/task_plus.png" alt=""/></label>
                            <input type="file" name="board_background" id="image-upload" file-model="data.board_background">
                        </div>
                        <p>Add Cover</p>
                    </div>
                    <ion-list>
                        <ion-item style="background-color: #F8F8F8;">
                            <label class="control-label" for="board_name">BOARD NAME</label>
                        </ion-item>
                        <ion-item ng-class="{true:'error'}[submitted && boardForm.board_title.$invalid]">
                            <input type="text" id="board_name" ng-model="data.board_title"
                                   placeholder="Add a Name" name="board_title" required>

                            <p ng-show="submitted && boardForm.board_title.$error.required">
                                Please enter a board name
                            </p>
                        </ion-item>
                    </ion-list>
                </div>
            </ion-content>
            <ion-footer-bar>
                <button class="button button-block control-button bottomOfPage"
                        ng-click="submitted = true">
                    CREATE
                </button>
            </ion-footer-bar>
        </form>
    </ion-view>

directive

    .directive('fileModel', ['$parse', function ($parse) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var model = $parse(attrs.fileModel);
                    var modelSetter = model.assign;

                    element.bind('change', function () {
                        scope.$apply(function () {
                            modelSetter(scope, element[0].files[0]);
                        });
                    });
                }
            };
        }])

Controller

    .controller('ManageBoardCtrl', function ($scope, $http, $ionicPopup, $state, BoardService) {
            $scope.submitted = false;
            $scope.data = {};
            $scope.addBoard = function(formData) {
                BoardService.CreateBoard(formData).then(function(response) {
                    if (response === "success") {
                        $ionicPopup.alert({
                            title: "Success",
                            template: "Board created successfully"
                        });
                    }
                }, function (response) {
                    $ionicPopup.alert({
                        title: "Failed",
                        template: "Somethings wrong, Can not create boards at now."
                    });
                });
            }
        })

Service

    .service('BoardService', function ($q, $http) {
            var getUrl = API_URL + "boards";

            var createBoard = function (fData) {
                var formData = new FormData();
                formData.append("board_title", fData.board_title);
                formData.append("board_background", fData.board_background);

                return $q(function (resolve, reject) {
                    $http({
                        transformRequest: angular.identity,
                        method: 'POST',
                        url: getUrl,
                        headers: { 'Content-Type': undefined },
                        data: formData
                    }).success(function (response) {
                        if (response.success === true) {
                            resolve('success');
                        } else {
                            reject('fail');
                        }
                    }).error(function () {
                        reject('requesterror');
                    });
                });
            };

            return {
                CreateBoard: createBoard
            };
        })

After deploying application for android / iPhone file selection will handle the browsing Images based on the OS.

Answer 4

One simple thing I can suggest,

Use input["file"] tag to select the image. You will get the file object and a temporary url. with this url you can show the image in the form.

Then use formData to append the image and the other field.

e.g.

 var fd = new FormData();
 fd.append('board_background', $scope.image, $scope.image.name);
 fd.append('board_id', 321);
 fd.append('board_title', 'Dummy title');

 var xhr = new XMLHttpRequest();
 xhr.open('PUT', YOUR_URL, true);

 xhr.onload(function(res){
    // Write your callback here.
 });

 // Send the Data.
 xhr.send(fd);

Hope it will help you and meet your requirements.