Add files button not working if more than one (jquery File Upload Plugin)

Question

I am using jquery file-upload plugin in backbone js. I have more than one add-files button on a same page. Each button comes form their respective backbone views.

**View**
render: ->
  $(@el).html(@template(model: @model.attributes ))
  @

**Template**
<form id="fileupload" class="fileupload" action="some_action" method="POST" enctype="multipart/form-data">

  <span class="btn btn-xs btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input type="file" class="select_file" name="files" multiple>
  </span>

  <button type="submit" class="btn btn-xs btn-primary start">
     <i class="glyphicon glyphicon-upload"></i>
     <span>Start upload</span>
  </button>

</form>

The Add files button works for any one form but not for the others

What can be the reason and how to solve it?

Answer 1

Try this jsFiddle.

My guess is, you might have initialized fileupload like below in your code.

$("#fileupload").fileupload(....)

If you have done like that it should be the issue. You should initialize fileupload on each form.

Note: I found this jsFiddle on google search and edited it for your requirement.