File upload using jquery not working

Question

Hi.

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

Make sure to specify proper settings for:

• file_uploads
• upload_max_filesize
• memory_limit
• max_execution_time
• post_max_size

See:

• How to optimize your PHP installation to handle large file uploads

Also make sure that:

• Specifying the correct path
• Directories have permission, chmod to 755
• Data is coming through, check with:

print_r($_FILES);

Answer 2

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.

Answer 3

That's correct. You're only passing the file path around as request parameter, not the file content as multipart/form data request body. It won't land in $_FILES. Also, think once again about it, passing alone the path around ain't ever going to work if the webserver and webbrowser runs at physically different machines.

I'd suggest to have a look at jQuery Uploadify plugin, it handles all the nasty details of uploading files with Ajax for you transparently.

Answer 4

I think you'll need to use a jQuery plugin. Uploadify is good but you'll require:

* jQuery v1.2.x or greater
* SWFObject v2.2 or greater
* Flash Player v9.0.24 or greater

You can get all the info. on uploadify at www.uploadify.com.

This will help you out with some more options.