AngularJS File Upload
function createDiscussion (data) {
return $resource(DiscussionBaseURI + '/create', null, {
'post': {
method: 'POST',
params: data,
headers: {
'Content-Type': undefined
},
transformRequest: angular.identity
}
})
.post(data)
.$promise
.then(successCallback);
function successCallback(response) {
return response;
}
}
var formData = new FormData();
formData.append('subject', $scope.formData.subject);
formData.append('description', $scope.formData.description);
formData.append('evaluation_id', evaluation_id);
formData.append('to_user_ids[]', to_user_ids_array);
formData.append('user_id', $scope.user.id);
if (typeof $scope.files != 'undefined') {
formData.append('file_attachment', $scope.files[0]);
};
// upload multiple files to form data.
// for (var i = 0; i < $scope.files.length; i++) {
// console.log('ada kat sini la');
// console.log($scope.files);
// formData.append('file_attachment' + i, $scope.files[i]);
// }
// Display the key/value pairs
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
// return false;
discussionService
.createDiscussion(formData)
.finally(finallyCallback);
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" ng-click="cancel()" class="close" type="button">×</button>
<h4 class="modal-title">Start Discussion</h4>
</div>
<form role="form" class="form-horizontal" name="createDiscussionForm" ng-submit="submitForm(createDiscussionForm.$valid)" novalidate>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error' : createDiscussionForm.user.$invalid && submitted }">
<label class="col-lg-3 control-label">To <span class="required_label">*</span></label>
<div class="col-lg-9">
<div class="input-group">
<ui-select allow-clear name="user" ng-model="selected.value" ng-required="true" theme="bootstrap" >
<ui-select-match placeholder="Search User" >
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="user in (users | filter: $select.search) track by user.id">
<span ng-bind="user.name"></span>
</ui-select-choices>
</ui-select>
<span class="input-group-btn">
<button type="button" ng-click="selected.value = undefined" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
<p ng-show="createDiscussionForm.user.$error.required && submitted" class="help-block">To is required.</p>
</div>
</div>
<div class="form-group hide">
<label class="col-lg-3 control-label">Cc / Bcc</label>
<div class="col-lg-9">
<input type="text" placeholder="" id="cc" class="form-control" ng-model="formData.participants">
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createDiscussionForm.evaluation.$invalid && submitted }" >
<label class="col-lg-3 control-label">Evaluation <span class="required_label">*</span></label>
<div class="col-lg-9">
<div class="input-group">
<ui-select allow-clear name="evaluation" ng-model="selected_evaluation.value" ng-required="true" theme="bootstrap" >
<ui-select-match placeholder="Search Evaluation" >
<span ng-bind="$select.selected.evaluation_title"></span>
</ui-select-match>
<ui-select-choices group-by="'origin'" repeat="evaluation in (evaluations | filter: $select.search) track by evaluation.evaluation_id">
<span ng-bind="evaluation.evaluation_title"></span>
</ui-select-choices>
</ui-select>
<span class="input-group-btn">
<button type="button" ng-click="selected_evaluation.value = undefined" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
<p ng-show="createDiscussionForm.evaluation.$error.required && submitted" class="help-block">Evaluation is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createDiscussionForm.subject.$invalid && submitted }" >
<label class="col-lg-3 control-label">Subject <span class="required_label">*</span></label>
<div class="col-lg-9">
<input type="text" placeholder="" id="inputPassword1" class="form-control" ng-model="formData.subject" name="subject" required >
<p ng-show="createDiscussionForm.subject.$error.required && submitted" class="help-block">Subject is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createDiscussionForm.description.$invalid && submitted }" >
<label class="col-lg-3 control-label">Message <span class="required_label">*</span></label>
<div class="col-lg-9">
<textarea rows="10" cols="30" class="form-control" ng-model="formData.description" id="" name="description" required ></textarea>
<p ng-show="createDiscussionForm.description.$error.required && submitted" class="help-block">Description is required.</p>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-lg-3">
<span class="btn green fileinput-button">
<i class="fa fa-plus fa fa-white"></i>
<span>Attachment</span>
<input type="file" my-files="files" >
</span>
<br>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-lg-6">
<code>
Name: {{files[0].name}}<br>
Size: {{files[0].size}}<br>
Type: {{files[0].type}}<br>
</code>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn btn-primary pull-right" >Submit</button>
</div>
</form>
</div><!-- /.modal-content -->