Uploading multiple files with angular-file-upload

Question

I'm using angular-file-upload to upload images along with form data to my server. I've been able to do that successfully one image at a time.

My problem is that in my form I need to upload two images, using separate inputs (as well as send along other form data). My reasoning for using separate inputs is that one of my images is a thumbnail image and the other is a hero image. I need the ability to distinguish between them and insert the file paths for each into their respective columns in my database.

I read through this github issue that went through how to upload multiple files using the same input, but I wasn't able to find anything about uploading multiple files using different inputs. Maybe I'm misunderstanding them though.

Right now, if I try to select a header image, it only changes the value of the thumbnail image.

Here is my form:

 <form>
    ...(other text form inputs above)...
    <div class="form-group">
      <label class="col-sm-2 control-label"> Teaser</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'thumbnail_url'}"
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label"> Header Image</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'header_url'}"
      </div>
    </div>

</form>

And here is how I am sending the file to my server (on the onCompleteAll callback I am sending my form data to the server):

    $scope.uploader = new FileUploader({
      url: '/laravel/public/admin/events/thumbnail_url/file_upload',
      alias: 'files',
      headers: {
      // 'X-CSRF-Token': n/a
      },
      onBeforeUploadItem: function(item) {
        /* Laravel file name alias */
        item.alias = 'file';
      },
      onSuccessItem: function(fileItem, response, status, headers) {
        $scope.newEventForm[fileItem.field] = '/laravel/public/uploads/events/' + response.filename;
      },
      onCompleteAll: function() {
        /* Now ready to save form data */
       AdminEvent.save($scope.newEventForm).$promise.then(function(response) {
          $scope.events.push(response.data);
          toaster.pop('success', 'Added', 'Event added successfully.');
        });
      }
    });

Answer 1

I faced the same issue with ng-file-upload but I did not used angular-file-upload.

So may be this solution helpful for you.

In my app I have user profile image and background image.

where profile image input value I send with file option of ng-file-upload but it did not provide other option to send second file input value.

TO resolve that What I did

1. Created second file input and used that input model same as my table attribute like ng-model="user.bg_avatar" where bg_avatar is my background image attribute in rails.

Now You can get second file input value with user object(user.bg_avatar) in angular controller which we will send to rails and when rails get it save that with other user attribute. But don,t forgot to permit this attribute.