Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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.');
        });
      }
    });
share|improve this question

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.