ng-file-upload send array into database - angularjs

Question

i want to upload array of data that i have by using ng-file-upload, but if i repeat it, my database only got last image, can anyone know what's wrong with my code?
Here is my code
$scope.send = function () {
console.log("aaa " + $scope.file);
console.log("files total: " + $scope.portfolio_images_array.length);
if ($scope.file && $scope.file1 && $scope.portfolio_images_array.length > 0) {
Upload.upload({
url: 'upload_url',
data: {
user_id: 7,
profile_photo: $scope.file,
id_card_photo: $scope.file1,
name: $scope.name,
introduction: $scope.introduction,
portfolio_image: $scope.portfolio_images_array
}
}).then(function (resp) {
console.log('Success ');
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ');
});
}
};
portfolio_image should get all the images, but now it only get the last image from portfolio_images_array.
For adding the data to portolio_image_array, i use this code:
$scope.addFiles = function (file) {
console.log(file);
$scope.portfolio_images_array.push(file);
}
Please help me with this, Thanks

Answer 1

i found an answer, we just need to add arrayKey, here is the code
$scope.send = function () {
if ($scope.file && $scope.file1 && $scope.portfolio_images_array.length > 0) {
Upload.upload({
url: 'uploadURL',
arrayKey: '',
data: {
user_id: 7,
profile_photo: $scope.file,
id_card_photo: $scope.file1,
name: $scope.name,
introduction: $scope.introduction,
portfolio_image: $scope.portfolio_images_array
}
}).then(function (resp) {
console.log('Success ');
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ');
});
}
};

Answer 2

Upload.upload is in fact a http request.
What you are doing is looping through all your array and make a http request for each file.
This is already really bad, and you should send the array directly with a syntax like this :
Upload.upload({
url: storageService.Address_of_your_server + '/your/route',
file: file,
arrayKey: '',
data: data,
}).success(function (resp) {
cbfun(resp);
});
}
Where file is your array of files and data your json of data you want to send in the same time.
The fact you are receiving only the last image is a bit weird.
Two ideas comes to my mind :
Upload service stop the request if he is called another time while the request is not finished.
As you are looping in a synchronous way while using asynchronous functions into your loop. Consequently, the javascript excecutes very quickly the loop and the i is incremented before even sending the requests.
But I don't really think this is the second possibility, as this case should only happen if you use the i variable in the callback of your promise (then).
EDIT :
Why you need to use ArrayKey :
This is to accommodate server implementations expecting array data object keys in '[i]' or '[]' or ''(multiple entries with same key) format.
So if you are not using it, the server part won't understand the format of the request.
According to the official doc.
Also, if you are using NodeJS, it is almost sure you are using the multer middleware in the back-end.
Consequently, you should have a route like this in the back :
router.post('/your/route', upload.array('file'), function(req, res){
//Your files are in this variable
var files = req.files
}