Joomla custom component adding browse button - joomla

Question

I am developing a component in J! 2.5 and want to add a browse button on the backend so the user can pick a file they have previously uploaded. How would I go about this?

Answer 1

This is what I have come up with, if someone can make it more robust and reusable, that would be great. I may do it myself later, but for now I have an impossible deadline.
loadDir.php:
<?php
if(isset($_GET['dir'])) {
//Get array of valid extensions
if(isset($_GET['ext'])) {
if($_GET['ext'] == 'pdf') $validext = array("pdf");
else $validext = array("jpg", "jpeg", "png", "gif");
} else {
$validext = array("pdf", "jpg", "jpeg", "png", "gif");
}
$root = dirname(dirname(dirname(getcwd()))) . "/";
$directory = $root . $_GET['dir'];
$files = scandir($directory);
$thumb_count = 1;
//make sure we haven't gone too high (should never be called)
if(strpos($directory, 'images') == false) $directory = $root . "images";
//TODO: sort array with dirs in front
foreach($files as $file) {
if ($file == '.') continue; //Remove current directory from loop
//If in the images folder, don't let them go higher
if ($file == '..' & $_GET['dir'] == 'images') continue;
$path = $_GET['dir'];
if($file == '..') {
$path = dirname($path);
} else {
$path .= "/".$file;
}
if(is_dir($directory."/".$file)) {
echo "[DIR]".$file."".PHP_EOL;
} else {
//Check to see it's a valid extension
$ext = pathinfo($file, PATHINFO_EXTENSION);
$num = rand(0,100);
if(in_array($ext, $validext)) echo "[FILE]".$file."".PHP_EOL;
}
if(($thumb_count % 5) == 0) echo "<br/>";
$thumb_count++;
}
} else {
echo "Error loading: Directory not available";
}
?>
administrator/components/com_XXX/views/XXX/tmpl/form.php:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
selected_file = "";
function select(id, file) {
$('#' + id).css('background-color', 'red');
selected_file = file;
}
function loadDir(div, path, ext) {
$('#'+div+'Window').load('<?php echo JURI::root();?>administrator/components/com_lot/loadDir.php?div='+div+'&ext='+ext+'&dir='+path);
}
$(document).ready(function() {
$('#floorOpen').on("click", function(){
loadDir('floor', 'images', 'pdf');
$('#floorDialog').show();
});
$('#floorClose').on("click", function(){
$('#floorDialog').hide();
if(selected_file != "") $('#floor_plan').val(selected_file);
selected_file = "";
});
$('#floorCancel').on("click", function(){
$('#floorDialog').hide();
selected_file = "";
});
$('#mainOpen').on("click", function(){
loadDir('main', 'images', 'img');
$('#mainDialog').show();
});
$('#mainClose').on("click", function(){
$('#mainDialog').hide();
if(selected_file != "") $('#main_image').val(selected_file);
selected_file = "";
});
$('#mainCancel').on("click", function(){
$('#mainDialog').hide();
selected_file = "";
});
});
</script>
......
<div id="floorDialog" style="position:absolute;display:none;width:400px;height:300px;border:1px solid #c0c0c0;background-color:#f0f0f0;top:800px;left:400px;">
<div id="floorWindow" style="position:relative;width: 390px;height: 250px;margin: 4px;border: 1px solid #c0c0c0;">
</div>
CancelOK
</div>
<div id="mainDialog" style="position:absolute;display:none;width:400px;height:300px;border:1px solid #c0c0c0;background-color:#f0f0f0;top:800px;left:400px;">
<div id="mainWindow" style="position:relative;width: 390px;height: 250px;margin: 4px;border: 1px solid #c0c0c0;">
</div>
CancelOK
</div>
....
<tr>
<td width="100" align="right" class="key">
<label for="main_image">
<?php echo JText::_( 'Main Image' ); ?>:
</label>
</td>
<td>
<input class="text_area" type="text" name="main_image" id="main_image" size="32" maxlength="250" value="<?php echo $this->lotdata->main_image;?>" />Browse
</td>
</tr>
<tr>
<td width="100" align="right" class="key">
<label for="floor_plan">
<?php echo JText::_( 'Floor Plan' ); ?>:
</label>
</td>
<td>
<input class="text_area" type="text" name="floor_plan" id="floor_plan" size="32" maxlength="250" value="<?php echo $this->lotdata->floor_plan;?>" />Browse
</td>
</tr>
Basically I use AJAX to get a formatted list of files/directories. Then, using javascript we select the file we want and output the path on dialog close.

Answer 2

I think you can use the built in Joomla! form field filelist for this
<field name="myfile" type="filelist" default="" label="Select a file" description="" directory="administrator" filter="" exclude="" stripext="" />
Full options are:
The filelist form field type provides a drop down list of files from a specified directory. If the field has a saved value this is selected when the page is first loaded. If not, the default value (if any) is selected.
Params.filelist.jpg
By default, the first item on the list is '- Do not use -' (which is translatable) and is given the value '-1' and this is followed by '- Use default -' (also translatable) given the value '0'.
type (mandatory) must be filelist.
name (mandatory) is the unique name of the field.
label (mandatory) (translatable) is the
descriptive title of the field. directory (optional) is the
filesystem path to the directory containing the files to be listed.
If omitted the directory given by JPATH_ROOT is assumed.
default (optional) is the default file name.
description (optional)
(translatable) is text that will be shown as a tooltip when the user
moves the mouse over the drop-down box.
filter (optional) is a
regular expression string which is used to filter the list of files
selected for inclusion in the drop-down list. If omitted, all files
in the directory are included. The filter argument expression is
applied before the exclude argument expression. For information on
constructing regular expressions see Regular expressions in parameter
arguments.
exclude (optional) is a regular expression string which is
used to exclude files from the list. The exclude argument expression
is applied after the filter argument expression. For information on
constructing regular expressions see Regular expressions in parameter
arguments.
stripext (optional) is a Boolean argument. If true then
file name extensions will be stripped from the file names listed.
Also note that the file name will be saved without the extension too.
hide_none (optional) is a Boolean argument. If true, the '- Do not
use -' item is omitted from the drop-down list.
hide_default
(optional) is a Boolean argument. If true, the '- Use default -' item
is omitted from the drop-down list.
Here's where I got the list, I'm aware I'm not supposed to just link so I copied/pasted but I'll provide the original link in case the docs get updated.
https://docs.joomla.org/Filelist_form_field_type