Upload Image from front-end and get its url

3 comments

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
       }
   }
   }

   Log in to Reply

2. 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;
   
   } 
   

   Log in to Reply

3. 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");
        });
    });`
   

   Log in to Reply