Wednesday, 25 January 2017

Create a Fileupload Directive in Angular Js

In this post we are going to see how to create a Fileupload Directive in Angular Js. Using that directive we can able to get files list, success callback, error callback, input user data, url to upload files,method etc.

For this we have to add the two module reference files, from this file we have to add angularFileUpload module to our app module.

angular-file-upload.js
angular-file-upload-shim.js

Add above two files in the project and add script tag in the index.html

var rgapp = angular.module('rgapp', ['angularFileUpload']);



Result Directive will be like this :

  <fileupload-form asyncurl="~/api/Blog"
                             method="post"
                             input-data="filedata"
                             fileselect-callback="uploadfiles(files)"
                             success-callback="success(data,status,headers,config)"

                             error-callback="error(data,status,headers,config)">
  </fileupload-form>




Directive:

 var rgapp = angular.module('rgapp', ['angularFileUpload']);

 rgapp.directive('fileuploadForm', ['$upload', function ($upload) {
    return {
        scope: {
            asyncurl: '@',
            method: '@',
            successCallback: '&',
            fileselectCallback:'&',
            errorCallback: '&',
            inputData:'='
        },
        restrict: 'E',
        templateUrl:'../App/templates/upload.html',
        link: function (scope, element, attr, cntrl) {

            var uploadingFiles = [];
            var uploadFileHandlers = [];

            scope.uploadedFilesString = '';

            scope.uploading = function(){
                for (var i = 0; i < uploadingFiles.length; i++) {
                    var _file = uploadingFiles[i];

                    (function (indx) {
                        uploadFileHandlers[indx] = $upload.upload({
                            url: attr.asyncurl,
                            method: attr.method,
                            file: _file,
                            data: scope.inputData
                        })
                            .progress(function (prg) {
                                console.log("index " + indx);
                                console.log(prg);
                             })
                            .success(function (data, status, headers, config) {
                                if (scope.successCallback)
                                scope.successCallback({ data: data, 
                                      status: status, 
                                      headers: headers, 
                                      config: config });
                            })
                            .error(function (data, status, headers, config) {
                                if (scope.errorCallback)
                                scope.errorCallback({ data: data, 
                                       status: status, 
                                       headers: headers, 
                                       config: config });
                            });

                   })(i);

                }
            }

            scope.abort = function (indx) {
                uploadFileHandlers[indx].abort();
            }

            scope.uploadedFiles = function (files) {
                uploadingFiles = files;
                scope.uploadedFilesString = '';
                for (var i = 0; i < uploadingFiles.length; i++) {
                    scope.uploadedFilesString += uploadingFiles[i].name + ";";
                }
                if (scope.fileselectCallback)
                    scope.fileselectCallback({ files: files });
            }
           
            scope.browseFiles = function () {
                document.getElementById('rgfile').click();               
            }
           
        }
    }
}]);



Template:

<div>
    <div class="">
        <div class="form-inline" style="padding:20px">
            <label>Files :</label>
            <input type="text" ng-model="uploadedFilesString" class="form-control" />
            <button ng-click="browseFiles()" class="btn btn-sm">Browse</button>
            <button ng-click="uploading()" class="btn btn-sm btn-success">Upload</button>
        </div>
        <div class="form-group">
            <input  type="file" style="display:none" ng-file-select="uploadedFiles($files)"                      class="form-control" id="rgfile"
                    ng-model="user.file" multiple />
        </div>         
    </div>

</div>



Index.html

    <script src="~/Scripts/angular.js" type="text/javascript"></script>
    <script src="~/Scripts/angular-route.js" type="text/javascript"></script>
    <script src="~/Scripts/angular-file-upload.js" type="text/javascript"></script>
    <script src="~/Scripts/angular-file-upload-shim.js" type="text/javascript"></script>

    <script src="~/App/app.js" type="text/javascript"></script>

<div ng-controller="blogcontroller">
    <div>
        <h3>Angular js File Upload</h3>
    </div>
    <div>
        <div class="form-inline">
            <label>Tracking id :</label>
            <input type="text" class="form-control" ng-model="filedata.trackingid" />
        </div>
        <br />
        <div class="form-inline">
            <label>Description :</label>
            <input type="text" class="form-control" ng-model="filedata.description" />
        </div>
        <div style="margin-left:25px;">

            <fileupload-form asyncurl="~/api/Blog"
                             method="post"
                             input-data="filedata"
                             fileselect-callback="uploadfiles(files)"
                             success-callback="success(data,status,headers,config)"
                             error-callback="error(data,status,headers,config)">
           </fileupload-form>

        </div>
    </div> 

</div>



Controller:


rgapp.controller('blogcontroller', ['$scope','$upload',function ($scope,$upload) {

    $scope.Files = [];
    $scope.FilesData = [];
    $scope.filedata = { trackingid:'', description:''};

    $scope.success = function (data,status,headers,config) {
        console.log('config');
        console.log(config);
        $scope.FilesData.push(data);
    }

    $scope.error = function (data,status,headers,config) {
        console.log('error');
        console.log(config);
    }

    $scope.uploadfiles = function (files) {
        console.log(files);
    }

    

}]);




Output:





From this post you can learn how to create a fileupload directive in Angular js

1 comment:

  1. Apple is a visionary company.. Muwaaaahahahahahahahahahahahahahaaaaaa ...lol

    ReplyDelete