Hi there,

I'm a newbie when it comes to writing plugins, but I like to learn .

I got the following wish. I want to write a plugin that turns a "div" with an id to a uploadform for an image file. By setting options I want to pass values for height/size/extension etc.

I want to be able to use the plugin more then once on a page. for uploading a photo and for uploading an Avatar.

I made this, but this only works for the last called div. This means that both divs are generated good, but the submit event only triggers the second upoadform and the plugin wont work. It works fine when I only have 1 instance on the page. When I click the submit button I only want to submit the form from wich the button is.

Anyone got an idea?

Tnx in advance

ps, I know it's not beautifull code, but as said, I'm a newbdie

I create the form with this:

JQUERY
  

   
$('#uploadPhoto').ws_uploadForm();
  

HTML:

1. <div id="uploadPhoto"></div>

    

     
(function($){
     
    $.fn.extend({
     
        ws_uploadForm: function(options) {
     
            var defaults = {
     
                imagePath:      "images/",
     
                formAction:     "upload.php",
     
                uploadPath:     "uploadedImages/",
     
                defaultImage:   "unknown.png",
     
                imageMess:      "250,250",
     
                previewHeight:  "100",
     
                imageSize:      "1",
     
                extensions:     "jpg|jpeg|png|gif"
     
            }
     
            var options =  $.extend(defaults, options);
     
            return this.each(function() {
     
                //-------------------------------------------------
     
                // The vars that are used in this plugin
     
                //-------------------------------------------------
     
                //---- The options that are set
     
                var o = options;
     
                //---- The upload errors
     
                var uploadError =       new Array;
     
                uploadError[1]  =       'Bestand is niet geupload';                                                     // file is not uploaded
     
                uploadError[2]  =       'Dit is geen afbeeldingsbestand';                                       // No image file
     
                uploadError[4]  =       'Error tijdens het verplaatsen van het bestand';        // Error during move upload file
     
                uploadError[5]  =       'Bestand bestaat reeds';                                                        // File allready exsits
     
                uploadError[6]  =       'Error tijdens het resizen van een jpg bestand';        // Error resizing jpg
     
                uploadError[7]  =       'Error tijdens het resizen van een gif bestand';        // Error resizing gif
     
                uploadError[8]  =       'Error tijdens het resizen van een png bestand';        // Error resizing png
     
                uploadError[9]  =       'Error tijdens het creeeren van een jpg bestand';       // Imagecreate error for jpg
     
                //---- error[10]=   Resized, not realy an error but a succes :)
     
                uploadError[11] =       'Error tijdens het creeeren van een gif bestand';       // Imagecreate error for gif
     
                uploadError[12] =       'Error tijdens het creeeren van een png bestand';       // Imagecreate error for png
     
                uploadError[13] =       'Bestandstype niet toegestaan';                                         // Filetype not allowed
     
                uploadError[14] =       'Bestand is te groot';                                                          // Filetype not allowed                         
     
                //---- Defining the object
     
                obj             =       $(this);                                
     
                //---- Defining the ID that has been set
     
                uploadFormID    =       obj.attr('id')+'_';
     
                //---- When this form is used with ph
     
                //----- Then the photo needs to come out of the DB and is in the "rel"-attribute
     
                if(obj.attr('rel')==undefined){
     
                    var showImage   =   o.imagePath+o.defaultImage;
     
                }else{
     
                    var showImage   =   obj.attr('rel');
     
                }
     
                //---- The form with buttons
     
                var form    =   "\
     
                <form action='"+o.formAction+"' method='post' enctype='multipart/form-data' target='upload_target' id='"+uploadFormID+"submitfile'>\
     
                    <img id='"+uploadFormID+"uploadImage' class='uploadImage' src='"+showImage+"' height='"+o.previewHeight+"px'/>\
     
                    <img id='"+uploadFormID+"process' src='"+o.imagePath+"ajax-loader3.gif' />\
     
                    <br /><br />\
     
                    <input name='file' type='file' id='"+uploadFormID+"fileLocation' />\
     
                    <input type='hidden' name='uploadPath' value='"+o.uploadPath+"' />\
     
                    <input type='hidden' name='imageMess' value='"+o.imageMess+"' />\
     
                    <input type='hidden' name='imageSize' value='"+o.imageSize+"' />\
     
                    <input type='hidden' id='defaultImage' value='"+o.imagePath+o.defaultImage+"' />\
     
                    <input type='submit' name='submitBtn' value='Upload' />\
     
                    <br /><br />\
     
                    <+o.extensions.replace(/\|/g,", ")+"</p>\
     
                    <+parseFloat(o.imageSize)+" MB</p>\
     
                    <br />\
     
                    <+uploadFormID+"result' class='error'></p>\
     
                </form>\
     
                <iframe id='"+uploadFormID+"upload_target' name='upload_target' style='width:0;height:0;border:0px solid #fff;'>\
     
                </iframe>";
     
                //---- What to do when the upload file gives response
     
                stopUpload  =   function (response, filename){
     
                    //---- If fileupload went good, insert image
     
                    if (response == 3 || response == 10){
     
                        $('#'+uploadFormID+'uploadImage').attr("src",filename);
     
                        $('#'+uploadFormID+'process').hide();
     
                        $('#'+uploadFormID+'fileLocation').val('');
     
                        return false;
     
                    } else {
     
                        $('#'+uploadFormID+'process').hide();
     
                        $('#'+uploadFormID+'result').html(uploadError[response]).show();
     
                    }
     
                    return true;
     
                }               
     
                //---- Insert the form
     
                obj.html(form);
     
                //---- Hide the processing-image
     
                $('#'+uploadFormID+'process').hide();               
     
                //---- Submit the form              
     
                $("#"+uploadFormID+"submitfile", obj).submit(function(){
     
                        $('#'+uploadFormID+'process',obj).show();
     
                        $('#'+uploadFormID+'result',obj).html('').hide();
     
                });
     
                //---- Do live check on extension, this is also checked extra in php
     
                $("#"+uploadFormID+"fileLocation", form).change(function(){
     
                    var fileLocation    =       $("#"+uploadFormID+"fileLocation").val().toLowerCase();
     
                    var ext             =       o.extensions;
     
                    var filter          =       new RegExp("."+ext);
     
                    if(!fileLocation.match(filter)){ 
     
                        $('#'+uploadFormID+'result').html(uploadError[13]).show();
     
                        $('#'+uploadFormID+'fileLocation').val('');
     
                    }
     
                });
     
            });
     
        }
     
    });     
     
})(jQuery);