Tutorial: Un système de gestion d'images complet pour son site #1 Upload

Dans ce nouveau tutorial, nous allons voir comment créer en plusieurs étapes un système de gestion d'images complet en PHP pour vos sites web.

L'objectif de ce tutorial est de pouvoir:

• Uploader une ou plusieurs images d'un coup à partir de son pc
• Redimensionner automatiquement et traiter les images uploadées (Version watermark et version originale)
• Ajouter un explorateur d'images pour pouvoir les insérer dans nos billets / articles avec TinyMCE

Plan du tuto:

• Mise en place de la popup d'Upload
• Utilisation d'une classe d'Upload pour gérer l'upload des images
• Création des images redimensionnées et avec watermark
• Modification d'un plugin TinyMCE pour l'exploration et l'insertion de nos images

Mise en place de la popup d'Upload: FancyUpload

La première étape consiste à mettre en place le système d'upload.

Choix de l'uploader

Il existe plusieurs solutions d'upload: Java, Ajax/PHP, Flash/PHP.

J'ai décidé d'opter pour la solution Ajax/PHP qui me semble plus light et tout aussi bien réussie visuellement (Progress bar etc.).

Comme notre but n'est pas de réinventer la roue, nous allons utiliser un plugin Mootools: FancyUpload

Ce plugin n'est pas 100% Ajax car il utilise aussi le Flash Swiff en background.

Il faut donc Mootools + Flash 10 pour faire marcher notre uploader.

Téléchargez Mootools si vous ne l'avez pas encore.

Téléchargez le pack FancyUpload

Arborescence de notre système

Avant le mettre en place notre uploader, nous allons créer l'arborescence de notre système de gestion d'images.

Voici l'arbo que je vais utiliser pour le tutorial:

class/ contiendra les classes PHP que nous utiliserons.

web/ le répertoire web du projet, il contiendra le fichier index.php

web/css/ contiendra toutes les feuilles de style

web/images/ contiendra toutes les images uploadées.

web/images/.mini/ contiendra toutes les images en version miniature (Pour les listes)

web/images/.orig/ contendra les images en version originales (Sans aucun traitement)

web/js/ contiendra tous les fichiers Javascript (Mootools, FancyUpload ...)

Fichiers PHP:

web.index.php : La page permettant la rédaction d'un billet, article ... avec notre zone TInyMCE.

web/uploader.php : Page popup permettant d'uploader nos images sans quitter la page index.php.

web/doUpload.php : Script PHP qui va contrôler l'upload et traiter les images.

A vous d'adapter le tutorial aux contraintes et besoins de votre site.

Mise en place de notre POPUP uploader

Nous allons maintenant créer une popup Uploader (uploader.php) qui pourra être lancée à partir de notre index.php.

1) Insertion des librairies Javascript

Créez le fichier web/uploader.php si ce n'est pas encore fait. Puis ajoutez les scripts JS dans votre balise head.

    <script type="text/javascript" src="/js/mootools.js"></script>
    <script type="text/javascript" src="/js/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="/js/Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="/js/FancyUpload2.js"></script>

2) Création du formulaire d'upload

Nous allons maintenant ajouter le code du formulaire:

<form action="/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
	<fieldset id="demo-fallback">
		<label for="demo-photoupload">
			Upload images:
			<input type="file" name="photoupload" id="demo-photoupload" />
		</label>
	</fieldset>

	<div id="demo-status" class="hide">
		<p>
			<a href="#" id="demo-browse">Explorer les fichiers</a> |
			<input type="checkbox" id="demo-select-images" checked /> Images uniquement |
			<a href="#" id="demo-clear">Effacer la liste</a> |
			<a href="#" id="demo-upload">Upload !</a>
		</p>
		<div>
			<strong class="overall-title">Progression totale</strong><br />
			<img src="/images/assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title">Progression du fichier</strong><br />
			<img src="/images/assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>
		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>
</form>

Vérifiez d'avoir bien mis les images de la progress bar dans le répertoire /images/assets/progress-bar/.

Notre formulaire appellera le fichier doUpload.php qui sera chargé de la validation et du traitement des images.

A vous de rajouter un peu de style à votre Uploader avec du CSS.

Pour les plus fainéants, voici un style par défaut pour votre Uploader:

body {
    font-family: Arial, Verdana;
    font-size: 12px;
}
h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #5b2b2b;
    font-family: Verdana, Arial, Tahoma;
    margin-bottom: 4px;
}
#demo-status
{
    background-color:        #F9F7ED;
    padding:                10px 15px;
    width:                    420px;
}

#demo-status .progress
{
    background:                white url(/images/assets/progress-bar/progress.gif) no-repeat;
    background-position:    +50% 0;
    margin-right:            0.5em;
}

#demo-status .progress-text
{
    font-size:                0.9em;
    font-weight:            bold;
}

#demo-list
{
    list-style:                none;
    width:                    350px;
    margin:                    0;
}

#demo-list li.file
{
    border-bottom:            1px solid #eee;
    background:                url(/images/assets/file.png) no-repeat 4px 4px;
}
#demo-list li.file.file-uploading
{
    background-image:        url(/images/assets/uploading.png);
    background-color:        #D9DDE9;
}
#demo-list li.file.file-success
{
    background-image:        url(/images/assets/success.png);
}
#demo-list li.file.file-failed
{
    background-image:        url(/images/assets/failed.png);
}

#demo-list li.file .file-name
{
    font-size:                1.2em;
    margin-left:            44px;
    display:                block;
    clear:                    left;
    line-height:            40px;
    height:                    40px;
    font-weight:            bold;
}
#demo-list li.file .file-size
{
    font-size:                0.9em;
    line-height:            18px;
    float:                    right;
    margin-top:                2px;
    margin-right:            6px;
}
#demo-list li.file .file-info
{
    display:                block;
    margin-left:            44px;
    font-size:                0.9em;
    line-height:            20px;
}
#demo-list li.file .file-remove
{
    clear:                    right;
    float:                    right;
    line-height:            18px;
    margin-right:            6px;
}

Si vous n'avez pas les images, téléchargez le pack d'images du tutorial.

3) Ajout de la couche Javascript FancyUpload

Nous avons beau avoir inséré nos librairies javascript, maintenant il faut faire reconnaitre le formulaire à FancyUpload.

Après votre balise body ou même dans le head, ajoutez le code Javascript suivant:

window.addEvent('load', function() {

	var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
		url: $('form-demo').action,
		fieldName: 'photoupload',
		path: '/js/Swiff.Uploader.swf',
		limitSize: 2 * 1024 * 1024, // 2Mb
		onLoad: function() {
			$('demo-status').removeClass('hide');
			$('demo-fallback').destroy();
		},
		// The changed parts!
		debug: true, // enable logs, uses console.log
		target: 'demo-browse' // the element for the overlay (Flash 10 only)
	});

	filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
	swiffy.options.typeFilter = filter;
	/**
	 * Various interactions
	 */

	$('demo-browse').addEvent('click', function() {
		/**
		 * Doesn't work anymore with Flash 10: swiffy.browse();
		 * FancyUpload moves the Flash movie as overlay over the link.
		 * (see opeion "target" above)
		 */
		swiffy.browse();
		return false;
	});

	/**
	 * The *NEW* way to set the typeFilter, since Flash 10 does not call
	 * swiffy.browse(), we need to change the type manually before the browse-click.
	 */
	$('demo-select-images').addEvent('change', function() {
		var filter = null;
		if (this.checked) {
			filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
		}
		swiffy.options.typeFilter = filter;
	});

	$('demo-clear').addEvent('click', function() {
		swiffy.removeFile();
		return false;
	});

	$('demo-upload').addEvent('click', function() {
		swiffy.upload();
		return false;
	});

});

Vous pouvez bien sûr adapter les ID suivant ce que vous avez mis lors de l'étape 2.

A cette étape, notre popup uploader est prête.

Lien vers notre popup Uploader

Ouvrez le fichier index.php, et rajoutez le lien suivant où vous souhaitez:

<a onclick="window.open ('uploader.php', 'Uploader vos images', config='height=400, width=470, toolbar=no, 
menubar=no, scrollbars=yes, resizable=no, location=no, directories=no, status=no'); return false;" 
href="uploader.php">Uploader des images pour le billet</a>

Vous pouvez maintenant tester si l'uploader se lance correctement et si toutes les images et explorateur fonctionnent bien.

Voilà ce que vous devriez obtenir à quelque chose prêt.

Si ce n'est pas le cas, vérifiez que vous avez bien mis vos images dans les bons répertoires, que vous avez bien chargé les Javascripts et que vous avez bien mis le fichier Flash Swiff.Uploader.swf dans le répertoire js/

Fin de la première partie du tutorial

Voilà pour la première étape. Pour le moment, nous avons mis en place l'aspect visuel de notre Uploader.

Prochaine étape, contrôler les images uploadées et les rediriger dans les répertoires dédiés avec une classe PHP5.

AIde et support: Un topic dédié au tutorial a été créé sur le forum. Merci de l'utiliser si vous rencontrez un problème quelconque. (Pas de support sur les commentaires).

Etape 2: Utilisation d'une classe d'Upload pour gérer l'upload des images