1

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:

Markup

<?php
    // 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>    
</form>
<?php
    // End Loop
?>

jQuery

$(".update_post").submit(function(){
    var formData = new FormData(this);
    $.ajax({
        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;
});

php

$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'] .'");
        </script>';
        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.

2
  • 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
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);

on

$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

print_r(get_allowed_mime_types());

Your Answer

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

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