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

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/

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
not really understand your question. So you want to save a file uploaded on the server?
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.
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

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

Collectives™ on Stack Overflow

Want to upload file locally with html and angularjs

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related