ng-file-upload + sending multiple file array empty to server (sails)

Question

I am trying to send multiple files to my sails server using ng-file-upload . I'm using the example of ng-file-upload's webpage, and it does not work.

Problem:

I get an empty array at the server.

Facts:

I am using chrome and it has html5 multiple file upload support.

I tested the server using postman and it worked, that being said, the problem is with the client.

I'm able to console.log the files at the client.

Here is the js code:

$scope.onFileSelect = function (files) {
         if (!($scope.updateAssetForm.OSGImages)) {
             console.log($scope.updateAsset.OSGImages.$valid);
             console.log($scope.updateAssetForm.OSGImages);
             return;
         }
        console.log($scope.updateAssetForm.OSGImages);
        var test = [];
        for (var i = 0; i < $scope.updateAssetForm.OSGImages.length; i++) {
            test.push($scope.updateAssetForm.OSGImages[i])
        }
        console.log(test);


                Upload.upload({
                    url: '/api/updateAsset',
                    data: {
                         osgFile: test,
                        'assetId': 5,
                        'loadValueType' : 4,
                    }
                })


    },

Here is the html code:

<div class = "control-group form-group col-md-12"
    ng-class = "{'has-error':updateAsset.OSGImages.$invalid && updateAsset.OSGImages.$dirty}" ng-if = "showUploadFile(4)">
      <button ngf-select="onFileSelect(updateAssetForm.OSGImages)" ng-model="updateAssetForm.OSGImages" ngf-multiple="true">
      OSG Images (optional) (max 3 MB) 
      </div>
      <p ng-repeat="image in updateAssetForm.OSGImages">
        {{image.name}}
      </p>
      <span class = "help-block has-error" ng-if="updateAsset.OSGImages.$dirty">
      </span>
    </div>

Network Tab log:

Accept:application/json, text/plain, / Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryhfBw31xYfdWDtTlU Origin:http://localhost:1337 Referer:http://localhost:1337/editproject User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

------WebKitFormBoundaryhfBw31xYfdWDtTlU Content-Disposition: form-data; name="osgFile[0]"; filename="p51d-jw-03.png" Content-Type: image/png

------WebKitFormBoundaryhfBw31xYfdWDtTlU Content-Disposition: form-data; name="osgFile[1]"; filename="p51d-jw-02.png" Content-Type: image/png

------WebKitFormBoundaryhfBw31xYfdWDtTlU Content-Disposition: form-data; name="osgFile[2]"; filename="p51d-jw-01.png" Content-Type: image/png

------WebKitFormBoundaryhfBw31xYfdWDtTlU Content-Disposition: form-data; name="assetId"

5 ------WebKitFormBoundaryhfBw31xYfdWDtTlU Content-Disposition: form-data; name="loadValueType"

4 ------WebKitFormBoundaryhfBw31xYfdWDtTlU--

What I'm doing wrong?

The documentation references $files when you make a call to your function. Have you tried passing $files instead of updateAssetForm.OSGImages into onFileSelect()? — jcc
The documentation references $files because it is using ng-model = "files". I 'm using ng-model = "updateAssetForm.OSGImages" — Sebastián Coronado Alvarado
They are being send. The network tab won't show the binary content of the file but it is there. — danial

NIJESH ku NIJESH ku · Accepted Answer · 2017-05-09T09:23:42

Add the arrayKey: ' ' field to your Upload function

    Upload.upload({
        url: '/api/updateAsset',          
        arrayKey: '',
        data: {
                osgFile: test,
                'assetId': 5,
                'loadValueType' : 4,
              },
        method: "PUT"
      })

It will make sure that the array of files are received with "fieldName" instead of "fieldName[0]"

ng-file-upload + sending multiple file array empty to server (sails)

2 Answers