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
– Vivz

2017-08-04 11:49:18 +00:00
Commented Aug 4, 2017 at 11:49 — Vivz
– Vivz, Commented Aug 4, 2017 at 11:49
var files = new FormData(); i forgot to post.

Niranjan Godbole
– Niranjan Godbole

2017-08-04 11:49:54 +00:00
Commented Aug 4, 2017 at 11:49 — Niranjan Godbole
– Niranjan Godbole, Commented Aug 4, 2017 at 11:49
May i get some example please!

Niranjan Godbole
– Niranjan Godbole

2017-08-04 11:54:50 +00:00
Commented Aug 4, 2017 at 11:54 — Niranjan Godbole
– Niranjan Godbole, Commented Aug 4, 2017 at 11:54

Endless · Accepted Answer · 2017-08-04 12:38:48Z

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 4, 2017 at 12:38

answered Aug 4, 2017 at 12:12

Endless

38.7k14 gold badges118 silver badges138 bronze badges

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

8 Comments

Niranjan Godbole Over a year ago

Thank you for your response. I left office. I will check on Monday.

Niranjan Godbole Over a year ago

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); })

Endless Over a year ago

Still, arrMakes dosen't contains any files, only plain objects. And you can't append objects to to formData as demonstrated above.

Niranjan Godbole Over a year ago

So How can i send files? Is it possible?

Endless Over a year ago

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?

|

Collectives™ on Stack Overflow

How to send file details to back end using angularjs?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related