angularjs file bulk upload using MVC 5

angularjs file bulk upload using MVC 5

HTML code sample
?
01
02
03
04
05
06
07
08
09
10
11
<div ng-app="userApp" ng-controller="uploadUserCtrl">
    <div id="left">
      <h6>Select file</h6>
       <div>
           <input type="file" file-model="myFile" />
            <button type="button" ng-click="uploadFile()">
                    <i class="fa fa-cloud-upload"></i> Upload
            </button>
        </div>
   </div>
</div>
<div ng-app="userApp" ng-controller="uploadUserCtrl">
    <div id="left">
      <h6>Select file</h6>
       <div>
           <input type="file" file-model="myFile" />
            <button type="button" ng-click="uploadFile()">
                    <i class="fa fa-cloud-upload"></i> Upload
            </button>
        </div>
   </div>
</div>
AngularJs code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var app = angular.module('userApp', []);
//This is current loged user UIds.
var uid = parseInt(namspace.session.UID);
//This is user services code sample.
app.service('userService', function ($http) {
    this.uploadBulkUserFileToUrl = function (file) {
        var fdata = new FormData();
        var url = baseURL + "Setting/fileUpload/"+ uid;
        fdata.append('file', file);
        return $http.post(url, fdata, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined }
            })
            .success(function (resp) {
                //debugger;
            })
            .error(function (resp) {
                //debugger;
            });
    }
});
//This is user upload controller code sample.
app.controller('uploadUserCtrl', function ($scope, userService) {
  $scope.uploadFile = function () {
      var file = $scope.myFile;
      userService.uploadBulkUserFileToUrl(file);
  };
});
//This is user upload custom directive code sample.
app.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]);
                          });
                      });
                  }
              };
          }
]);
var app = angular.module('userApp', []);
//This is current loged user UIds.
var uid = parseInt(namspace.session.UID);

//This is user services code sample.
app.service('userService', function ($http) {
    this.uploadBulkUserFileToUrl = function (file) {
        var fdata = new FormData();
        var url = baseURL + "Setting/fileUpload/"+ uid;
        fdata.append('file', file);

        return $http.post(url, fdata, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined }
            })
            .success(function (resp) {
                //debugger;
            })
            .error(function (resp) {
                //debugger;
            });
    }
});

//This is user upload controller code sample.
app.controller('uploadUserCtrl', function ($scope, userService) {
  $scope.uploadFile = function () {
      var file = $scope.myFile;
      userService.uploadBulkUserFileToUrl(file);
  };
});

//This is user upload custom directive code sample.
app.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]);
                          });
                      });
                  }
              };
          }
]);
MVC 5 controller code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
[HttpPost]
  public ActionResult fileUpload(HttpPostedFileBase file, string id)
  {
      if (file != null)
      {
          if (file.ContentLength > 0)
          {
              string FileName = Path.GetFileName(file.FileName);
              string Extension = Path.GetExtension(file.FileName);
              string FilePath = Server.MapPath(Constant.UploadUserPath + FileName);
              file.SaveAs(FilePath);
              file.InputStream.Close();
              file.InputStream.Dispose();
              ExportExcelDataToDB(FilePath, Extension, id);
          }
      }
      return RedirectToAction("Users");
  }
[HttpPost]
  public ActionResult fileUpload(HttpPostedFileBase file, string id)
  {
      if (file != null)
      {
          if (file.ContentLength > 0)
          {
              string FileName = Path.GetFileName(file.FileName);
              string Extension = Path.GetExtension(file.FileName);

              string FilePath = Server.MapPath(Constant.UploadUserPath + FileName);
              file.SaveAs(FilePath);
              file.InputStream.Close();
              file.InputStream.Dispose();

              ExportExcelDataToDB(FilePath, Extension, id);
          }
      }
      return RedirectToAction("Users");
  }
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.