Upload Image from front-end and get its url

Question

hi i am upload file from front-end but now code get only image attachment id i want get image url.

   function agp_process_woofile($file, $post_id){

     if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) __return_false();


  require_once(ABSPATH . "wp-admin" . '/includes/image.php');
  require_once(ABSPATH . "wp-admin" . '/includes/file.php');
  require_once(ABSPATH . "wp-admin" . '/includes/media.php');

    $attachment_id = media_handle_upload($file, $post_id);

  add_post_meta($post_id, '_file_paths', $attachment_id);

  $attachment_data = array(
    'ID' => $attachment_id,
    'post_excerpt' => $caption
  );

  wp_update_post($attachment_data);

  return $attachment_id;

} 

See attachment_id i want get url from this function and update that url to "_file_paths" post meta

Answer 1

For upload image in frontend just create simple post form

<form method="post" enctype="multipart/form-data">
<input type="file" name="imagefile" />
<input type="submit" name="Submit" value="Submit" />
</form>

After submit form upload image as attachment in wordpress media as below.

if($_POST){
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'];}//If upload error
        $attach_id = media_handle_upload($file,$new_post);
        echo wp_get_attachment_url($attach_id);//upload file URL
    }
}
}

Answer 2

Use the default wordpress function wp_handle_upload please refer http://codex.wordpress.org/Function_Reference/wp_handle_upload

here my example code :

upload.html

<form action="" enctype="multipart/form-data" id="form" method="post" name="form">
<div id="upload">
<input id="file" name="file" type="file">
</div>
<input id="submit" name="submit" type="submit" value="Upload">
</form>

<div id="detail">
<div id="preview" style="height:100px;width:100px; display:none">
<img id="previewimg" src="" style="height:100px;width:100px;">
<img id="deleteimg"    src="<?php echo plugins_url( '/images/remove.png'__FILE__);?>">
</div>

<div id="message">
<?php include "Function /upload.php";?> 
</div>
</div>

upload.php

<?php
include_once ABSPATH . 'wp-admin/includes/media.php';
include_once ABSPATH . 'wp-admin/includes/file.php';
include_once ABSPATH . 'wp-admin/includes/image.php';
require_once (ABSPATH . 'wp-includes/pluggable.php');
if (isset ( $_POST ['submit'] )) {
    if (! function_exists ( 'wp_handle_upload' ))
        require_once (ABSPATH . 'wp-admin/includes/file.php');
    $uploadedfile = $_FILES ['file'];
    if (! empty ( $uploadedfile ['name'] )) {
        $upload_overrides = array (
            'test_form' => false 
        );
        $movefile = wp_handle_upload ( $uploadedfile, $upload_overrides );
        if ($movefile) {
            echo "File is valid, and was successfully uploaded.\n";
        } else {
            echo "Possible file upload attack!\n";
        }
    } else {
        echo "Please select the image to upload";
    }
}
?>

upload.js `

 jQuery(document).ready(function() {
     // Function for Preview Image.
     jQuery(function() {
         jQuery(":file").change(function() {

             if (this.files && this.files[0]) {
                 var reader = new FileReader();
                 reader.onload = imageIsLoaded;
                 reader.readAsDataURL(this.files[0]);
             }
         });
     }); 
     function imageIsLoaded(e) {
         jQuery('#message').css("display", "none");
         jQuery('#preview').css("display", "block");
         jQuery('#previewimg').attr('src', e.target.result);
     };
     // Function for Deleting Preview Image.
     jQuery("#deleteimg").click(function() {
         jQuery('#preview').css("display", "none");
         jQuery('#file').val("");
     });
     // Function for Displaying Details of Uploaded Image.
     jQuery("#submit").click(function() {
         jQuery('#preview').css("display", "none");
         jQuery('#message').css("display", "block");
     });
 });`

Answer 3

hi found solution so sharig with you guys :)

function agp_process_woofile($files, $post_id, $caption){


  require_once(ABSPATH . "wp-admin" . '/includes/image.php');
  require_once(ABSPATH . "wp-admin" . '/includes/file.php');
  require_once(ABSPATH . "wp-admin" . '/includes/media.php');

    $attachment_id = media_handle_upload($files, $post_id);

 $attachment_url = wp_get_attachment_url($attachment_id);
  add_post_meta($post_id, '_file_paths', $attachment_url);

    $attachment_data = array(
    'ID' => $attachment_id,
    'post_excerpt' => $caption
  );

  wp_update_post($attachment_data);

  return $attachment_id;

}