fileUpload using angularjs

Question

i am doing file uploading using angularjs. I am getting response but can't store that file into local disk.

controller

(function ()
{
'use strict';

angular
    .module('app.message')
    .controller('MessageController', MessageController);

/** @ngInject */
MessageController.$inject = ['$scope', '$http', '$location', 'fileUpload'];
function MessageController($scope, $http, $location, $rootScope, fileUpload)
{
    var vm = this;



    vm.uploadFile = function(){

        var file = $scope.myFile;

        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "./uploads";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}
})();

service

(function ()
{
'use strict';

angular
    .module('app.core')
    .factory('fileUpload', fileUpload);

/** @ngInject */
function fileUpload()
{
    console.log('dsfsdfdsf');

      this.uploadFileToUrl = function(file, uploadUrl){
          console.log('inside');
           var fd = new FormData();
           fd.append('file', file);

           $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
           })

           .success(function(){
           })

           .error(function(){
           });
    }
    return this;
}
}());

view

<div flex style="max-width:700px;">
    <input type = "file" file-model = "myFile"/>
    <button ng-click = "vm.uploadFile()">upload me</button>
</div>

In console i am getting file details but i is not store in the disk. The error is always shows like fileUpload is undefined in controller.

i think you should remove injection of your service named 'fileUpload' from MessageController.$inject = ['$scope', '$http', '$location', 'fileUpload']; Only keep it within function MessageController($scope, $http, $location, $rootScope, fileUpload) — Amulya Kashyap
– Amulya Kashyap, Commented Mar 10, 2016 at 10:23
thank you. I removed 'fileUpload' from MessageController.$inject = ['$scope', '$http', '$location', 'fileUpload']; Now it's working properly. — Hemanth kumar H J
– Hemanth kumar H J, Commented Mar 10, 2016 at 12:05
now i'm posting my comment as answer if it help you please accept it or vote up for me...thanks in advance — Amulya Kashyap
– Amulya Kashyap, Commented Mar 10, 2016 at 12:09

halfer · Accepted Answer · 2024-01-02 01:08:12Z

1

You should try this:

(function ()
{
'use strict';

angular
    .module('app.message')
    .controller('MessageController', MessageController);

/** @ngInject */
MessageController.$inject = ['$scope', '$http', '$location', '$rootScope'];
function MessageController($scope, $http, $location, $rootScope, fileUpload)
{
    var vm = this;



    vm.uploadFile = function(){

        var file = $scope.myFile;

        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "./uploads";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}
})();

edited Jan 2, 2024 at 1:08

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 10, 2016 at 12:10

Amulya Kashyap

2,3731 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hemanth kumar H J Over a year ago

after request to sent to node file it shows error like Unexpected Field. What should i do now? Help me

Hemanth kumar H J Over a year ago

i am getting error like { [Error: Unexpected field] code: 'LIMIT_UNEXPECTED_FILE', field: 'file', storageErrors: [] } . I solved that problem, thanks for your concern.

Amulya Kashyap Over a year ago

i think you are uploading multiple files but receiving in single field in your app.js file...refer this link stackoverflow.com/questions/34798593/…

shaouari · Accepted Answer · 2016-03-10 10:25:20Z

0

you forget $rootScope injection

/** @ngInject */
MessageController.$inject = ['$scope', '$http', '$location','$rootScope', 'fileUpload'];
function MessageController($scope, $http, $location, $rootScope, fileUpload)
{
    var vm = this;



    vm.uploadFile = function(){

        var file = $scope.myFile;

        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "./uploads";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}
})();

answered Mar 10, 2016 at 10:25

shaouari

2361 silver badge3 bronze badges

Collectives™ on Stack Overflow

fileUpload using angularjs

controller

service

view

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

controller

service

view

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related