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 1 down vote favorite
1

I'm using AngularJS with my pages, and I have a doubt: when I do post with my form, how can I pass some selected file to my ASP.NET MVC 3 Controller? Check this out:

My form:

<form enctype="multipart/form-data" ng-controller="FilesController" ng-submit="submitingForm()">
    <div>
        Choose the file:
        <input type="file" onchange="angular.element(this).scope().setSelectedFile(this)" />
    </div>

    <input type="submit" value="Confirm" />
</form>

And the AngularJS Controller:

var module = angular.module('application', []);

(function (ang, app) {

    function FilesController($scope, $http) {

        $scope.setSelectedFile = function (element) {
            $scope.$apply(function($scope) {
                $scope.selectedFile = element.files[0];
            });
        };

        $scope.submitingForm = function() {

            $http.post(url, ???????).success(function() {
                // How to pass that selected file for my ASP.NET controller?
            });
        }
    }

    app.controller("FilesController", FilesController);
})(angular, module);

Thank you!!!

share|improve this question
up vote 1 down vote accepted

I am not quite familiar with AngularJS but if you are attempting to upload a file using an AJAX request you can forget about it. That's not something that could be done. You could use the HTML5 File API if you want to upload files asynchronously to the server. There's an entire section dedicated to this.

And if your client browsers do not support the HTML5 File API you could use a File Upload plugin such as FineUploader or Uploadify (there are quite many others, just google).

share|improve this answer
    
Thanks, I'm trying to use these plugins, and I've got a pretty success! – Kiwanax Jan 16 '13 at 17:43
1  
"you are attempting to upload a file using an AJAX request you can forget about it", I just did it though in MVC4 with angular, using this github.com/danialfarid/angular-file-upload – Kat Lim Ruiz Apr 22 '14 at 18:05
up vote 1 down vote

My Approach is to use FormData.

Create a input tag like this.

<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*" style="margin-top: -38px; opacity: 0; width: 28px;">

And in your Angular Controller create a method LoadFileData(inputFiles) as bellow:

 var formData = new FormData();

 $scope.LoadFileData = function (files) {
        for (var file in files) {
            formData.append("file", files[file]);
        }
    };

Now in formData variable you will have the uploaded files. Just send it to asp.net mvc controller. 

$scope.submit = function () {
        $http.post("/YourController/Method", formData, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function (response) {
      }

In Server side, Asp.NET MVC 4 controller you will have the files 

var files = Request.Files;
share|improve this answer
    
thanks it helps me – Ghazanfar May 23 '15 at 15:46
    
Welcome @user3814490. FormData is really good approach to upload file. – Moshii May 24 '15 at 5:43
    
Yes it is and I saved in database as well as binary array. – Ghazanfar May 25 '15 at 9:24

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.