how can we upload a file in angularJS

Question

is there any direct approach for file upload in angularJS. I am completely new to angularJS. Tried googling about this,but couldn't find any basic example on this.do wee need to install any libraries/.js files

 <!DOCTYPE html>
    <html ng-app xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
<body>
<h5>Upload</h5>
    <!--<div class="span12">-->            
    <div class="span4">
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <div class="input-append">
                <div class="uneditable-input span3">
                    <i class="icon-file fileupload-exists"></i> 
                    <span class="fileupload-preview" ng-model="userType"></span>                                          
                </div>                                
                <span class="btn btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <!--<input type="file" name="file" />-->
                    <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" />
                </span>
                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>                   
    </div>
    <div class="span2"  >
        <button type="submit"  value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state">
            <i class="icon-upload"></i>
            <span>Upload File</span>
        </button>                       
    </div>
    <script>
        $scope.setFileEventListener = function (element) {
            $scope.uploadedFile = element.files[0];

            if ($scope.uploadedFile) {
                $scope.$apply(function () {
                    $scope.upload_button_state = true;
                });
            }
        }

        $scope.uploadFile = function () {
            uploadFile();
        };


        function uploadFile() {
            if (!$scope.uploadedFile) {
                return;
            }

            ajax_post.uploadFile_init($scope.uploadedFile)
                .then(function (result) {
                    if (result.status == 200) {
                        $scope.storeDB_button_state = true;
                        clientInfo.imagePath = "/uploadsfolder/" + $scope.uploadedFile.name;

                    }
                }, function (error) {
                    alert(error.message);
                });
        }
    </script>
</body>
</html>

Maxim Shoustin · Accepted Answer · 2013-11-19 08:08:39Z

Here is a snippets of code that upload any file (images also) to server by using

bootstrap-fileupload (Bootstrap v2.3.1-j6)

enter image description here

HTML

<h5>Upload</h5>
    <!--<div class="span12">-->            
    <div class="span4">
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <div class="input-append">
                <div class="uneditable-input span3">
                    <i class="icon-file fileupload-exists"></i> 
                    <span class="fileupload-preview" ng-model="userType"></span>                                          
                </div>                                
                <span class="btn btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <!--<input type="file" name="file" />-->
                    <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" />
                </span>
                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>                   
    </div>
    <div class="span2"  >
        <button type="submit"  value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state">
            <i class="icon-upload"></i>
            <span>Upload File</span>
        </button>                       
    </div>

JS

$scope.setFileEventListener = function(element) {
        $scope.uploadedFile = element.files[0];

        if ($scope.uploadedFile) {
            $scope.$apply(function() {
                $scope.upload_button_state = true;
            });   
        }
    }

$scope.uploadFile = function() {
    uploadFile();
};


function uploadFile() {
    if (!$scope.uploadedFile) {
        return;
    }

    ajax_post.uploadFile_init($scope.uploadedFile)
        .then(function(result) {
            if (result.status == 200) {
                $scope.storeDB_button_state = true;
                clientInfo.imagePath = "/uploadsfolder/" +     $scope.uploadedFile.name;

            }
        }, function(error) {
            alert(error.message);
        });
}

Here we use service ajax_post and invoke method: uploadFile_init:

factory

app.factory('ajax_post', ['$http', function(_http) {

        return {           
            uploadFile_init: function(uploadedFile) {
                var fd = new FormData();
                fd.append("uploadedFile", uploadedFile);
                var upload_promise = _http.post('somePath',
                    fd, {
                        headers: {
                            'Content-Type': undefined
                        },
                        transformRequest: angular.identity
                    });

                return upload_promise;
            }
        }
    }
]);

Hope that will help

Thanks a lot for the help...i am almost done..but unable to understand the app factory thing(i am new to this).i just created one HTML page in Visualstudio 2012 and added your code of HTML and js in that page.I may be doing wrong.Please help me in the process.nothing happens when i click upload file button.do i need to add any jquery/js references.i will attach my html file/project file
Welcome to Angularjs world! I can't describe how angualr works, its out from question scope but you can look on this demo how factory works: jsfiddle.net/pkozlowski_opensource/PxdSP/14
added my code to the question.please check it.added ng-app to html tag at the starting.read some where it is required for angular js.

Collectives™ on Stack Overflow

how can we upload a file in angularJS

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related