Note that there are some explanatory texts on larger screens.

plurals
  1. POmultiple instances of fineupload on a page
    primarykey
    data
    text
    <p>I have fineupload working with one button, but I would like to have several upload buttons on 1 page. But cannot get it to work...</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Fine Uploader - Boostrapped Minimal Demo&lt;/title&gt; &lt;link href="/fineuploader/fineuploader-3.3.0.css" rel="stylesheet"&gt; &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;style&gt; /* Fine Uploader -------------------------------------------------- */ .qq-upload-list { text-align: left; } /* For the bootstrapped demos */ li.alert-success { background-color: #DFF0D8 ; } li.alert-error { background-color: #F2DEDE ; } .alert-error .qq-upload-failed-text { display: inline; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="bootstrapped-fine-uploader-1"&gt;&lt;/div&gt; &lt;script src="/fineuploader/fineuploader-3.3.0.js"&gt;&lt;/script&gt; &lt;script&gt; function createUploader() { var uploader = new qq.FineUploader({ element: document.getElementById('bootstrapped-fine-uploader-1'), request: { endpoint: 'example.php?naam=test.jpg' }, text: { uploadButton: '&lt;div&gt;&lt;i class="icon-upload icon-white"&gt;&lt;/i&gt; Test me now and upload a file&lt;/div&gt;' }, template: '&lt;div class="qq-uploader span12"&gt;' + '&lt;pre class="qq-upload-drop-area span12"&gt;&lt;span&gt;{dragZoneText}&lt;/span&gt;&lt;/pre&gt;' + '&lt;div class="qq-upload-button btn btn-success" style="width: auto;"&gt;{uploadButtonText}&lt;/div&gt;' + '&lt;span class="qq-drop-processing"&gt;&lt;span&gt;{dropProcessingText}&lt;/span&gt;&lt;span class="qq-drop-processing-spinner"&gt;&lt;/span&gt;&lt;/span&gt;' + '&lt;ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"&gt;&lt;/ul&gt;' + '&lt;/div&gt;', classes: { success: 'alert alert-success', fail: 'alert alert-error' } }); } window.onload = createUploader; &lt;/script&gt; &lt;div id="bootstrapped-fine-uploader-2"&gt;&lt;/div&gt; &lt;script src="/fineuploader/fineuploader-3.3.0.js"&gt;&lt;/script&gt; &lt;script&gt; function createUploader() { var uploader = new qq.FineUploader({ element: document.getElementById('bootstrapped-fine-uploader-2'), request: { endpoint: 'example.php?naam=test2.jpg' }, text: { uploadButton: '&lt;div&gt;&lt;i class="icon-upload icon-white"&gt;&lt;/i&gt; Upload jpg&lt;/div&gt;' }, template: '&lt;div class="qq-uploader span12"&gt;' + '&lt;pre class="qq-upload-drop-area span12"&gt;&lt;span&gt;{dragZoneText}&lt;/span&gt;&lt;/pre&gt;' + '&lt;div class="qq-upload-button btn btn-success" style="width: auto;"&gt;{uploadButtonText}&lt;/div&gt;' + '&lt;span class="qq-drop-processing"&gt;&lt;span&gt;{dropProcessingText}&lt;/span&gt;&lt;span class="qq-drop-processing-spinner"&gt;&lt;/span&gt;&lt;/span&gt;' + '&lt;ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"&gt;&lt;/ul&gt;' + '&lt;/div&gt;', classes: { success: 'alert alert-success', fail: 'alert alert-error' } }); } window.onload = createUploader; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Only the second button is displayed, the first one completely disappears... Is there someone who can help me with this ?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload