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?

The posted code works perfectly fine, and just as intended, as it's just a snippet of HTML without any javascript or context ? — adeneo
– adeneo, Commented Aug 8, 2016 at 22:43
Above code works for the first form but not for the others. I am able to select files from any one 'Add Files' button and I am also able to upload the files. But from other 'Add Files' button I am not even able to select files. — vidal
– vidal, Commented Aug 8, 2016 at 23:05
And do all these forms have their own unique ID, that the fileupload plugin has been initialized on? — adeneo
– adeneo, Commented Aug 8, 2016 at 23:11
You mean the Add files... span? Why would a <span> act like a button? What do your events look like? What is the view's el? There's not enough information here to reproduce or diagnose your problem. — mu is too short
– mu is too short, Commented Aug 8, 2016 at 23:12

Sathya · Accepted Answer · 2016-08-10 04:14:22Z

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.

answered Aug 10, 2016 at 4:14

Sathya

5,3148 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related