cyberfly
6/5/2017 - 2:29 AM

AngularJS File Upload

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 -->