I'm using jQuery Form Plugin ( http://jquery.malsup.com/form/#file-upload) but not being very successfull in uploading files. The upload part of the plugin is porly documented and have to few examples.

I have a jQuery UI Dialog box containing the Upload form.

Here I want to upload a form without page reload (using of IFrame instead).

Can someone pelase suggest some code that will allow me to upload files?

Here is my code (in the UI DIalog box) :

HTML

1. <fieldset class="fieldSetUploadfile">
   <legend><?php _e('Upload image'); ?></legend>
   
   <form id="uploadForm" enctype="multipart/form-data" action="" method="POST">
   <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
   <input type="hidden" id="current_path" name="current_path" value="" />
   <?php _e('Choose a file to upload') ?>: <input type="file" id="uploadFile" name="uploadFile" />
   <input type="button" class="button uploadImage" value="<?php _e('Upload File') ?>" /> <br />
   <label for="uploadFile" class="helperText"><?php _e('Files allowed'); echo ': jpg, png. '; _e('Max file size '); echo $max_size; ?></label>
   <div class="uploadOutputContainer">
   <div id="uploadOutput"></div>
   </div>
   </form>
   </fieldset>
   
   
   
   
   
   
   
   
   
   
   
   
   
   

And here is my jQuery / Javascript:

1. jQuery('#uploadForm').ajaxForm({
   url: '../wp-content/plugins/wp-filebrowser/uploader.php',
   datatype: 'json',
   beforeSubmit: function() { alert('before');},
   success: function(html) { alert('success + ' + html);},
   target: 'uploadOutput'
   });
   
   
   
   
   
   
   

I've attached the Wodpress Plugin for where I try to get upload working. The files to look at is:

- filebrowser.php

- wp-filebrowser.js

Any help is greatly appreciated.