Uploadify Multiple buttons - one page

Manolis picture Manolis · Jan 24, 2012 · Viewed 8.1k times · Source

I am creating a website for a client, and he wants to be able to have in one page, many upload buttons. When he clicks select files, uploadify uploads the file to the server and then changes the value of the input field "Image" to the path of the image.

The problem is that i cannot find a way to have multiple upload buttons in one page, where each one individually will fill it's own div's "Image" field. And the client will have n number of divs in the same page.

enter image description here

Here's my js code:

$(document).ready(function() {
  $('.file_upload').uploadify({
    'uploader'  : 'content/plugins/category_manager/upload/js/uploadify.swf',
    'script'    : 'content/plugins/category_manager/upload/upload.php',
    'cancelImg' : 'content/plugins/category_manager/upload/js/cancel.png',
    'folder'    : 'content/plugins/category_manager/upload/uploads',
    'fileExt'       : '*.jpg;*.gif;*.png',
    'fileDesc'      : 'Image Files',
    'auto'      : true,
    'onComplete'  : function(event, ID, fileObj, response, data) {
        $("input[name=image]").empty(this).val(fileObj.name);
        }
  });
});

Answer

Havanasud picture Havanasud · Jun 29, 2012

This code:

jQuery(".file_upload").each(function() {
   jQuery(this).uploadify({
      height        : 30,
      swf           : '/uploadify/uploadify.swf',
      uploader      : '/script/uploadify/uploadify.php',
      width         : 120
   });
});

works very fine.

This also requires that the ids in the .file_upload elements are unique, even if they are not used.