emory-libraries/dlp-selfdeposit

<div class="<%= fs_use %>-fileset">
    <div class="custom-file">
      <input class="custom-file-input" id="<%= fs_use %>0" type="file" />
      <label class="custom-file-label" for="customFile">Choose file</label>
    </div>
    <div class="file-name">
        <div>Name (Optional: enter a custom display name for your file)</div>
        <div><input id="<%= fs_use %>-name0" type="text" /></div>
    </div>
    <div class="">
      <div>Upload Status</div>
      <progress class="progress" id="<%= fs_use %>-progress0" max="100" value="0"></progress>
    </div>
  <div><button id="<%= fs_use %>-upload0" class="<%= fs_use %>-upload btn btn-primary">Attach File</button></div>
</div>

<% if fs_use != "primary" %>
  <div class="<%= fs_use %>-fileset-append"></div>
  <div><button class="btn btn-primary" id="<%= fs_use %>-add">+ Add Another File</button></div>
<% end %>

<script>

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

  $(document).ready(function() {  
    var count = 1;

    $("#<%= fs_use %>-add").click(function(event) {
        event.preventDefault();
        addFileUploadField();
    });

    function addFileUploadField() {
        var source = $(".<%= fs_use %>-fileset:first"),
            clone = source.clone();

        clone.find(':input').each(function() {
            var newId = this.id.replace(/\d+/g, '') + count;
            $(this).attr('id', newId).val('');
        });

        clone.find("#<%= fs_use %>-progress0").attr('id', '<%= fs_use %>-progress' + count).val(0);
        clone.find("#<%= fs_use %>-upload0").attr('id', "<%= fs_use %>-upload" + count).prop('disabled', false);
        clone.appendTo(".<%= fs_use %>-fileset-append");

        count++;
    }

    $(document).on('click', ".<%= fs_use %>-upload", function(event) {
        event.preventDefault();
        var i = this.id.match(/\d+/);
        uploadFile(i);
    });

    function uploadFile(i) {
        var formData = new FormData();
        var name = $("#<%= fs_use %>-name" + i).val();
        var file = $("#<%= fs_use %>" + i)[0].files[0];

        if (!file) {
            return;
        }

        formData.append("fileset_name", name);
        formData.append("file", file);

        switch ("<%= fs_use %>") {
          case "primary":
            formData.append("fileset_use", "<%= FileSet::PRIMARY %>");
            break;
          case "supplemental":
            formData.append("fileset_use", "<%= FileSet::SUPPLEMENTAL %>");
            break;
          case "preservation":
            formData.append("fileset_use", "<%= FileSet::PRESERVATION %>");
            break;
        }

        $.ajax({
            url: '/uploads/',
            type: 'POST',
            processData: false,
            contentType: false,
            dataType: 'json',
            data: formData,
            success: function(data) {
                handleUploadSuccess(data, i);
            },
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', function(e) {
                        updateProgress(e, i);
                    }, false);
                }
                return myXhr;
            }
        });
    }

    function handleUploadSuccess(data, i) {
        var uf = data.files[0].id;
        var wrapper = ".uploaded_files";
        $(wrapper).append("<input id='uf" + i + "' type='hidden' name='uploaded_files[]' value='" + uf + "' />");
        updateFormStatus();
    }

    function updateProgress(e, i) {
        if (e.lengthComputable) {
            $("#<%= fs_use %>-progress" + i).attr({
                value: e.loaded,
                max: e.total
            });
        }
    }

    function updateFormStatus() {
        $('li#required-files').removeClass('incomplete').addClass('complete');
        $('input#agreement').prop('checked', false);
        $('li#required-agreement').removeClass('complete').addClass('incomplete');
        $('input#with_files_submit').prop('disabled', true);
    } 
  });
</script>