Question

I’m trying to make a really simple file upload using jQuery, without having to download 3rd party plugin / scripts.

Here is my code:

HTML

  <form enctype="multipart/form-data" action="" method="POST" name="form">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <?php _e('Choose a file to upload') ?>: <input name="uploadedfile" class="uploadedFile" type="file" />
    <input type="submit" class="button uploadImage" value="<?php _e('Upload File') ?>" />
  </form>

PHP

<?php
  require_once($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');

  $uploaddir = WP_CONTENT_URL.'/uploads'.$_POST['current_path'];
  $uploaddir = str_replace('/','\\', $uploaddir);
  $uploadfile = $uploaddir .'\\'. basename($_FILES['uploadedfile']['name']);


  echo $uploadfile;
?>

JS

  //File upload
  jQuery('.uploadImage').live('click',function() {

    var current_path = jQuery('#currentPath span').html();
    var new_dir = jQuery(this).find('span').html();

    // Load new content in browser window
    jQuery.ajax({
        type: "POST",
        url: "../wp-content/plugins/wp-filebrowser/uploader.php",
        dataType: 'html',
        data: {current_path: current_path, new_dir: new_dir},

        success: function(data){
                 alert(data);
        },

        error: function(){
          alert('Page load failed.');
        }
    });

  });

The problem is that I can’t get info on $_FILES['uploadedfile']['name']. Is this because the form is never submitted?

Answer 1

You can’t upload files via ajax. When you do:

data: {current_path: current_path, new_dir: new_dir},

You’re just sending the location of the file, not the actual file. The only way to upload a file without a page refresh is to use flash/java/etc, or to submit a form via a hidden iFrame.

I think the jQuery form plugin handles this. Here’s another script which will do this.