Handlebars +jQuery Multiple File Upload

Handlebars-+jQuery-Multiple-File-Upload.markdown

Handlebars +jQuery Multiple File Upload

A Pen by Dorian Karter on CodePen.

License.

index.html

<script id="file-upload-template" type="text/x-handlebars-template">
  <li class="removable_row">
      <div class="file-field">
        <label class="file required" for="{{field_id}}"><abbr title="required">*</abbr> Attachment</label>
        <input class="file required" id="{{field_id}}" name="{{field_name}}" type="file" />
      </div>
      {{#if allowRemove}}
      <i alt="Remove" title="Remove" class="fa fa-trash remove-row-link" />
      {{/if}}
  </li>
</script>

<div class="file-uploader">
</div>

<div class="file-uploader">
</div>

script.js

(function(handlebars) {
	function parse_template(id, context) {
		var source = $('#' + id).html();
  	return handlebars.compile(source)(context);
  }

 	function addFileInput($fileList, allowRemove) {
    var context = {
      field_name: 'unique_field' + new Date().getTime(),
      field_id: 'this_is_the_id' + new Date().getTime(),
      allowRemove: allowRemove
    };

    var template = parse_template('file-upload-template', context);
    $fileList.append(template);

    $('.remove-row-link').click(function(e) {
      e.preventDefault();
      $(this).parents('li').remove();
    });
  }



  $.fn.multipleFileUploader = function (settings) {
    $(this).each(function(index, el) {
      var defaults = {
        addButtonCaption: 'Add another file',
        initialRequired: true,
        initialFieldCount: 1,
        containerClass: 'mfu-file-list-container',
        addButtonClass: 'mfu-add-new',
        fileListClass: 'mfu-file-list',
        $uploaderControl: $(el)
      };
      var options = $.extend(defaults, settings);

      options.$uploaderControl.addClass(options.containerClass);

      createAddButton(options);
      createFileList(options);
      addInitialFields(options);
    });
  };

  function getFileList (options) {
    return options.$uploaderControl.find('.' + options.fileListClass);
  }
  
  function createFileList (options) {
		var $fileList = $('<ul />')
  		.addClass(options.fileListClass);
    return options.$uploaderControl.prepend($fileList);
  }

  function createAddButton (options) {
    var $addButton = $('<button></button>')
      .addClass(options.addButtonClass)
      .text(options.addButtonCaption);

    options.$uploaderControl.append($addButton);

    return $addButton.click(function() {
      addFileInput(getFileList(options), true);
    });
  }

  function addInitialFields (options) {
    for (var i = 0; i < options.initialFieldCount; i++) {
      addFileInput(getFileList(options), options.initialRequired);
    }
  }
  
  $(document).ready(function(){
    $('.file-uploader').multipleFileUploader();
  });
})(Handlebars);

style.scss

.mfu-file-list {
  list-style: none;
  width: 500px;
  
  .file-field,
  .remove-row-link,
  input[type="file"] {
    display: inline-block;
  }
  
  .remove-row-link {
    position: relative;
    top: 3px;
    cursor: pointer;
  }
  
  abbr[title="required"] {
    color: #ff0000;
  }
}