up vote 2 down vote favorite

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.

enter image description here

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.

share|improve this question
    
Please provide an excerpt from your form source or better yet a jsfiddle/plunker/etc demonstrating the issue – miensol Feb 15 '16 at 7:50
    
I don't know how to use it but i can explain my problem. – Ashish Asodiya Feb 15 '16 at 8:00
up vote 3 down vote

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. 
                    });
                }
            });
        }
    }
};
});
share|improve this answer
    
Thank you. But how i can send my form data to asp.net controller with my images. – Ashish Asodiya Feb 15 '16 at 9:02
    
That would be your challenge. You should pass the data to the server with a multipart/form-data request. Read this link for more info: uncorkedstudios.com/blog/… – Gracia Feb 16 '16 at 2:11
    
Thank you @Gracia I use HttpPostedFileBase for Images. And Form Collection for data passing. – Ashish Asodiya Feb 16 '16 at 10:03
up vote 0 down vote accepted

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");
        }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.