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 "<a href=\"#\" onClick=\"loadDir('".$_GET['div']."', '".$path."', '".$_GET['ext']."'); return false;\">[DIR]".$file."</a>".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 "<a href=\"#\" id=\"".$num."\" onClick=\"select(".$num.", '".$path."'); return false;\">[FILE]".$file."</a>".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>
        <a href="#" onClick="return false;" id="floorCancel">Cancel</a><a href="#" onClick="return false;" id="floorClose">OK</a>
    </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>
        <a href="#" onClick="return false;" id="mainCancel">Cancel</a><a href="#" onClick="return false;" id="mainClose">OK</a>
    </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;?>" /><a href="#" onClick="return false;" id="mainOpen">Browse</a>
            </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;?>" /><a href="#" onClick="return false;" id="floorOpen">Browse</a>
            </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.