I created a WordPress post form that works well

And I want to add a field:

Browser recording audio file Based on base64 - (blob file)

And upload when posting. My javascript code is : https://subinsb.com/html5-record-mic-voice/

This is my code example:

      if ( isset( $_POST['submitted'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' ) ) {

    if ( trim( $_POST['postTitle'] ) === '' ) {
        $postTitleError = 'Please enter a title.';
        $hasError = true;

    $post_information = array(
        'post_title' => wp_strip_all_tags( $_POST['postTitle'] ),
        'post_content' => $_POST['postContent'],
        'episode' => $_POST['postEpisode'],
        'post_type' => 'post',
        'post_status' => 'draft'

    $post_id = wp_insert_post( $post_information );
    add_post_meta($post_id, 'episode', $_POST['postEpisode'], true);

    /* upload file here */

    $file_name = $_FILES['fileToUpload']['name'];
    $file_temp = $_FILES['fileToUpload']['tmp_name'];

    $upload_dir = wp_upload_dir();
    $image_data = file_get_contents( $file_temp );
    $filename = basename( $file_name );
    $filetype = wp_check_filetype($file_name);
    $filename = time().'.'.$filetype['ext'];

    if ( wp_mkdir_p( $upload_dir['path'] ) ) {
      $file = $upload_dir['path'] . '/' . $filename;
    else {
      $file = $upload_dir['basedir'] . '/' . $filename;

    file_put_contents( $file, $image_data );
    $wp_filetype = wp_check_filetype( $filename, null );
    $attachment = array(
      'post_mime_type' => $wp_filetype['type'],
      'post_title' => sanitize_file_name( $filename ),
      'post_content' => '',
      'post_status' => 'inherit'

    $attach_id = wp_insert_attachment( $attachment, $file );
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    $attach_data = wp_generate_attachment_metadata( $attach_id, $file,$post_id );
    wp_update_attachment_metadata( $attach_id, $attach_data,$post_id );

    echo $attach_id;

<?php if ( $postTitleError != '' ) { ?>
    <span class="error"><?php echo $postTitleError; ?></span>
    <div class="clearfix"></div>
    <?php } ?>
    if ( $post_id ) {
    wp_redirect( home_url() );
   <form action="" id="primaryPostForm" method="POST" enctype="multipart/form-data">

        <label for="postTitle"><?php _e('Post Title:', 'framework') ?></label>

        <input type="text" name="postTitle" id="postTitle" class="required" value="" />

        <label for="postContent"><?php _e('Post Content:', 'framework') ?></label>

        <textarea name="postContent" id="postContent" rows="8" cols="30" class="required"></textarea>

        <label for="postEpisode"></label>

        <textarea name="postEpisode" id="postEpisode" rows="8" cols="30" class="required"></textarea>

    /*----------------- recorder filed here -----------------*/
    <audio controls id="audio"></audio>
      <a class="button recordButton" id="record">Record</a>
      <a class="button recordButton" id="recordFor5">Record For 5 Seconds</a>
      <a class="button disabled one" id="pause">Pause</a>
      <a class="button disabled one" id="stop">Reset</a>
      <input class="button" type="checkbox" id="live"/>
      <label for="live">Live Output</label>
        <div data-type="wav">
            <p>WAV Controls:</p>
            <a class="button disabled one" id="play">Play</a>
            <a class="button disabled one" id="download">Download</a>
      <a class="button disabled one" id="base64">Base64 URL</a>
      <a class="button disabled one" id="save">Upload to Server</a>

    <canvas id="level" height="200" width="500"></canvas>

    <?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
        <input type="hidden" name="submitted" id="submitted" value="true" />

        <button type="submit"><?php _e('Add Post', 'framework') ?></button>


I have searched several websites and unfortunately found no right solution to this problem.

I want to upload this file along with the post.And display in a custom field in the backend

Can anyone help me?

  • What happens - what specifically isn't working? And why do you want the user to base64 encode their audio files before uploading? You're saving it as an attachment so binary is fine. When you say your form works fine, does the client-side insert post work fine, it's just the attachment you're having problems with? – Rup Dec 24 '19 at 9:40
  • @Rup Thanks for your question. Yes. The form is well submitted but does not attach any files The user records his voice using the microphone(ex: in chrome) and sends the form along with other fields. The problem is that the audio file is recorded by the browser as base64. How to post this recorded file with other fields? – yasin taqizade Dec 24 '19 at 13:19

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.