4

I have followed countless examples (from here and other sites) that explain how you upload files from Angular to a web server. I am happy with the solution of using angular-file-upload and processing the data on the server (Node) with Multer.

What I haven't been able to find is a way to upload files from the form with a post that contains all the other controller data.

controller: 

$scope.files = [];
$scope.name = "";
$scope.post = //$http post to server from service

view: 

<input type="text" ng-model="name">
<input type="file">
<button ng-click="post()">Send post without page refresh</button>

Is there a way I can send the [name] and the [files] in the same post? If I send with multi part data will that be ok for [name] and [files]? Do I need to send two separate posts?

At the moment, my working example submits with a form action of 'post' and an enctype of "multipart/form-data". But I don't want the page to refresh and I want to send [name] and [files] from the scope... do I need to attach the files from the form to the scope or get the scope to pull the files from the DOM?

TogShadow
  • 43
  • 6

2 Answers2

1

You can push formData to file before upload.

$scope.uploader.onBeforeUploadItem = function(fileItem) {
    fileItem.formData.push({name: $scope.name});
};
Patryk Dobrzyński
  • 327
  • 1
  • 7
0

Please look through the demo for complete solution :)

Plunkr

<form>

<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" />
<label>Choose 1 or more files:</label>
<input type="file" ng-files="AddnewCountryFlag($files)" multiple />

<h3>Try Uploading Image file. It will preview your image.</h3>
<div ng-repeat="item in imagesrc">
  <img src="{{item.Src}}" />
  <label>{{item.Size}}kB</label>
</div>

<input type="submit" value="Send Data" ng-click="AddCountry()" />

Bimal Das
  • 1,882
  • 5
  • 28
  • 53