Country’s Blog

Brooser - un browser de fichier pour Mootools

Par Country le Samedi 14 juillet 2007 à 00:30 - Non classé

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.

32 commentaires

WhyNot

Il faudra que je test ça à l’occasion…

Au sinon deux liens non-valides

Le lien de retour à partir de la page de demo (un s en trop à blog) et le lien FamFamFam qui n’est pas valide (au passage, merci de l’avoir fait découvrir).

Merci de partager en tout cas

le Dimanche 15 juillet 2007 à 17:28

Country

Oups, liens corrigés, merci

le Dimanche 15 juillet 2007 à 18:30

Pedro

Waow, excellent boulot !
Je crois qu’on peux pas faire plus complet.

le Lundi 16 juillet 2007 à 12:58

WhyNot

Ce qui est sûr c’est qu’on attend avec impatience la fonction d’upload ;)

le Lundi 16 juillet 2007 à 22:31

wouaren

Splendide :)

le Mardi 17 juillet 2007 à 09:32

syan

excellentissimes !
je vais regarder comme intégrer des plugins pour cette application/
Merci beaucoup pour le partage de ces sources.

le Jeudi 19 juillet 2007 à 13:50

rey

Bonjour,
et merci pour ce super script, cependant j’essai de le faire fonctionner en local, il a du mal à afficher les fichiers, en fait il les affiches pas du tout, je pense que cela soit à cause des chemins relatif, j’ai un dossier IMG sur mon disque comme ceci http://127.0.0.1/IMG/ donc dans le fichier access.php j’ai mis ceci

$allow = array('../IMG');

et dans la page j’ai mis ceci

currentDir:'./IMG',

en fait je travaille en local pour l’essayer, avec xampp qui à php5 et qui est disposé comme ceci sur mon disque E:\xampp\xampp\htdocs\brooser\index2.html qui est la page qui appelle le bouton pour afficher le brooser. Pouvez me dire si je vais dans la bonne direction, car cette application je ne pourrais peut etre pas l’utiliser qui est en php4 dite moi si je me trompe, en vous remerciant par avance.

le Jeudi 19 juillet 2007 à 17:01

Country

Salut rey,

Alors, si j’ai bien compris ton arborescence, dans ton fichier access.php met :

$allow = array('../../IMG');

et dans index2.html :

currentDir:'../../IMG',

(le chemin est relatif au fichier php/Brooser.php)

Et ça devrais fonctionner :)

le Jeudi 19 juillet 2007 à 19:40

Rey

Re bonsoir,
Je viens de voir votre message et je vous en remercie, j’ai suivi vos indications mais ca bloque, dommage car j’aurais pu faire un backoffice pour mon site, je vais continuer de chercher,par contre si j’enleve un des ../ de la page index2.html tout en laissant ../../IMG dans le fichier access on voit l’image qui tourne sinon le navigateur affiche une erreur de script. il doit y avoir une solution, idem j’ai essayé sur FREE et ca bloque aussi, bonne soirée merci

le Jeudi 19 juillet 2007 à 20:45

Country

Si tu as firebug, regarde la réponse de la requête ajax, si tu as :
> “” is not a valid directory
c’est que le chemin dans index2.html n’est pas bon.
Si tu as :
> Access to “E:/xampp/xampp/htdocs/IMG” is not allowed
c’est que le chemin dans access.php n’est pas bon (ils doivent théoriquement être identiques).

Fait aussi attention à ne pas avoir :

$denied=array('');

mais

$denied=array();

(sinon tu interdit tous les fichiers/dossiers)

le Jeudi 19 juillet 2007 à 21:06

Nico

Wouaw! c’est vraiment monstreux, super boulot et merci!

le Lundi 23 juillet 2007 à 13:17

Country’s Blog » Blog Archive » Brooser - créer un plugin

[...] la petite présentation de Brooser, je vais maintenant expliquer comment réaliser un plugin pour celui-ci.Les plugins sont très [...]

le Lundi 30 juillet 2007 à 21:14

Country

Tien, j’ai vu que la prochaine version de Mootools comporterai une class pour l’upload de fichier. Je vais étudier ça pour l’intégrer dans la prochaine version.

le Jeudi 2 août 2007 à 00:10

Super Chinois

Je ne suis pas très au jus des évolutions de Mootools mais jvais prendre le temps de tester ça :)

merci.

le Mercredi 8 août 2007 à 08:37

Georg Ringer

Hello,

very nice script. Is it possible to browse through directories or is just one directory possible?

georg

le Mardi 4 septembre 2007 à 10:30

Country

Hello Georg,

you can absolutely browse through directories.

le Mardi 4 septembre 2007 à 19:31

Axel

Bonjour,
je viens de decouvrir ce tres bon script, félicitaions!!!
J’ai cependant un petit soucis avec $denied.
Je ne dois pas m’y prendre comme il faut.
ma config est la suivante :

$allow = array(
	'../../societe/'.$_SESSION['rep']
);
$denied = array(
	'../../societe/'.$_SESSION['rep'].'/templates',
	'../../societe/'.$_SESSION['rep'].'/index.php',
);

et pourtant index.php et /templates sont visibles et accesibles.
Une idée ?
PS : vivement l’upload ^^
axel

le Vendredi 14 septembre 2007 à 19:50

Axel

J’oubliais :s
je n’ai pas trouvé le moyen de lancé le browser automatiquement au chargement de la page. (mes lacunes en js se voient la non ?)

merci

Axel

le Vendredi 14 septembre 2007 à 19:54

Country

Salut Axel, désolé pour la réponse tardive mais j’étais pas mal occupé ces temps-ci.

Je regarde ton problème. Apparemment cela viendrai des variables dans le chemin des fichiers interdits (j’avoue ne jamais avoir testé cela).
Je vais chercher comment régler ça.

le Lundi 17 septembre 2007 à 14:33

Country

Ho, et pour ouvrir le browser au chargement de la page :

window.addEvent('domready',function() {
  // Création du browser
  var brooser = new Brooser('browse',{
   currentDir:'../test',
   phpFile:'php/Brooser.php',
   onFinish:function(file) {
    $('file').value=file;
   }
  });
  // Ouverture au chargement de la page
  brooser.setDir(brooser.options.currentDir);
  brooser.display();
 })

le Lundi 17 septembre 2007 à 14:38

Country

Pour le problème avec $denied, ajoute

session_start();

au début de Brooser.php pour qu’il puisse lire la valeur stockée dans la session.

le Lundi 17 septembre 2007 à 15:05

Axel

Merci pour tes réponses :)

J’ai pu résoudre le soucis du lancement auto, mais pour les acces toujours le meme soucis.

Alors que j’ai

var brooser = new Brooser('browse',{ currentDir:'../../{path}/{repertoire}'

et

$allow = array( '../../societe/'.$_SESSION['rep'] );

dans acces, je peux remonter jusqu’au niveau /societe/ (mais pas plus haut).

Je comprend toujours pas pourquoi.

Si quelqu’un a une idée, c’est volontier.

le Mardi 2 octobre 2007 à 12:13

Country

As tu bien essayé de mettre

session_start();

dans Brooser.php (ou le fichier qui initialise la class), car sans cela il ne pourra pas récupérer le contenu de $_SESSION

Ce qui explique que tu puisse remonter jusqu’à /societe/ car il comprend

$allow = array ('../../societe/');

le Mardi 2 octobre 2007 à 17:22

Rey

Bonjour,
j’avais déjà eu l’occasion de poster et je me remet à tester cette application, je l’ai testé sous Firefox avec firebug
il me dit que j’ai un souci avec le fichier XHR.js ligne 135
et le fichier Json.js ligne 68
avec le message d’erreur suivante
missing ) in parenthetical
http://127.0.0.1/brooser/mootools/Json.js
Line 68

que j’aille chercher les nouveaux fichier compressé ou pas de mootools j’ai la meme chose.

je ne sais comment résoudre le problème
merci

le Samedi 3 novembre 2007 à 18:25

Ben

Ce projet s’annonce prometteur!

Il manque une fonction d’upload/delete de type Fancy upload (http://digitarald.de/project/fancyupload/) et il serait parfait!

Mais le boulot est génial!

Faudra pas hésiter à poster la version dans les script Mootols sur le forum!

le Lundi 12 novembre 2007 à 14:22

Country

@Rey : Apparement le retour de la requete n’est pas du JSON valide, sans doute une erreur. Utilise Firebug pour voir ce qu’il te dit.

@Ben : Merci. Je vais m’y remettre bientôt, déjà pour le rendre compatible avec Mootools 1.2 et sans doute ajouter la possibilité d’uploader/renommer/etc. des fichiers.

Enfin je verrai, je n’ai pas envi que cela devienne une usine à gaz non plus.

le Mercredi 14 novembre 2007 à 21:55

LEO

Hello !

Tout d’abord bravo pour ce petit script qui risque de s’avérer très utile … Cependant, je n’arrive à le faire fonctionner ni en local, ni sur un serveur de type OVH … Cela est très frustrant !
Au moment d’ouvrir le brooser, j’obtiens en effet le même message que Rey :
missing ) in parenthetical
http://127.0.0.1/brooser/mootools/Json.js
Line 68

J’ai beau utiliser la version complète de mootools 1.11 et/ou les fichiers .js séparés que tu appelles pour ta demo : rien n’y fait !
Aurais-tu une petite idée ? Merci par avance !

le Mardi 25 décembre 2007 à 12:42

Country

Bonjour LEO, même conseil que pour Rey, utilise Firebug pour savoir ce que te renvoi le serveur (oui, il manque vraiment quelque chose pour debugger, je vais y penser pour une future release).

le Vendredi 18 janvier 2008 à 20:06

jackadit

Bonjour,

j’ai essayé de tester ce script sans succès malheureusement.
firebug me révèle une erreur 500 !
The current action cannot be defined

Pourtant j’ai bien l’apparition de la div cachée mais vide !

Quel est mon erreur ?

Merci d’éclairer ma lanterne :-)

le Dimanche 10 février 2008 à 14:27

Country

Salut, dans Firebug, tu dois avoir une requête AJAX, quels sont les paramètres qui sont postés ? Normalement du doit avoir un paramètre action.

le Dimanche 10 février 2008 à 18:21

Jpeg

Salut et merci pour ton travail !
j’ai un petit soucis voila ce que me dit firebug :
Brooser.php (313ms)mootools.js (line 5215)
Json is not defined
[Break on this error] files = Json.evaluate(files);
merci d’avance.
Jpeg

le Mercredi 30 avril 2008 à 15:27

Country

Salut Jpeg, vérifie bien que tu insert bien les dépendances liées à Json dans Mootools. A noter aussi que Brooser n’est pas compatible avec la version 1.2 de Mootools, donc il te faut rester avec la 1.1.
J’ai commencé à le convertir pour la 1.2 mais ils font encore de gros changements dessus.
Je pense que je la publierai pour la prochaine Beta.

le Samedi 3 mai 2008 à 17:04

Ajouter un commentaire

Juste à l'instant


Warning: file_get_contents(http://ws.audioscrobbler.com/1.0/user/K1derCountry/recenttracks.xml) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/www/aab44823bc0e37b6d1f46896afcb58c9/web/modules/blogs/wp-content/plugins/rightnow/rightnow.php on line 31

Warning: file_get_contents(http://wakoopa.com/Country/feed/recently_used) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/www/aab44823bc0e37b6d1f46896afcb58c9/web/modules/blogs/wp-content/plugins/rightnow/rightnow.php on line 62