Country / Dev

Brooser – un browser de fichier pour Mootools

par Country le 14 juillet 2007 à 00:30

Pour mes besoins personnels j’ai eu à developper un browser de fichier dans le même genre de celui que vous obtenez lorsque vous cliquez sous le bouton « Parcourir…»  d’un input type=» file»  mais coté serveur. Comprenez par là qu’il permet de lister les fichiers qui sont présents sur votre serveur.

C’est très utile pour un backoffice afin de pouvoir sélectionner une image pour un article, un fichier flash à insérer dans une page etc…

Brooser


Présentation

Petite liste des features :

  • Listage des dossiers et sous dossiers
  • Limitation à des dossiers spécifiques
  • Aperçu des fichiers
  • Système de plugin
J’ajouterai peut être une option d’upload ou autre dans les prochaines versions, mais pour l’instant il s’agit seulement de lecture de dossier.

Le script est divisé en 2 parties : une partie Javascript et une partie PHP, cette dernière permettant de lister les dossier et de faire les aperçu des fichiers. Ce script requiert Mootools 1.1 pour fonctionner (le détail des dépendances est disponible dans le fichier Brooser.js), ainsi que PHP5.

Utilisation

Inclusion dans votre page

Incluez simplement le script dans votre page (en plus de mootools bien sûr) et le css par défaut du browser
 <link href="css/brooser.css" rel="stylesheet" media="screen" />
 <script type="text/javascript" src="js/Brooser.js"></script>

Et initialisez la class :
 window.addEvent('domready',function() {
 	new Brooser('browse',{
 		currentDir:'./../test',
 		phpFile:'brooser/php/Brooser.php',
 		targetData:'path',
 		onFinish:function(file) {
 			$('file').value=file;
 		}
 	});
 }

Un rapide coup d’oeil sur ce bout de code :
 window.addEvent('domready',function() {

Permet de lancer la fonction une fois que toute la page est chargée (si vous utilisez Mootools vous devez connaître).
 new Brooser('browse',{

Instancie la classe, « browse»  étant l’élément qui permettra d’ouvrir le browser (un bouton, un lien, whatever…)
 currentDir:'./../test',

On arrive dans les options, currentDir permet d’indiquer le dossier dans lequel s’ouvrira le browser
 phpFile:'brooser/php/Brooser.php',

phpFile indique le chemin vers le script côté serveur
 targetData:'path',

targetData indique le type d’information que vous voulez récupérer (le chemin du fichier ou simplement son nom, par défaut le chemin complet est retourné)
 onFinish:function(file) {
 	$('file').value=file;
 }

onFinish permet d’indiquer la fonction à exécuter une fois le fichier choisit (le nom/chemin du fichier est passé en paramètre). Ici je choisi de remplir le champ ayant l’id « file»  avec le chemin de mon fichier.

(toutes les options sont documentées dans le fichier Brooser.js)

Important ! : Le chemin vers le fichier php est relatif au fichier qui appel le script, tandis que le chemin vers le dossier à lister est relatif au fichier php.

Configuration

Par mesure de sécurité vous devez autoriser le listage des dossier par le script. Pour cela éditez le fichier access.php qui se trouve dans le dossier php du script.
<?php
 $allow = array(
     '../path/to/your/directory',
     '../path/to/your/second/directory' );
 $denied = array(
     '../path/to/your/denied/file.txt'
 );
?>

Je pense que le code est assez explicite, dans le tableau $allow vous lister les dossiers que vous voulez autoriser. Vous pouvez aussi utiliser le tableau $denied afin d’interdire des fichiers/dossier qui se trouveraient dans des dossiers que vous avez autorisés mais que vous ne voudriez pas autoriser pour autant.

Et c’est tout !

Exemple

La page d’exemple complète

A venir

Je ferai bientôt quelques billets à propos de la réalisation de plugins et de la possibilité de faire une autorisation des fichiers/dossiers plus poussée (en l’intégrant à la gestion de droit de votre site par exemple). Et bien sûr j’attend vos suggestions ;)

Téléchargement

Brooser 0.9 (350ko)

Et puis qu’il faut rendre à César ce qui est à César, voici tout ce qui est utilisé dans ce script.

En vrac : getID3(), DewPlayer, le player Flv de Neolao, la fonction isBinary() de HesaSys Team et bien sûr les icônes FamFamFam.

Commentaires

Laisser un commentaire

Flux RSS des commentaires de ce billet

(obligatoire)

(obligatoire)