current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
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 yesterday
    
I don't know how to use it but i can explain my problem. – Ashish Asodiya yesterday
up vote 3 down vote accepted

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 yesterday
    
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 15 hours ago
    
Thank you @Gracia I use HttpPostedFileBase for Images. And Form Collection for data passing. – Ashish Asodiya 7 hours ago
up vote 0 down vote

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.