Ng-file-upload: Sending array to Web Api

Question

Using angularjs 1.3 and C# .net core web api

I have a ng-file-upload which being used to upload file. When the upload method is called I want to pass in an extra array of some data to the upload method which is then received by the method at my web api. Here is my ng-file-upload

factory.upload = function (file, myArray) {
    var url = '{0}upload'.format(apiPath)
    return Upload.upload({
        url: url,
        arrayKey: '',
        data: { file: file, myArray: myArray}
    }).then(function (res) {

        return res;
    });
};

Below is my webapi:

  [HttpPost("upload")]
   public async Task<IActionResult> FileUpload(IFormFile file, List<string> myArray)
   {
        //code
   }

And finally here is the array which I am trying to pass along with upload to my webapi:

  [
   {
     id: "1",
     name: "steve"
   },
   {
     id: "2",
     name: "adam"
   }
  ]

The issue is in my webapi, the myArray parameter which is to accept the array from the UI is always null. I searched online and its mentioned to add

 arrayKey: ''

But still doesnt works. Any inputs?

---Updated---

I created a string array as :

var cars = ["steve", "adam", "ronnie"];

And updated my api as:

List<ArrayItem> myArray

The above code works. So looks like there is issue with array being passed. I am passing the following array by creating like this:

  var myArray= [];
  for (var i = 0; i < myJson.length; i++) {
   myArray.push({
    id: myJson[i].id,
    name: myJson[i].name,
  });                                        
 }

The result of above as seen in console:

Array(2)
0:{id: "1", name: "steve"}
1:{id: "2", name: "adam"}

Whats missing here?

I don't have a precise answer for you, but I do want to point out that your API method expects List<string>, but you're actually sending it List<object> (maybe not "object", you might need to create an Interface for this id/name object). Maybe that's why it's null? — HankScorpio
– HankScorpio, Commented Aug 29, 2018 at 20:43
@HankScorpio I have tried with the object also still does not work. What about my ng-file-upload, any changes there? — aman
– aman, Commented Aug 30, 2018 at 13:11

Edward · Accepted Answer · 2018-09-06 02:06:28Z

1

For passing object array, you need to define the list object to accept the parameters.

ArrayItem with Id/Name properties.

public class ArrayItem
{
public int Id { get; set; }
public string Name { get; set; }
}

Change action

    public async Task<IActionResult> FileUpload(IFormFile file, List<ArrayItem> myArray)
{
    return Ok();
}

Update

You need to remove arrayKey: '[]', try code below:

app.service('crudService', function ($http, Upload) {

var baseUrl = 'http://localhost:50829';

this.uploadFile = function (file, array) {

    return Upload.upload({
        url: baseUrl + "/api/books/file/upload",
        //arrayKey: '[]',
        data: { file: file, array: array },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (res) {

        return res;
    }, function (err) {

        throw err;
    });
}; 
});

edited Sep 6, 2018 at 2:06

answered Aug 30, 2018 at 3:13

Edward

30.2k12 gold badges84 silver badges141 bronze badges

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

11 Comments

aman Over a year ago

I have tried updating as above but it does not work, still null. Is there something at the angularjs fileupload that needs to be updated?

Edward Over a year ago

@user1563677 Share us the screen shot of the request from web browser network tab. Is there any reproduceable project?

aman Over a year ago

Here is the screenshot: imgur.com/a/dXMjNCs I can create a jsfiddle but how would I show/create my c# api code there?

Edward Over a year ago

@user1563677 What do you mean by updated my api as: List<string> myArray? You need to change List<string> myArray to List<ArrayItem> myArray.

aman Over a year ago

Sorry it was a typo from my side..I have already updated as you have told to use ArrayItem but it does not work. Still is null

|

Collectives™ on Stack Overflow

Ng-file-upload: Sending array to Web Api

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related