file uploader needed in joomla 3 component like template logo uploader - joomla

Question

I am creating a component in joomla 3 and i need a image uploader for that component like template logo uploader (Show light box popup and image selection). I don't know how to do that kindly reply if anybody knows it

Answer 1

The following address will present the view for selecting an image from media manager
http://yourdomain/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=
so you can open it in any light box popup implementation
The page that opens it must include a
function jInsertEditorText( text, editor ){....}
This function will be called once the "Insert" button is selected.
I will provide a simple example of this implementation using all the functionality that is available by default in joomla3.
On a page of your component you may use the following code to include a button that shows a modal window of bootstarp (http://getbootstrap.com/2.3.2/javascript.html#modals)
show popup
(please don't pay much attention to the style attribute as it is there for testing purposes)
If you simply want to do this from the console or js you can do
jQuery("body").append('show popup');
then you may add an iframe with the url i mentioned above (the same approach is followed by joomla when you push "image" in article editor)
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src="http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author="></iframe></div>
to execute from console or js dynamically,
jQuery("body").append('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src=""></iframe></div>');
jQuery('#choose-image').attr("src","http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=");
Then you may either provide a js function jInsertEditorText( text, editor ){....} in your page and handle the insert after selecting image on the popup.
Or simply provide a custom handling for the Insert button
try calling following code from console or in script
Query("iframe#choose-image").load(function(){jQuery("#choose-image").contents().find(".btn.btn-primary:contains('Insert')").attr("onclick","").click(function(){alert(jQuery("#choose-image").contents().find("#f_url").val());});});
it basically removes the default onclick script and adds a custom handling of click by showing the selected image path on an alert dialog.