How To Display Uploaded Image Correctly? - wordpress

Question

I have Wordpress Plugin in which I try To display an uploaded image, but I get url like this:
http://localhost/opt/lampp/htdocs/wordpress2/wp-content/plugins/fileuploadplugin/uploads/website-development-banner.jpg
instead of this:
http://localhost/wordpress2/wp-content/plugins/fileuploadplugin/uploads/website-development-banner.jpg
My code is:
<?php
// Configuration - Your Options
$allowed_filetypes = array('.csv','.jpg','.gif','.png','.jpeg'); // These will be the types of file that will pass the validation.
$max_filesize = 524288; // Maximum filesize in BYTES (currently 0.5MB).
define( 'WP_PLUGIN_DIR', $_SERVER['DOCUMENT_ROOT'] . '/wordpress2/wp-content/plugins' );
//$targetpath=WP_PLUGIN_DIR.'/testplugin/documents/'.basename($_FILES["photo"]["name"]);
$upload_path = WP_PLUGIN_DIR.'/fileuploadplugin/uploads/'; // The place the files will be uploaded to (currently a 'files' directory).
//echo $upload_path;exit;
$filename = $_FILES['userfile']['name']; // Get the name of the file (including file extension).
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Get the extension from the filename.
//$targetpath='/uploads'.basename($filename);
// Check if the filetype is allowed, if not DIE and inform the user.
if(!in_array($ext,$allowed_filetypes))
die('The file you attempted to upload is not allowed.');
// Now check the filesize, if it is too large then DIE and inform the user.
if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)
die('The file you attempted to upload is too large.');
// Check if we can upload to the specified path, if not DIE and inform the user.
if(!is_writable($upload_path))
die('You cannot upload to the specified directory, please CHMOD it to 777.');
// Upload the file to your specified path.
if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $filename))
echo 'Your file upload was successful, view the file here'; // It worked.
else
echo 'There was an error during the file upload. Please try again.'; // It failed :(.
?>
My Problem is how to remove /opt/lampp/htdocs from $uploadpath to get uploaded image to display correctly?

Answer 1

The problem is that you are using the same path for both uploading and displaying the image.
Path to Upload the image
In your upload code above, you need to use the file system path, as you are doing. The path in your code is:
$upload_path = WP_PLUGIN_DIR.'/fileuploadplugin/uploads/'; // The place the files will be uploaded to (currently a 'files' directory).
This will have a value something like
/home/user/var/www/wp-content/plugins/fileuploadplugin/uploads/
URL to Display the image
The file system path obviously won't work to display the image, so you need to use a URL or a path relative to your website, e.g.
http://www.example.com/wp-content/plugins/fileuploadplugin/uploads/uploadedimage.jpg
To get the URL for your plugins folder, you need to use:
$upload_url = WP_PLUGIN_URL.'/fileuploadplugin/uploads/';
And then you can display the image using that path, e.g.
<img src="/<?php echo $upload_url.$filename; ?>" />
Note:
I have kept WP_PLUGIN_DIR and used WP_PLUGIN_URL in the code above to make it easier for you to see the changes required. However these should not be used directly. Instead you should use the functions provided by WP to get these values: ref Wordpress Codex: Determining Plugin and Content Directories.