Want to upload file locally with html and angularjs

Question

I've html page which uploads the file. As of now, I want to store it locally. I'm using angularjs for this. I've gone through many solutions but didn't work. This is my html file:

<body>
    <form action="go" method="post" enctype="multipart/form-data">  
        Select File:<input type="file" name="filename"/><br/>  
        <input ng-click="submit()" class="btn btn-md btn-primary"
            type="submit" value="{{ 'UPLOAD' | translate }}" >
        </input>
    </form>  
</body>

Please don't get confused with directives. They are from bootstrap.

I've done necessary changes in app.js. The uploadcontroller is getting access. The thing is I don't have any idea what to write in function so that the file will get stored locally. This is my controller:

newController.controller("UploadController", function($scope, $location, ezfb) {
    alert("inside uploadcontroller");
    $scope.submit = function(){   

    }
});

Please help me out as I'm stuck at this point for hours. Thank you in advance.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

If you wan to save into a local file, there are several things you need to consider. First you have to modify your html part to eliminate the post section, because for a post you have to specify the url pointing too.

<div ng-controller="MyCtrl">
    <div class="elem">         
            Upload a TXT File:<input id="fileForUpload" type="file" name="filename"/><br/>  
        <a ng-click="submit()" class="btn btn-md btn-primary" id ="downloadlink">Download</a>
    </div>
</div>

Second, to save a file into the local system you need to use Blob which is an HTML5 feature. I've created a simple fiddle to point into the right direction.

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

myApp.controller('MyCtrl', ['$scope', function($scope) {    
    
    $scope.submit = function() {
        var textFile = null;
        var makeTextFile = function (text) {
        
            var data = new Blob([text], {type: 'text/plain'});

            // If we are replacing a previously generated file we need to
            // manually revoke the object URL to avoid memory leaks.
            if (textFile !== null) {
              window.URL.revokeObjectURL(textFile);
            }

            textFile = window.URL.createObjectURL(data);
            
            return textFile;
        };
        
        var file = document.getElementById("fileForUpload").files[0];
        if (file) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");

            reader.onload = function (evt) {
                var link = document.getElementById('downloadlink');
                link.href = makeTextFile(evt.target.result);                
                link.setAttribute('download', 'info.txt');
            }
             
        }       
    }
}]);

The javascript part can handle only txt file, but you can extend to any file type. You can find a lot of information on the net how you can do it.

Here is the fiddle: http://jsfiddle.net/HB7LU/16576/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 19, 2015 at 8:47

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

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

4 Comments

Vraj Solanki Over a year ago

I have a similar query I hosted the website at server the user can upload a file(it can me text pdf doc or image) so how can I save the uploaded file at a location in the server?? so at the server I have to save the file locally. @Simo Endre

Endre Simo Over a year ago

not really understand your question. So you want to save a file uploaded on the server?

Vraj Solanki Over a year ago

yeah so once the user uploads a file from his computer I want to save it at some location at the dev server. say in /home/uploadedfiles/ directory of the development server with the file name appended.

Endre Simo Over a year ago

You need to do this operation from the backend. The way you do this depends on the language you are using.

user1608841 · Accepted Answer · 2015-08-19 07:58:10Z

0

first create a directive to bind your uploaded files to model:

newController.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

Add following code :

<body>
    <form action="go" method="post" enctype="multipart/form-data">  
        Select File:<input type="file" name="filename" file-model="myFile"/><br/>  
        <input ng-click="submit()" class="btn btn-md btn-primary"
            type="submit" value="{{ 'UPLOAD' | translate }}" >
        </input>
    </form>  
</body>  



$scope.submit = function(){   
       var formData = new FormData();
       formData.append('file', $scope.myFile);
       $http({
                url: "yourserverurl",
                type: 'POST',
                data:  formData,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false
             });
    };

please look at this link for more reference

answered Aug 19, 2015 at 7:58

user1608841

2,4751 gold badge29 silver badges44 bronze badges

2 Comments

Endre Simo Over a year ago

OP wants to save it locally!

Sahil Bhavsar Over a year ago

But the thing is i want to save it locally.

Collectives™ on Stack Overflow

Want to upload file locally with html and angularjs

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related