jQuery File Upload - Multiple Forms on Same Page

Question

I'm trying to implement multiple jQuery File Upload forms to a page, but the documentation is unclear.

I've already tried many suggestions and hacks from StackOverflow and Google, but a lot are old (6+ years) and don't appear to be relevant to the current version. Here are some threads I've looked through:

Repeats Documentation

Multiple File Upload Widgets on the same page - main.js

Not answered, for a different version, or very old (or a combination of the three)

Two jQuery File Upload widgets on the same page

jQuery File Upload - Multiple File Upload Widgets on the same page

Multiple jQuery File Upload widgets on the same page

blueimp jQuery File Upload Multiple Instance

The documentation is here, which appears to be outdated

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

In main.js it suggests replacing:

$('#fileupload').fileupload();

With:

    $('.fileupload').each(function () {
        $(this).fileupload({
            dropZone: $(this)
        });
    });

And modifying the form to change:

id="fileupload"

to:

class="fileupload"

But if you look at the current main.js file the line it suggests replacing is not present: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js

Here's my current (none working) code:

Form:

    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data">

main.js:

$('.fileupload').each(function () {
  $(this).fileupload({
      dropZone: $(this)
  })
});
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '/upload.cgi'
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

I've replaced combinations of lines 14, 18 and 25 and tried as many ways as I can think of, but it either doesn't work, or doesn't work and produces errors, usually either TypeError: document.getElementById(...) is null or [object Object] not found.

I'm no expert in Javascript or jQuery which is why I tried to use this plugin in the first place. Could somebody please explain how main.js should actually look to handle multiple forms, because either the documentation is out of date (2012) or my understanding of them is flawed. Thank you.

I'm trying to implement multiple jQuery File Upload forms to a page, but the documentation is unclear. The documentation suggests replacing ```$('#fileupload').fileupload();``` in **main.js** but ```$('#fileupload').fileupload();``` does not appear in **main.js**. That is the problem - I don't know where the snippet of code should go to turn on the multiple form ability of jQuery File Upload. — ITWarror, Feb 17 '19 at 05:17
Is using jQuery File Upload plugin a required to achieve expected result? — guest271314, Feb 17 '19 at 05:18
No, but multiple file upload is, and it seemed like a lot of the hard work was done already with jQuery File Upload, including the ability to see progress and later delete files. So I think it would be nice to keep... if it worked... — ITWarror, Feb 17 '19 at 05:19
jQuery is not necessary to achieve expected result [Create multiple input type=“file” elements with their corresponding value (FileList) according to the main input type=“file” (multiple) element](https://stackoverflow.com/questions/48257041/); [How to upload and list directories at firefox and chrome/chromium using change and drop events](https://stackoverflow.com/q/39664662/). To associate a `` element with each `File` and, or, `FileList` object you can adjust the code at [Upload multiple image using AJAX, PHP and jQuery](https://stackoverflow.com/questions/28856729/) — guest271314, Feb 17 '19 at 05:21
Thanks for the help and that is something that I'd consider, however I'm 90% complete with jQuery File Upload and the only remaining piece to complete is the multiple form function. It would be a shame to have to throw it all away for what is likely just a couple of misplaced lines. The documentation suggests it's as simple as replacing a line with a couple of other lines, but I'm not familiar enough with Javascript/jQuery to determine why the instructions are invalid. — ITWarror, Feb 17 '19 at 05:31

sn3p · Answer 1 · 2019-02-17T21:25:31.403

Your javascript is a bit messy, and I'm not entirely sure what you are trying to accomplish ;) But if you're stuck trying to initialize the filesupload plugin for multiple forms, then I guess this is what you're looking for:

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});

.fileupload {
  border: 5px dashed red;
  display: inline-block;
  width: 50px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>

<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

EDIT:

My confusion stems from where I need to apply this code to enable multiple forms.

I would recommend including your javascript at the end of your page if possible, within the body tag. First the dependancies (jquery, jquery-ui and fileupload) and then your own script(s) (main.js in this case). This is where your multi-form fileupload should be implemented. I hope the example below helps you to get the idea:

page.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});

Thanks for the reply. The issue is that the documentation says that's required, yet it does not explain where the code should go. Could you please explain which part of **main.js** your top snippet should replace, as there is no ```$('#fileupload').fileupload();``` as the documentation suggests. — ITWarror, Feb 17 '19 at 05:16
I did some digging and found the original line that the documentation references. This explains why the documentation is wrong at least. But I'm still not clear on how to create multiple forms with the new code: https://github.com/blueimp/jQuery-File-Upload/blob/1d1c1a2ecb739789ee44c0df64f2c71a0e30585a/js/main.js#L19 — ITWarror, Feb 17 '19 at 06:27
Think I get your confusion. [main.js](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js) contains just examples, you don't need it. You only need the code to initialize the plugin and the dependancies (see my example). — sn3p, Feb 17 '19 at 09:34
But your example just includes code that I already provided in my question. My confusion stems from **where** I need to apply this code to enable multiple forms. Also when I delete main.js, the form breaks completely. It seems to be required. — ITWarror, Feb 17 '19 at 10:17
Ok, I assumed you already figured out **where** to apply your code (since you provided errors), but just wasn't sure how to implement. Added an example of an html page, where the scripts are places at the bottom (within the body). Hope this makes sense :) — sn3p, Feb 17 '19 at 21:08

jQuery File Upload - Multiple Forms on Same Page

1 Answers1