Question

After testing AjaxFileUpload Plugin I discovered that it does not let me retrieve $_POST data, as the plugin only submits $_FILE data. Therefore I turn to jQuery Form Plugin which is documented here: http://www.malsup.com/jquery/form/#file-upload

Unfortunately, I feel the example is poor and doesn’t really help me. I need to use IFrame in order to prevent the page to reload.

Does anyone have some working code og link to god tutorials using jQuery Form plugin for uploading files using IFrame?

I know there are other file upload plugins, but I would like to use this one for this project.

UPDATE
This is the code I currently use. All it does is relaod the page and I get no output / alerts.

HTML

<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 echo $fb->relative_url; ?>" />
    <input id="uploadFile" name="uploadFile" type="file" />
    <input type="submit" class="button uploadImage" value="<?php _e('Upload File') ?>" /> <br /> 
</form>

Javascript

var options = {
    beforeSubmit:   function() { alert('before');},
    success:        function(html) { alert('success + ' + html);},
    data:           {current_path: jQuery('#currentPath span').html()},
    url:            '../wp-content/plugins/wp-filebrowser/uploader.php',
    iframe:         true,
    dataType:       'html'
};

jQuery('#uploadForm').submit(function() {
    jQuery(this).ajaxSubmit(options);
    return false;
});

I also tried this JS

jQuery('#uploadForm').ajaxForm({
    beforeSubmit:   function() { alert('before');},
    success:        function(html) { alert('success + ' + html);},
    data:           {current_path: jQuery('#currentPath span').html()},
    url:            '../wp-content/plugins/wp-filebrowser/uploader.php',
    dataType:       'html'
});

But still my page only reloads and no alerts are fired 🙁

DEBUG

Running the following script in my JS file: alert(jQuery('#uploadForm').ajaxForm); gave me this output:

function (options) {
    if (this.length === 0) {
        var o = {s: this.selector, c: this.context};
        if (!jQuery.isReady && o.s) {
            log("DOM not ready, queuing ajaxForm");
            jQuery(function () {jQuery(o.s, o.c).ajaxForm(options);});
            return this;
        }
        log("terminating; zero elements found by selector" + (jQuery.isReady ? "" : " (DOM not ready)"));
        return this;
    }
    return this.ajaxFormUnbind().bind("submit.form-plugin", function (e) {if (!e.isDefaultPrevented()) {e.preventDefault();
jQuery(this).ajaxSubmit(options);}}).bind("click.form-plugin", function (e) {var target = e.target;
var jQueryel = jQuery(target);
if (!jQueryel.is(":submit,input:image")) {var t = jQueryel.closest(":submit");
if (t.length == 0) {return;}target = t[0];}var form = this;
form.clk = target;
if (target.type == "image") {if (e.offsetX != undefined) {form.clk_x = e.offsetX;
form.clk_y = e.offsetY;} else if (typeof jQuery.fn.offset == "function") {var offset = jQueryel.offset();
form.clk_x = e.pageX - offset.left;
form.clk_y = e.pageY - offset.top;} else {form.clk_x = e.pageX - target.offsetLeft;form.clk_y = e.pageY - target.offsetTop;}}setTimeout(function () {form.clk = form.clk_x = form.clk_y = null;}, 100);});
}

From the debugging, it looks like the form is not finished loading when I run this script. That’s weird, because I have it inside jQuery(document).ready().

Answer 1

I ended up using Uploadify.

To get this code working, I use the following script:

  /*  Brand logo uploadify
  -----------------------------------------------------------------------------*/    
  function uploadifyBrandLogo()
  {

          //Get brand ID because loading uploadify.php triggers a new session
          var brand_id = jQuery('#brand_id').val();

          jQuery("#brand_btnBrowseLogo").uploadify({
            'uploader'       : siteURL + '/wp-content/plugins/uploadify/uploadify.swf',
            'script'         : siteURL + '/wp-content/plugins/uploadify/uploadify.php',
            'fileExt'        : '*.jpg;*.jpeg;*.png',
            'auto'           : true,
            'multi'          : false,
            'method'         : 'POST',
            'height'         : '29',
            'width'          : '136',
            'buttonImg'      : siteURL + '/wp-content/themes/storelocator/img/buttons/img_upload_grey_bg.png',
            'cancelImg'      : siteURL + '/wp-content/plugins/uploadify/cancel.png', 
            'scriptData'     : {'var1':'data1','var2':data2},
            'onComplete'     : function(event, queueID, fileObj, response, data) { 
               // Do stuff here
               }

              // Show upload feedback
              showFeedback(result.feedback);                    
            }
          });
  }