Upload Multiple Image using multiple file control in asp.net mvc 4.0 (angular js)

Question

I am using Visual Studio 2012 Express with Framework 4.5 MVC.

I am also using Angular Js for the first time.

I have a view page that contains the multiple browse (file) button that will be use for upload single image by selecting each of them individually with my form data.

The problem is that by using submit button I am not able to get the images but I got the form data.

I want to get the images with the form data using Angular js.

I have already referred below posts but not getting the solution:

LINK 1

LINK 2

Please anyone help me to solve out this problem, would be appreciated.

Answer 1

I have a sample code for the uploading of multiple image using angularjs.

This link might help you: https://jsfiddle.net/n9tL7cdr/1/

<div ng-app="test">
<div ng-controller="UploadCtrl">
    <table>
        <tr ng-repeat="i in [1, 2, 3, 4]">
            <td>{{i}}</td>
            <td>
                <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />                           </td>
            <td>
                <img ng-src="{{ image[$index].dataUrl }}" height="50px" />
            </td>
        </tr>
    </table>
</div>

CONTROLLER:

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {
// Variable for image. 
$scope.image = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index; // index of image. 
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.image[index] = {dataUrl: e.target.result}; // Retrieve the image. 
                    });
                }
            });
        }
    }
};
});

Answer 2

Here i find the solution using HttpPostedFileBase and Form Collection.

     public ActionResult AddImageUpload(IEnumerable<HttpPostedFileBase> files,FormCollection fc )
        {
            ImageUpload IU = new ImageUpload();
            IU.MaterialId = Convert.ToInt32((fc["MaterialId"]).Replace("number:",""));
            IU.CategoryId = Convert.ToInt32((fc["CategoryId"]).Replace("number:", "")); 
            string tr = fc["hdnSub"].ToString();
            string result = null;
            string Message, fileName, actualFileName;
            Message = fileName = actualFileName = string.Empty;
            bool flag = false;
            //HttpPostedFileBase f= IU.ImageP;
            string[] SubAssemblyId = (tr.Split(','));
            int i = 0;
            string databaseid = null;
            for (int j=0 ; j<files.Count(); j++)
            {

                var fileContent = Request.Files[j];
                if (fileContent.FileName != "")
                {
                    databaseid = SubAssemblyId[i];
                    string fn = DateTime.Now.ToShortDateString().Replace("/", "") + DateTime.Now.TimeOfDay.Hours + DateTime.Now.TimeOfDay.Minutes + DateTime.Now.TimeOfDay.Seconds + DateTime.Now.TimeOfDay.Milliseconds + Path.GetExtension(fileContent.FileName);
                    fileName = fn;
                    try
                    {
                        if (fileContent != null && fileContent.ContentLength > 0)
                        {
                            var inputStream = fileContent.InputStream;
                            var path = Path.Combine(Server.MapPath("/Images/Product/"), fn);
                            using (var fileStream = System.IO.File.Create(path))
                            {
                                inputStream.CopyTo(fileStream);
                            }

                        }
 }
                    catch (Exception)
                    {

                    }

                }
                i++;

            }
return RedirectToAction("ImageUpload");
        }