CODEWITHSUNDEEP
javascriptfine-uploader
Dimitri Visser
Dimitri Visser

Reputation: 156

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 ?

Upvotes: 1

Views: 3773

Answers (3)

Gidrazas
Gidrazas

Reputation: 11

Here's how I've done it. It is more code initially but makes sense. You can place as many uploaders on one page as you want.

if (self.settings.businessAddresses !== null) {
                $.each(self.settings.businessAddresses, function (index, businessAddress) {
                    initFileUploader(self.settings.privateAddresses.length + index, businessAddress, "business", self.settings.allowedExtensions);
                });
            }

Here's implementation of 'generic' file uploader initializer. Mind you it is Fine Uploader 2.1.2 i am using. It should be easier in new version i suppose. I have extensions.js to go with it to support separate parameters for each individual file too and some other improvements which probably have been addressed in new version of file uploader.

// initiate uploader
 function initFileUploader(index, addressInstance, addressType, allowedFileExtensions) {
        var filesCount = 0;
        var uploadButtonSelector = '#triggerUpload-' + addressInstance.Id;
        var fileSelectButton = ".qq-upload-button-" + addressInstance.Id;
        var uploadedFilesErrorSelector = '#uploadedFilesError-' + addressInstance.Id;
        var nextButtonSelector = "#Next";
        var previousButtonSelector = "#Previous";
        var documentTypeSelector = "#DocumentTypeCode-" + addressInstance.Id;
        var prospectCacheKeySelector = "#ProspectCacheKey";

        // Set up the upload API
        var fileUploader = new qq.FileUploader({
            element: $('#filesToUpload-' + addressInstance.Id)[0],
            action: '/FileUploader',
            autoUpload: false,
            uploadButtonText: 'Select a file',
            allowedExtensions: allowedFileExtensions,
            sizeLimit: 1048576, // 1 MB = 1024 * 1024 bytes,
            template: '<div class="qq-uploader">' + //  Allow the boostrap styles
            '<div class="qq-upload-button-' + addressInstance.Id + ' btn btn-success" style="width: 100px">{uploadButtonText}</div>' +
            '<ul class="qq-upload-list-' + addressInstance.Id + '" style="margin-top: 10px; text-align: center;"></ul>' +
            '<pre class="qq-upload-drop-area-' + addressInstance.Id + '"><span>{dragText}</span></pre>' +
            '</div>',
            failUploadText: '',
            fileTemplate: '<li>' +
            '<span class="qq-document-type-' + addressInstance.Id + '"></span>' +
            '<span class="qq-upload-file-' + addressInstance.Id + '">10870</span>' +
            '<a class="qq-upload-cancel-' + addressInstance.Id + '" href="#"> Remove</a>' +
            '<div class="qq-progress-bar-' + addressInstance.Id + '"></div>' +
            '<span class="qq-upload-spinner-' + addressInstance.Id + '" style="display: none;"></span>' +
            '<span class="qq-upload-finished-' + addressInstance.Id + '"></span>' +
            '<span class="qq-upload-size-' + addressInstance.Id + '" style="display: none;"></span>' +
            '<span class="qq-upload-failed-text-' + addressInstance.Id + '"></span>' +
            '</li>',
            classes: {
                button: 'qq-upload-button-' + addressInstance.Id + '',
                drop: 'qq-upload-drop-area-' + addressInstance.Id + '',
                dropActive: 'qq-upload-drop-area-active-' + addressInstance.Id + '',
                dropDisabled: 'qq-upload-drop-area-disabled-' + addressInstance.Id + '',
                list: 'qq-upload-list-' + addressInstance.Id + '',
                progressBar: 'qq-progress-bar-' + addressInstance.Id + '',
                file: 'qq-upload-file-' + addressInstance.Id + '',
                documentType: 'qq-document-type-' + addressInstance.Id + '',
                applicationId: 'qq-application-id-' + addressInstance.Id + '',
                addressId: 'qq-address-id-' + addressInstance.Id + '',
                addressType: 'qq-address-type-' + addressInstance.Id + '',
                spinner: 'qq-upload-spinner-' + addressInstance.Id + '',
                finished: 'qq-upload-finished-' + addressInstance.Id + '',
                size: 'qq-upload-size-' + addressInstance.Id + '',
                cancel: 'qq-upload-cancel-' + addressInstance.Id + '',
                failText: 'qq-upload-failed-text-' + addressInstance.Id + '',
                success: 'alert-success',
                fail: 'alert-error',
                successIcon: null,
                failIcon: null
            },
            onError: function (id, fileName, errorReason) {
                alert(errorReason);
            },
            onComplete: function (id, fileName, response) {
                filesCount--;
                if (response.success) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'UploadedFileIds',
                        value: response.cacheKey
                    }).appendTo('form');
                }
                // Check that we have finished downloading all files
                if (fileUploader.getInProgress() == 0) {
                    // Re-enable the Next button
                    $(nextButtonSelector).removeAttr('disabled');
                    $(previousButtonSelector).removeAttr('disabled');
                    $(uploadButtonSelector).css('visibility', 'hidden');
                }
            },
            onSubmit: function (id, fileName) {
                filesCount++;
                fileUploader._options.params[id] =
                    {
                        documentType: $("select" + documentTypeSelector)[0].value,
                        documentTypeText: $("select" + documentTypeSelector)[0].options[$("select" + documentTypeSelector)[0].selectedIndex].text,
                        addressId: addressInstance.Id,
                        addressType: addressType,
                        applicationId: addressInstance.ApplicationId,
                        prospectCacheKey: $(prospectCacheKeySelector).val()
                    };

                // $(documentTypeSelector).prop('selectedIndex', 0);

                // $(fileSelectButton).attr('disabled', 'disabled');

                // Show the upload button
                if ($(uploadButtonSelector).css('visibility') === 'hidden') {
                    $(uploadButtonSelector).css('visibility', 'visible');
                }

                // Hide the error for mandatory files upload
                $(uploadedFilesErrorSelector).css('display', 'none');
            },
            onCancel: function (id, fileName) {
                filesCount--;
                if (filesCount === 0) {
                    $(uploadButtonSelector).css('visibility', 'hidden');
                }
            }
        });

Upvotes: 1

JNo
JNo

Reputation: 395

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>

Upvotes: 2

Ray Nicholus
Ray Nicholus

Reputation: 19890

You have two globally-scoped functions with the same name. The second createUploader overwrites the first createUploader.

Upvotes: 0

Related Questions