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 May 19 '15 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. – Feel The Noise May 19 '15 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.