Sending Uploaded File Information In A CORS Enabled Web Application

In this blog, let’s see

What are Directives in AngularJS?

• Actually, they're markers on DOM elements.
• With the help of Directives, we can extend HTML with the new attributes.

There are already several predefined directives but also apart from that, we can also create our own Directive as well.

Let us see how to create our own Directive.

We will learn how to create our own Directive to upload the file and with the help of this, we will upload MS-Excel file and will be going to process this at WebAPI controller.

In order to do this,

We need to perform the steps given below.

Step 1

Add Directive given below in your controller.js. Directive is with name ngFileToSelect. The code snippet is given below to do it.

app.directive("ngFileToSelect", function () {
    return {
        link: function ($scope, ele) {
            ele.bind("change", function (e) {
                $scope.file = (e.srcElement || e.target).files[0];
                $scope.filePath = e.target.value;
                $scope. getFileInfo ();
            })
        }
    }
})

Step 2

Now, let us see how to apply this Directive to your HTML. 

The code snippet is given below for it.

<div class="panel-body padding-10">
            <div class="form-inline" id="fileupload">
                <div class="form-group">
                    <label class="margin-right-label">File Name:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" ng-model="filePath" ng-file-select="onFileSelect($files)" ng-disabled="isBrowseDisabled">
                        <label class="input-group-btn">
                            <span class="btn btn-primary">
                                Browse <input type="file" style="display: none;" ng-file-Toselect="onFileSelect($files)" ng-disabled="isBrowseDisabled">
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            <label class="margin-right-label">{{fileInfo}}</label>
        </div>

<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="upload();" >Upload</button>
</div>

Now, your HTML looks, as shown below.



Step 3

Now, in your controller.js, write the code, as shown below.

angular.module("SandipModule").controller("FileUploadController", ["$scope", "$uibModalInstance", function ($scope, $uibModalInstance) {


    $scope.onLoad = function (reader, deferred, scope) {
        return function () {
            scope.$apply(function () {
                deferred.resolve(reader.result);
            });
        };
    };

    $scope.onError = function (reader, deferred, scope) {
        return function () {
            scope.$apply(function () {
                deferred.reject(reader.result);
            });
        };
    };

    $scope.onProgress = function (reader, scope) {
        return function (event) {
            scope.$broadcast("fileProgress",
                {
                    total: event.total,
                    loaded: event.loaded
                });
        };
    };

   $scope.getReader = function (deferred, scope) {
        var reader = new FileReader();
        reader.onload = $scope.onLoad(reader, deferred, scope);
        reader.onerror = $scope.onError(reader, deferred, scope);
        reader.onprogress = $scope.onProgress(reader, scope);
        return reader;
    };

   $scope.readAsDataURL = function (file, scope) {
        var deferred = $q.defer();
        var reader = $scope.getReader(deferred, scope);
        reader.readAsDataURL(file);
        return deferred.promise;
    };

   $scope.xslFinaldata = null;
   $scope.fileInfo = "";
   $scope.fileInfodetails == "";
   $scope.data = uploadaccessData;

   $scope.upload = function () {
       $scope.xslFinaldata = $scope.xslData;
       var docContent = $scope.xslFinaldata;
        $scope.fileName = $scope.uploadedDocName;
        var fileName = $scope.fileName;
        $scope.fileInfo = $scope.fileInfodetails;

        var promisePost = myService.ProcessUploadedDocument(JSON.stringify(fileName), JSON.stringify(docContent));
        promisePost.then(function (response) {
            $scope.SuccessMessage = response;
        }, function (err) {
        });
    }

    $scope.xslData = "";
    $scope.uploadedDocName = "";

    $scope.getFileInfo = function () {
        $scope.progress = 0;
        $scope.readAsDataURL($scope.file, $scope)
                      .then(function (result) {
                          $scope.xslData = result;
                          $scope.uploadedDocName = $scope.file.name;
                          $scope.fileInfodetails = "File name: " + $scope.filePath + " " + $scope.file.size + "   " + "Bytes";
                                                });
    };

}]);

Code explanation->

When the user selects an Excel document to upload at that time, the method given below is getting invoked with the help of our directive.

$scope.getFileInfo();

Through this method, we are going to retrieve all file information, as shown below.

1. Size of file
2. File Name.
3. File Contents

Now, on Upload button, click

$scope.upload() Method is getting executed through which we are going to post file details to ProcessUploadedDocument method in myService, which is an Angular Service

The line of code given below demonstrates it.

var promisePost = myService.ProcessUploadedDocument(JSON.stringify(fileName), JSON.stringify(docContent));
promisePost.then(function (response) {
    $scope.SuccessMessage = response;
}, function (err) {
});

Note, here docContent are in binary format.

Step 4

In service.js

The code snippet is given below for service.js,

myService.ProcessUploadedDocument = function ( fileName, docContent) {
       var def = $q.defer();
       var request = $http({
           url: localhost:85789 + "/api/MyInfoImport/ProcessUploadedDocument",
           dataType: 'json',
           method: 'POST',
           data: JSON.stringify({'fileName': fileName, 'docContent': docContent})
       }).success(function (data, status, headers, config) {
           def.resolve(data);
       }).error(function (response, status, headers, config) {
           console.log(response);
       });
       return def.promise;
   }

Code explanation->

Now, we need to invoke WebAPI controller action. 

The line of code demonstrates it.

var request = $http({
            url: localhost:85789 + "/api/MyInfoImport/ProcessUploadedDocument",
            dataType: 'json',
            method: 'POST',

        })

Here, ProcessUploadedDocument Web API controller action is getting invoked.

With two parameters to it, the line of code demonstrates how to pass two parameters to Web API controller action

data: JSON.stringify({'fileName': fileName, 'docContent': docContent})

Step 5

We are invoking WebAPI Controller action with the multiple parameters from the client side in CORS enabled Web Application.

We can’t invoke WebAPI Controller action with more than one parameter in CORS enabled Web Applications, as per default behavior.

Hence, remember 

To install WebAPI CORS MULTI PARAMS MODELBINDER NuGet package.

For installation of NuGet package given above, run the command given below in the Package Manager console.

PM>Install-Package WebAPICORSMULTIPARAMSMODELBINDER

Install this package in your WebAPI Controller.

The code snippet for WebAPI Controller MyInfoImportController.cs is given below.

[HttpPost, WebAPICORSMULTIPOSTPARAMS.MultiPostParamsBinding.MultiPostParams]
        [Route("ProcessUploadedDocument")]
        public HttpResponseMessage ProcessUploadedDocument( string fileName, string docContent)
        {

            HttpResponseMessage resp;
            Microsoft.Office.Interop.Excel.Application oExcel = null;
            Workbook oWorkBook = null;
            Worksheet oWorkSheet = null;
            Range oRange = null;
            string fName = Newtonsoft.Json.JsonConvert.DeserializeObject<string>(fileName).ToLower();
            string fContent = Newtonsoft.Json.JsonConvert.DeserializeObject<string>(docContent);
               string uploadPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/MyFileFolder/Uploads");

                    fContent = fContent.Replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", String.Empty);
                    byte[] fileData = Convert.FromBase64String(fContent);

                        string createFPath=String.Concat(uploadPath,"/");
                        string filename = createFPath+  fName;
                        Stream stream = new MemoryStream(fileData);
                        using (Stream file = File.Create(filename))
                        {
                            stream.CopyTo(file);
                        }


                        ResponseData result = imageService.UpdateChargeImport(fileData);

                        if (System.IO.File.Exists(createFPath)) System.IO.File.Delete(createFPath);
                            GC.Collect();
                resp = Request.CreateResponse<string>(HttpStatusCode.OK, strResponse);
            return resp;
        }

Code explanation->

Note

In the code snippet given above.

The line of code given below is to demonstrate how to add an attribute on WebAPI controller Action in order to invoke it with the multiple parameters.

• [HttpPost, WebAPICORSMULTIPOSTPARAMS.MultiPostParamsBinding.MultiPostParams]
  
  
• The line of code is to demonstrate how to set the upload path
  string uploadPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/MyFileFolder/Uploads");
  
  
• Here, we used HostingEnvironment.MapPath instead of Server.MapPath, as we are using this into the WebAPI Controller .

Now, we need to set docContent,

• The line of code is given below demonstrate
  

  string fContent = Newtonsoft.Json.JsonConvert.DeserializeObject<string>(docContent);

  Now, in order process this
  
  
• The line of code indicates that we are going to process uploaded Excel file by removing unnecessary content
  

  fContent = fContent.Replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", String.Empty);

• The line of code given below demonstrates how to convert this uploaded document to byte array.
  

  byte[] fileData = Convert.FromBase64String(fContent);

• The line of code demonstrates how to create a replica of your uploaded document into your application folder
  i.e. at uploadPath,
  

  string createFPath=String.Concat(uploadPath,"/");
                          string filename = createFPath+  fName;
                          Stream stream = new MemoryStream(fileData);
                          using (Stream file = File.Create(filename))
                          {
                              stream.CopyTo(file);
                          }

  Here, actually we added an uploaded document at uploadPath mentioned above.
  
  
• Now, we can send this byte array to WCF Service as well for processing
  
  The line of code given below demonstrates it.
  

  ResponseData result = imageService.UpdateChargeImport(fileData);

  Here, imageService is our WCF service instance.
  
  
• The line of code given below demonstrates how to delete the file from the uploaded path. 
  

  if (System.IO.File.Exists(createFPath))
  {
      System.IO.File.Delete(createFPath);
  }