Frontend Posting With Image Uploader

Recently i had to implement frontend posting for the sidebar. I chose Quick Post Widget for this purpose. This plugin has a very flexible UI with a lot of options. The only problem i had was, it used a tab in the visual editor for image attachments, which my client did not like much. He wanted an image uploading field upfront.

So i decided to add a front end image uploader to Quick Post Widget. The file i edited was ‘quick-post-widget.php’. Here are the steps i followed

1- I modified the opening form tag and added enctype to it (this is the form that will displayed on frontend).

enctype="multipart/form-data"

2- In the form, before the submit button, added a field of type ‘file’ for images.

<label for="attachment">Image: </label>
<input id="attachment" type="file" name="mypostimage" />

3- Added the image upload function to my functions.php so i can also call it later wherever i need.

function insert_attachment($file_handler,$post_id,$setthumb='false') {

  // check to make sure its a successful upload
  if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
    //for use in widgets we include some files that contain media_handle_upload and related functions.
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');

  $attach_id = media_handle_upload( $file_handler, $post_id );

  if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
  return $attach_id;
}

4- Now i called the above function for quick post widget ‘mypostimage’ field. Added this code just after wp_insert_post was called in the quick-post-widget.php. This code would insert the image as an attachment image for the post.

   if($post_id > 0){
             if ($_FILES) {
                           $newupload = insert_attachment('myfile',$post_id);
                          }
                       }

Below is the screenshot, how the widget looked after adding the uploader field.

Easy, isn’t it? I am also open to suggestions on how it could be done more easily.

Other Related Articles:

• WordPress Frontend Posting for Users – Why?