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.
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.
- 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/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. – Feel The Noise Commented May 19, 2015 at 21:50
1 Answer
Reset to default 2I 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());