CODEWITHSUNDEEP
jquery-file-upload
Sri
Sri

Reputation: 11

Multiple forms in one page using jQuery-File-Upload

I am trying to add multiple forms which associates different types of document but when I try to add a file from second form it shows up in primary form submission and also for process event. Please advise what could be wrong here.

<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">
  <div class="input-append" >
    <input class="filestyle" did="pdoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-1" />
  </div>
  <input id="document_doc_type" name="document[doc_type]" type="hidden" value="1" />
</form><script id="template-upload-1" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span>
    <div class="progress"><div class="bar" style="width: 0%"></div></div>
  </div>
</script>
<div id="pdoc"></div>


<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">
  <div class="input-append" >
    <input class="filestyle" did="ldoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-2" />
  </div>
  <input id="document_doc_type" name="document[doc_type]" type="hidden" value="2" />
</form><script id="template-upload-2" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span>
    <div class="progress"><div class="bar" style="width: 0%"></div></div>
  </div>
</script>
<div id="ldoc"></div>

<script type="text/javascript">
    $(function () {
      $('.documents').fileupload({
        dropZone: $(this).find('input:file'),
        dataType: 'script',
        fileInput: $(this).find('input:file'),
        singleFileUploads: true,
        add: function(e, data) {
          var file, types;
          types = /(\.|\/)(pdf|xls|xlsx)$/i;
          file = data.files[0];
          if (types.test(file.type) || types.test(file.name)) {
            uid = $(this).find(':file').attr('uid');
            if ($('#' +uid).length > 0) {
              data.context = $(tmpl(uid, file).trim());
            }
            did = $(this).find(':file').attr('did');
            $('#' + did).append(data.context);
            data.submit();
          } else {
            alert("" + file.name + " is not a pdf or an excel file.");
          }
        },
        progress: function (e, data) {
          if (data.context) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.find('.bar').css('width', progress + '%');
            if (progress < 100) {
              data.context.find('#pbar').html('Uploading ' + progress + '% ...');
            } else {
              data.context.find('#pbar').html('Upload Complete');
            }
          }
        }
      });
    $(document).bind('drop dragover', function (e) {
      e.preventDefault();
    });
  });
</script>

Upvotes: 1

Views: 976

Answers (1)

Matanza
Matanza

Reputation: 31

The variable 'this' that you use is ambiguous and might be the cause for the problem. The simplest solution would be to initiate each form separately - in a for loop over the results of $('.documents') or if you are expecting only two forms just give each of them an id doc1 and doc2 and build the fileupload for each.

Upvotes: 1

Related Questions