multiple instances of valums file uploader

Question

I'm trying to get multiple instances of valum file uploader working on my site. It works great with one instance but anytime I loop over initialization code, wanting multiple buttons I don't see any buttons. Here's the code:

<cfoutput query="getTopics">

<script>        
    function createUploader(){            
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader#refTopicID#'),
            action: 'components/ProjectBean.cfc',
            params: {method: 'Upload',
                    topicID: #refTopicID#,
                    count: #Evaluate("session.#refTopicAbv#Count")#,
                    topicName: '#refTopicAbv#'
                    },
            encoding: 'multipart'
        });           
    }

    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load  
    window.onload = createUploader;     
</script>

<div class="row" id="file-uploader#refTopicID#">        
</div>

Any idea how to get multiple instance? Thanks in advance!

Please don't use Evaluate()! You should be able to reference your variable like this instead: `count: #session[refTopicAbv & "Count"]#,` — duncan, Oct 07 '13 at 12:52

duncan · Accepted Answer · 2013-10-07T12:58:22.690

You're creating a javascript function inside of a loop. In other words you're defining it multiple times.

Instead you should move the createUploader function outside of your loop. And within the loop, simply call it multiple times for each of your topics.

Something like this:

<script>        
    function createUploader(elementID, topicID, topicCount, topicName){            
        var uploader = new qq.FileUploader({
            element: document.getElementById(elementID),
            action: 'components/ProjectBean.cfc',
            params: {method: 'Upload',
                    topicID: topicID,
                    count: topicCount,
                    topicName: topicName
                    },
            encoding: 'multipart'
        });           
    }   
</script>

<cfoutput query="getTopics">
<script>        
    createUploader('file-uploader#getTopics.refTopicID#', #getTopics.refTopicID#, #session[getTopics.refTopicAbv & "Count"]#, '#getTopics.refTopicAbv#');   
</script>

<div class="row" id="file-uploader#getTopics.refTopicID#"> </div>
</cfoutput>

NB: I'm assuming the values all come from your query getTopics, so I've prefixed them with the query name to scope them properly. This isn't usually essential, but it's good practice for performance reasons (among other things).

multiple instances of valums file uploader

1 Answers1