How to send file details to back end using angularjs?

Question

Hi I am developing web application in angularjs. I am developing file upload module. I have below array with file details.

//below code to get array of files

$scope.showPicker=function()
            {
                var client = filestack.init('AGeDIRvVZTRWgtmFbfGuZz');
                client.pick({
                }).then(function (result) {
                    arrMakes.push(result.filesUploaded);
                });
            }

In the above image i shown my array. I have three files. Below is my angular code to send details to api.

var files = new FormData();

angular.forEach(arrMakes, function (value, index) {
  console.log(value,index);
  files.append(index, value);
  files.append('data', angular.toJson(index).replace(/['"]+/g, ''));
});

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

The problem is i am not receiving file in server side. Below line gives me 0 files in server.

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

May i know am i sending correct data to server? Can someone help me to fix this? Any help would be greatly appreciated. Thank you.

Where is your form data declaration? – Vivz Aug 04 '17 at 11:49 — Vivz, Aug 04 '17 at 11:49
var files = new FormData(); i forgot to post. – Niranjan Godbole Aug 04 '17 at 11:49 — Niranjan Godbole, Aug 04 '17 at 11:49
May i get some example please! – Niranjan Godbole Aug 04 '17 at 11:54 — Niranjan Godbole, Aug 04 '17 at 11:54

Endless · Answer 1 · 2017-08-04T12:38:48.930

2

You are not uploading any files to the server, only strings.

You can't append objects to a FormData. appart from Blob & File objects
See what will happen:

fd = new FormData
fd.append(2, {foo: 'bar'})
fd.append('data', 5)
new Response(fd).text().then(console.log)
// you get [object Object]

Why do you stringify the index in "data"? It will be casted to string automatically. And what is there that you have to replace?

If i where you i would just simple send the hole arrMakes to the server and download all the files from the url on the backend, otherwise the client has to download and then upload them to the server and wasting bandwidth and time.

beside, you don't need angulars forEach loop, arrays has that method built in

arrMakes.forEach(function (value, index) {
  ...
})

You won't even have to use any loop if you just pass the arrMarks to the server

edited Aug 04 '17 at 12:38

answered Aug 04 '17 at 12:12

Endless

34,080
13
108
131

Thank you for your response. I left office. I will check on Monday. – Niranjan Godbole Aug 04 '17 at 12:17
Thank you for your work. Still i am not getting files in server. I have added arrMakes.forEach(function (value, index) { files.append(index, value); files.append('data',index); }) – Niranjan Godbole Aug 07 '17 at 09:29
Still, `arrMakes` dosen't contains any files, only plain objects. And you can't append objects to to formData as demonstrated above. – Endless Aug 07 '17 at 09:47
So How can i send files? Is it possible? – Niranjan Godbole Aug 07 '17 at 09:48
How about just doing: `$http.post(this.uploadUrl, arrMakes)` and then on the server parse the response as json and then download each file from every `url` in the array? – Endless Aug 07 '17 at 09:55
Why not? have you tried [logging](https://stackoverflow.com/a/6678026/1008999)? the request body to see what you get out? – Endless Aug 07 '17 at 11:02
If you had mention you used [filestack](https://filestack.com) then i would have point you to theres [documentation](https://filestack.com/docs/rest-api/retrieve) of how to retrieve a file... – Endless Aug 07 '17 at 11:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151265/discussion-between-niranjan-godbole-and-endless). – Niranjan Godbole Aug 07 '17 at 11:20

How to send file details to back end using angularjs?

1 Answers1