I'm working on a project where registred users can upload file to a specific post type. For a more fluid navigation, I'm making this whole part with Ajax, so the page never reloads.
However I'm having a hard time trying to make a <input type="file"> work.
Here's my code so far:


    // Start Loop and current meta of the post
<form class="update_post" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="hidden" name="post_id" id="post_id" value="<?php echo get_the_ID(); ?>">
    <label for="new_value_1_for_<?php echo get_the_ID(); ?>">Value 1</label>
    <input type="text" name="new_value_1_for_<?php echo get_the_ID(); ?>" id="new_value_1_for_<?php echo get_the_ID(); ?>" value="" required>
    <label for="new_value_2_for_<?php echo get_the_ID(); ?>">Value 2</label>
    <input type="text" name="new_value_2_for_<?php echo get_the_ID(); ?>" id="new_value_2_for_<?php echo get_the_ID(); ?>" value="" required>
    <label for="file_upload_for_<?php echo get_the_ID(); ?>">File Upload</label>
    <input type="text" name="file_upload_for_<?php echo get_the_ID(); ?>" id="file_upload_for_<?php echo get_the_ID(); ?>" value="" required>
    <input type="submit" name="submit" class="button1 submit_update_post" value="Send">
    <div class="progress_bar"></div>    
    // End Loop


    var formData = new FormData(this);
        type: "POST",
        dataType: "json",
        url: "url_to_php_file",
        data: formData, 
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function(){
            // Show a loader animation
        success: function(data) {
            // Hide the loader animation and update the info
        error: function() {
            // Display error message
    return false;


$post_id = $_POST['post_id'];
$value_1 = $_POST['new_value_1_for_'.$post_id.''];
$value_2 = $_POST['new_value_2_for_'.$post_id.''];

// Update the Post Meta
update_post_meta($post_id, 'value_1', $value_1);
update_post_meta($post_id, 'value_2', $value_2);

// Upload the file
$file_upload = wp_upload_bits($_FILES['file_upload_for_'.$post_id.'']['name'], null, file_get_contents($_FILES['file_upload_for_'.$post_id.'']['tmp_name']));
    if (isset($file_upload['error']) && $file_upload['error'] != 0) {
        echo '<script type="text/javascript">
            alert("' . $file_upload['error'] .'");
        update_post_meta($post_id, 'file_upload', "");
    else {
        update_post_meta($post_id, 'file_upload', $file_upload);

$file_uploaded = get_post_meta($post_id, 'file_upload', true );

// Output
$array = array(
    "value_1"       => $value_1,
    "value_2"       => $value_2,
    "file_url"      => $file_uploaded['url'],

print json_encode($array);

Everything but the file upload works.
Is there something I'm missing?
Thank you so much.

  • It looks like you're trying to use wordpress functions (eg. update_post_meta) in a php file that doesn't know those functions exist. You either need to to include parts of wordpress in the php file (see wp-load.php), or do ajax the wordpress way -> smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress Most people will recommend doing the wordpress way.
    – gdaniel
    Commented May 19, 2015 at 21:41
  • Hi! Thank you for your reply! I'm so sorry, I have not stated, but I have loaded the wordpress functions inside the external php file. I was trying to avoid too much lines in the question. Commented May 19, 2015 at 21:50

1 Answer 1


I use this code to upload

if ( ! function_exists( 'wp_handle_upload' ) )  {

                    require_once( ABSPATH . 'wp-admin/includes/file.php' );  

if($_FILES['file']['name'] != '') {

                         $uploadedfile = $_FILES['file'];

                         $upload_overrides = array( 'test_form' => false );

                         $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

                         if ( $movefile && ! isset( $movefile['error'] ) ) {

                            $file_url = $movefile['url'];

                            $file_url = $movefile['file'];

if you need to limit the file types to download, you need to change the line

$upload_overrides = array( 'test_form' => false);


$mimes = [
            'wmv' => 'video/x-ms-wmv',
            'wmx' => 'video/x-ms-wmx',
            'wm' => 'video/x-ms-wm',
            'avi' => 'video/avi',
            'divx' => 'video/divx',
            'flv' => 'video/x-flv',

$upload_overrides = array( 'test_form' => false, 'mimes' => $mimes );

full list of mime types


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.