Question: How to make each upload open a modal?


#1

When a user drops an upload a modal appears and everything works as expected, but if he/she drops multiple files it breaks and I get a black screen. How can I problematically solve this? Do I listen to the save button action before continue? Guidance would be very appreciated.

'dropped .dropzone': function(event, temp) {
  console.log('files dropped');
  var documentId = this._id;
  var subcategory = this.name;
  FS.Utility.eachFile(event, function(file) {
      $('#modal1').openModal();
    var theFile = new FS.File(file);
    theFile.metadata = {
        name: theFile.name(),
        creatorId : Meteor.userId(),
        archived: false,
        createdAt: new Date(),
        listId: documentId,
        order: Uploads.find().count() + 1,
        category:["Add a Category"],
        subcategory: [subcategory],
        description: "Add description"
    };
    Uploads.insert(theFile, function (err, fileObj) {
      Materialize.toast(fileObj.name() + " was successfully saved!", 8000);

    });
  });
},

uploads.html

<div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
{{#each edituploads}}
    <form>
        <input type="text" value="{{metadata.name}}" name="name">
        <input type="text" value="{{metadata.category}}" name="category">
        <input type="text" value="{{metadata.subcategory}}" name="subcategory">
        <input type="text" value="{{metadata.description}}" name="description">
      </form>
      {{/each}}
    </div>
    <div class="modal-footer">
      <a href="#!" name="save" class="modal-action modal-close waves-effect waves-green btn-flat">Save</a>
    </div>
  </div>

#2

Solution was simple.
replaced code above with this.

uploads.js

var modal = Uploads.count().fetch() +1;
$('#modal'+ modal).openModal();

uploads.html

id="modal{{modal}}"