upload multiple file via jquery

Question

This is my jquery code to upload multiple file. Input file generated dynamically so i am calling this FileUploader function where these input file generated. But I have to click twice to upload file. Any ideas are appreciated.

FileUploader: function($dis) {
                    var fileName = '';
                    var $htm = $($dis.parents('div.sfFormInput').find('div.cssClassUploadFiles'));
                    var $ht = $($dis.parent('div.uploader'));
                    var extension = new RegExp($ht.attr('extension'), "i");

                    var upload = new AjaxUpload($('#' + $dis.attr('id') + ''), {
                        action: Path + "UploadHandler.ashx",
                        name: "myfile[]",
                        multiple: true,
                        data: {},
                        autoSubmit: true,
                        responseType: "json",
                        onChange: function(file, ext) {
                        },
                        onSubmit: function(file, ext) {
                            if ($ht.attr('almul') == "false" && $('div.cssClassUploadFiles').children('div').length > 0) {
                                csscody.alert('<h1>Alert Message</h1><p>You can upload only one file at  a time!</p>');
                                return false;
                            }
                            if (ext != "exe" && extension != '') {enter code here
                                if (ext && extension.test(ext)) {
                                    this.setData({
                                        'MaxFileSize': $ht.attr('filesize')
                                    });
                                } else {
                                    csscody.alert('<h1>Alert Message</h1><p>Not a valid file!</p>');
                                    return false;
                                }
                            }
                        },
                        onComplete: function(file, response) {
                            var html = '';
                            var filePath = Path + "/UploadedFiles + file;
                            if (file.split('.')[1] == "jpg" || file.split('.')[1] == "JPEG" || file.split('.')[1] == "gif" || file.split('.')[1] == "bmp" || file.split('.')[1] == "png")
                                html = '<div title="' + Path + "UploadedFiles + file + '" ><img height="10%" width="10%" src="' + filePath + '"/><a class="sfDeleteFile"><img src="../Modules/FormBuilder/images/closelabel.png" /></a></div>';
                            else
                                html = '<div title="' + Path + "UploadedFiles + file + '" >' + file + '  <a class="sfDeleteFile"><img src="../Modules/FormBuilder/images/closelabel.png" /></a></div>';
                            $htm.append(html);
                        }
                    });
                }

Code works but only issue is I have to click twice to upload file.

Answer 1

The problem is not with the fileuploading part, rather looks like in the initialization part. If your file upload control is dynamically created make sure you initialize the uploader after binding that in your markup.