Submit post and upload image from front-end

2 comments

1. If you are talking about the answer i posted here
   its simply uploading file in an iframe to achieve “Ajax like” submit.

   Now if you already have a form that handles the post submit you can simply add the upload file field input somewhere in your form:

   <form ...
   ...
   <input type="file" name="thumbnail" id="thumbnail">
   ...
   ...
   </form>
   

   make sure that your form has enctype="multipart/form-data" attribute.

   then in your form processing script after you create the post (assuming that you are using wp_insert_post();)
   keep hold of the post ID in a new var:

   $new_post = wp_insert_post($post_array);
   

   and after that add:

               if (!function_exists('wp_generate_attachment_metadata')){
                   require_once(ABSPATH . "wp-admin" . '/includes/image.php');
                   require_once(ABSPATH . "wp-admin" . '/includes/file.php');
                   require_once(ABSPATH . "wp-admin" . '/includes/media.php');
               }
                if ($_FILES) {
                   foreach ($_FILES as $file => $array) {
                       if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                           return "upload error : " . $_FILES[$file]['error'];
                       }
                       $attach_id = media_handle_upload( $file, $new_post );
                   }   
               }
               if ($attach_id > 0){
                   //and if you want to set that image as Post  then use:
                   update_post_meta($new_post,'_thumbnail_id',$attach_id);
               }
   

   and you image will be uploaded and saved as post thumbnail.

   Log in to Reply

2. HTML Markup:

    <p>
      <label for="custom-upload">Upload New Image:</label>
      <input type="file" tabindex="3" name="custom-upload" id="custom-upload" />
    </p>
    <?php
     /*Retrieving the image*/
     $attachment = get_post_meta($postid, 'custom_image');
   
     if($attachment[0]!='')
     {
      echo wp_get_attachment_link($attachment[0], 'thumbnail', false, false);
     }
   
    ?>
   

   Uploading the image:

   <?php
   global $post; /*Global post object*/
   $post_id = $post->ID; /*Geting current post id*/
   $upload = $_FILES['upload']; /*Receive the uploaded image from form*/
   add_custom_image($post_id, $upload); /*Call image uploader function*/
   
   function add_custom_image($post_id, $upload)
   {
    $uploads = wp_upload_dir(); /*Get path of upload dir of wordpress*/
   
    if (is_writable($uploads['path']))  /*Check if upload dir is writable*/
    {
     if ((!empty($upload['tmp_name'])))  /*Check if uploaded image is not empty*/
     {
      if ($upload['tmp_name'])   /*Check if image has been uploaded in temp directory*/
      {
       $file=handle_image_upload($upload); /*Call our custom function to ACTUALLY upload the image*/
   
       $attachment = array  /*Create attachment for our post*/
       (
         'post_mime_type' => $file['type'],  /*Type of attachment*/
         'post_parent' => $post_id,  /*Post id*/
       );
   
       $aid = wp_insert_attachment($attachment, $file['file'], $post_id);  /*Insert post attachment and return the attachment id*/
       $a = wp_generate_attachment_metadata($aid, $file['file'] );  /*Generate metadata for new attacment*/
       $prev_img = get_post_meta($post_id, 'custom_image');  /*Get previously uploaded image*/
       if(is_array($prev_img))
       {
        if($prev_img[0] != '')  /*If image exists*/
        {
         wp_delete_attachment($prev_img[0]);  /*Delete previous image*/
        }
       }
       update_post_meta($post_id, 'custom_image', $aid);  /*Save the attachment id in meta data*/
   
       if ( !is_wp_error($aid) ) 
       {
        wp_update_attachment_metadata($aid, wp_generate_attachment_metadata($aid, $file['file'] ) );  /*If there is no error, update the metadata of the newly uploaded image*/
       }
      }
     }
     else
     {
      echo 'Please upload the image.';
     }
    }
   }
   
   function handle_image_upload($upload)
   {
    global $post;
   
           if (file_is_displayable_image( $upload['tmp_name'] )) /*Check if image*/
           {
               /*handle the uploaded file*/
               $overrides = array('test_form' => false);
               $file=wp_handle_upload($upload, $overrides);
           }
    return $file;
   }
   ?>
   

   Log in to Reply