valums ajax fileupload with multiple upload buttons

Question

I am using valums ajax file upload and I have some issues with having multiple upload buttons on the same page. May be I am missing something?

below is the code for 1 upload button.

    <div id="file-uploader-demo1">      
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
        <!-- or put a simple form for upload here -->
    </noscript>         
</div>


<script>        
    function uploader(){            
        var uploader1 = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            action: 'do-nothing.htm',
            debug: true
        });           
    }
    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load  
    window.onload = uploader;     

</script>

Thanks. Aanu

If I create another button its not even showing and no error message. — Aanu
– Aanu, Commented Aug 2, 2011 at 20:19
Fixed. Just passing a unique parameter to the Uploader() function fixed the issue. — Aanu
– Aanu, Commented Aug 10, 2011 at 19:06

kalbsschnitzel · Accepted Answer · 2012-07-25 07:19:44Z

Well, since nobody answered this, and I bet people will find it usefull, this is what I did:

jQuery('.btnUploader').each(function (index) {
    var uploader1 = new qq.FileUploader({

        element: jQuery('.btnUploader')[index], // The HTML element to turn into the uploader

        action: getUrl('ControllerUploadHandler', 'Home'), // Action method that will handle the upload

        multiple: false, // Single or Mutliple file selection

        allowedExtensions: ['png', 'jpeg', 'jpg', 'gif', 'bmp'], // File Type restrictions

        sizeLimit: 0, // Max File Size
        minSizeLimit: 0, // Min File Size

        debug: false, // When true outputs server response to browser console

        // Show a preview of the uploaded image
        onComplete: function (id, fileName, responseJSON) {

            //            // Get the preview container
            //            var $previewContainer = jQuery('#uploader1Preview');

            //            // Create the preview img element
            //            var $preview = jQuery('<img />');
            //            // Add the current time to the end of the preview handler's url to prevent caching by the browser
            //            $preview.attr('src', getUrl() + 'Content/handlers/previewPhoto.ashx?filename=' + fileName + '&v=' + new Date().getTime());
            //            // Hide the preview and set it's size
            //            $preview.css({ display: 'none', width: '90%', height: '200px' });

            //            // Make sure the preview's container is empty
            //            $previewContainer.html('');
            //            // Append the preview to the container
            //            $previewContainer.append($preview);

            //            // Fade in the preview
            //            $preview.fadeIn('slow');

        }
    });
});

just put it in the each, wrap a function around it, send the index, aaaand it's done.

Great work. Still, does anyone else think this is janky? The class needs to accept a selector rather than a single element and deal with it gracefully.

Collectives™ on Stack Overflow

valums ajax fileupload with multiple upload buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related