AngluarJS and FileReader how to save the file to path

Question

Following this example on how to upload files using AngularJS I can't figure out how this actually works.

As I understand the files are just displayed right after the choose section but they are never actually uploaded to the server it's self, if is that so ? If it is how do i change the code to save the files on server on a specific path ? If it is not some explanation on how this code works.

The html Code:

<div ng-controller="MyCtrl"> <div ng-repeat="step in stepsModel"> <img class="thumb" ng-src="{{step}}" /> </div> <input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" multiple /> </div>

The JS:

var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.stepsModel = []; $scope.imageUpload = function(event){ var files = event.target.files; //FileList object for (var i = 0; i < files.length; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = $scope.imageIsLoaded; reader.readAsDataURL(file); } } $scope.imageIsLoaded = function(e){ $scope.$apply(function() { $scope.stepsModel.push(e.target.result); }); } }

Łukasz · Accepted Answer · 2018-05-24 07:45:27Z

I guess you want to upload file and pass specific path with one request to server.

To send data (here json with 'path' field) and file in one POST request add both to form data:

myApp.service('fileUpload', ['$http', function ($http) { this.uploadFileToUrl = function(file, uploadUrl){ var fd = new FormData(); fd.append('file', file); var info = { "path":"specific path" }; fd.append('data', angular.toJson(info)); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function(){ }) .error(function(){ }); } }]);

On server side it's in req.body.data, so it can be received i.e. like this:

upload(req, res, function (err) { if (err) { res.json({error_code: 1, err_desc: err}); return; } console.log(req.body.data); res.json({error_code: 0, err_desc: null}); })

This tutorial shows how to upload only file.

Hey, thank you for the response. I looked up into it now tnx to you, learned allot. However I can't understand what do you mean by the server side code ? Can you explain ?
Angular works on client side. This js code send POST request (with file and path) to server. Now server should consume this request and I wrote example how to get path from request. This example shows js server (nodejs), but of course server can be written in any language. Server side example is just addition. Maybe I should remove it from answer to question about client side (angularjs).
Ok I understand now, so maybe the reason it is not working for me now because I made my upload.php file wrong. Would be great if you could shot me how look and php version of the file so I knew where to start there, in php I can just prase the path using the url and the get method on the upload file. Thank you ! accepted answer anyway.

Collectives™ on Stack Overflow

AngluarJS and FileReader how to save the file to path

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related