I was recently working on a wordpress plugin and need a very small image upload feature just to upload company logo. I was thinking to use the original wordpress file uploader, as it is really very cool and easy to use as well. So after checking few code snipped’s I found the below solution:
Here is the html code for browse button,
<input id="company_logo" type="text" name="company_logo" size="36" /> <input id="upload_button" type="button" value="Upload Image" />
You are required to add these javascript libraries to achieve the lightbox effect and uploader screen
add_action('init', 'call_init');
function call_init()
{
wp_enqueue_script("jquery");
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
and now the actual javascript code, which will do the magic
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#company_logo').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#company_logo').val(imgurl);
tb_remove();
}
Above code will open a thikbox and allow user to upload image or select from the uploaded one like one we can while adding thumnails or post images on post page. Once image gets uploaded and user presses “insert into post”, the “send to editor” function gets activated and it will copy the image url to input box you had created in the html.
This will look exactly like wordpress image uploader screen.
So upload functionality done here, but what I required was to get the image id or say attachment id once image uploaded successfully and url comes in input box, and for that there is a hook in the wordpress api which we can use while user click “insert into post” button, it is “image_send_to_editor”
add_filter('image_send_to_editor', 'image_to_editor', 20, 8);
“image_send_to_editor” hook get’s called in the background when user press ‘insert into post’ button and provides various parameter, like html, attachment id, caption of the image, title of the image, alignment of the image, url, size and alt tag of the image.
As I only need attachment id from that function to save in db and latter can use it for thumbnail generation, so I just updated a option in the database to save it.
function image_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt)
{
update_option('company_logo_id', $id);
return $html;
}
Hope this will help in image upload features of wordpress plugins. Feedback and questions are welcome here.
The above code is not working for me.
First that adding jquery was not working ,if that will working then i will proceed.
Please help me.Give me the details.
Thanks.
Are you getting any javascript error, if so share it here
The code works great. But I’m having an issue when I try to include 2 file upload areas on the same page; it just uses the second window.send_to_editor function for both.
Nevermind. I placed a window.send_to_editor function within each click function and matched the values.
sorry but, how can i change the folder only for this uploader (not for the others) ?
Thx
I am not sure you are able to change the uploads directory for this uploader, still I will try to find out. If I get anything on this will reply you back.
May be this article will help you, http://wordpress.org/support/topic/change-file-upload-folders-on-wordpress-30-multi-site, there is a filter add_filter(‘upload_dir’, ‘ml_media_upload_dir’); which will help to achieve your purpose.
Good Afternoon Savita Madam
Here i want to write a plugin which will contain imapge upload functionality.
But when i will write above code this javascript error is coming.
Please help me.
My code like this
<?php
/*
*Plugin Name:Image Upload
* Author:Sangram Keshari Patra
*/
add_action('admin_menu','create_menu');
function create_menu(){
add_submenu_page('options-general.php','ImageUpload','ImageUpload','manage_options','image_upload','call_image_upload');
}
add_action('init', 'my_scripts_method');
function my_scripts_method() {
wp_enqueue_script("jquery");
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
function call_image_upload(){
echo '
‘;
}?>
jQuery(‘#upload_image_button’).click(function() {
formfield = jQuery(‘#company_logo’).attr(‘name’);
tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery(‘img’,html).attr(‘src’);
jQuery(‘#company_logo’).val(imgurl);
tb_remove();
}
Error: $ is not defined
Source File: http://sangram.afixiindia.com/san_wp/wp-admin/options-general.php?page=image_upload
Line: 2
Error: thickboxL10n is not defined
Source File: http://sangram.afixiindia.com/san_wp/wp-includes/js/thickbox/thickbox.js?ver=3.3.1
Line: 9
Thanks god….It is Done…….
Hey.. Nice, sorry not able to dig into your problem, what was the issue?
Actually i have written this code
jQuery(‘#upload_image_button’).click(function() {
formfield = jQuery(‘#company_logo’).attr(‘name’);
tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery(‘img’,html).attr(‘src’);
jQuery(‘#company_logo’).val(imgurl);
tb_remove();
}
in same plugin file.
when i have written it another js file and incuded then it is worked fine..
Is there any way to load image uploading form whithout overlay? Just inside current document’s body for example.
No I don’t think so its possible.
Thanks for reply.
What about uploading an image file from user’s PC using to WordPress’ gallery? If it’s possible, the script could return a link to uploaded image so I can wrap it and send to editor.
Sorry, the input tag was stripped from my previous post. I was talking about input type=file
Below function return with html, id, caption, title, url etc
function image_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt)
{
update_option(‘company_logo_id’, $id);
return $html;
}
So I think you can use url part if required.
I am using your code in my functions.php file, not in any plugin.
First of all i have create a new option for my theme using this code
add_action(‘admin_menu’, ‘my_plugin_menu’);
function my_plugin_menu() {
add_theme_page(‘My Plugin Theme’, ‘My Theme options’, ‘administrator’, ‘my-unique-identifier’, ‘my_plugin_function’);
wp_enqueue_script(“jquery”);
wp_enqueue_script(‘media-upload’);
wp_enqueue_script(‘thickbox’);
wp_enqueue_style(‘thickbox’);
}
function my_plugin_function(){
?>
jQuery(‘#upload_image_button’).click(function() {
formfield = jQuery(‘#company_logo’).attr(‘name’);
tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery(‘img’,html).attr(‘src’);
jQuery(‘#company_logo’).val(imgurl);
tb_remove();
}
}
but this is not working …
please help me
Thanks
What exactly is not working in the above code. I can’t see any
Hi,
now uploading thickbox opening well, But you have a mistake in your code …
you have a button like this
and javascript code like this
jQuery(‘#upload_image_button’).click(function()
the id of button is not same .
that is why i have to face the problem .
Now its working fine
thank you
May be you are using wordpress 3.3 and when I had written this code button id was what I have used, so it was working that time.
Thanks for pointing I will add a note in the post for upgraded version.