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

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.