Search code examples
javascriptfine-uploader

multiple instances of fineupload on a page

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...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fine Uploader - Boostrapped Minimal Demo</title>
    <link href="/fineuploader/fineuploader-3.3.0.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>


    <div id="bootstrapped-fine-uploader-1"></div> 
    <script src="/fineuploader/fineuploader-3.3.0.js"></script>

    <script>
      function createUploader() {
        var uploader = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-1'),
          request: {
            endpoint: 'example.php?naam=test.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploader;
    </script>





    <div id="bootstrapped-fine-uploader-2"></div>
    <script src="/fineuploader/fineuploader-3.3.0.js"></script>

    <script>
      function createUploader() {
        var uploader = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-2'),
          request: {
            endpoint: 'example.php?naam=test2.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + 
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploader;
    </script>




  </body>
</html>

Only the second button is displayed, the first one completely disappears... Is there someone who can help me with this ?

Solution

  • You're assigning the window.onload event the first function, then replacing it with the second one. You should assign the event only once. Also, you don't need two separate script tags.

      <body>

    <div id="bootstrapped-fine-uploader-1"></div> 
    <div id="bootstrapped-fine-uploader-2"></div>

    <script src="fineuploader-3.3.0.js"></script>

    <script>
      function createUploaders() {
        var uploader1 = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-1'),
          request: {
            endpoint: 'example.php?naam=test.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });

        var uploader2 = new qq.FineUploader({
          element: document.getElementById('bootstrapped-fine-uploader-2'),
          request: {
            endpoint: 'example.php?naam=test2.jpg'
          },
          text: {
            uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
          },
          template: '<div class="qq-uploader span12">' +
                      '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                      '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                      '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + 
                      '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
          classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error'
          }
        });
      }

      window.onload = createUploaders();
    </script>

  </body>