Skip to content
This repository has been archived by the owner on Jun 30, 2020. It is now read-only.

Fonctionnement technique

Matthieu Marcillaud edited this page Jul 30, 2019 · 3 revisions

Fonctionnement technique

Le fonctionnement général s'appuie sur les formulaires CVT de SPIP et sur un token généré par la balise #BIGUP_TOKEN

Il y a deux parties indépendantes :

1. Trouver les fichiers en attente

Pour chaque formulaire qui le demande, une recherche des fichiers téléversés pour ce formulaire par l'auteur connecté et qui sont en encore en attente d'utilisation est réalisée.

La demande consiste à envoyer la clé _bigup_rechercher_fichiers dans le retour de la fonction charger(). Ce plugin comprendra qu'il doit retrouver les éventuels fichiers. La liste de ses trouvailles est ajouté dans l'environnement du formulaire, sous la même clé que le nom du champ.

  • Si l'input a name="fichier", #ENV{fichier} sera un tableau décrivant le fichier (si un fichier est déjà présent).
  • Si l'input a name="fichiers[]", #ENV{fichiers} sera une liste d'éléments (si un ou plusieurs fichiers sont déjà présents). Chaque élément étant un tableau décrivant un fichier.

Les fichiers en attente sont stockés selon un répertoire précis, qui dépend du formulaire, de l'auteur, du champ (name de l'input), du fichier lui-même, dans le répertoire _DIR_TMP/bigupload.

Pour plus de détails sur ce répertoire, lire : stockage temporaire des fichiers

2. Téléverser des fichiers en javascript

Le JavaScript utilise la librairie Flow.js pour téléverser les fichiers. Elle découpe un fichier en morceau, et pour chaque morceau fait une demande au serveur pour savoir s'il possède déjà ce morceau. S'il ne l'a pas, ce morceau est téléversé.

La réception côté PHP est gérée dans un fichier d'action (bigup.php) qui retourne simplement un header PHP avec le statut http correspondant au traitement qui a été fait, parfois associé à un json contenant quelques informations.

L'autorisation de déposer un fichier est conditionnée à un token calculé à partir des informations du formulaire, de l'auteur en cours et de l'heure.

Ce token doit être renseigné dans l'attribut data-token de l'input. Si l'input possède la classe css bigup alors le JavaScript prendra en compte ce champ (une zone de glisser déposer apparaît) à l'aide de Flow.js.

Le token

Le token peut être calculé en utilisant la balise #BIGUP_TOKEN{nom} où 'nom' est la valeur du name de l'input. La balise doit accéder à #ENV{form} et #ENV{formulaire_args}. Plus de détail sur la balise #BIGUP_TOKEN

Le token est valide 24h par défaut (afficher le formulaire donne systématiquement un nouveau token).

La balise #SAISIE_FICHIER

La balise #SAISIE_FICHIER est une extension à la balise #SAISIE qui ajoute automatiquement en plus dans l'environnement de la saisie concernée les valeurs form et formulaire_args qui pourront servir à la balise #BIGUP_TOKEN. Elle transmet également, dans la clé fichiers la liste des fichiers présents de ce formulaire.

Plus de détail sur la balise #SAISIE_FICHIER

La saisie bigup

Le plugin dispose d'une saisie bigup à laquelle on peut passer un certain nombre d'options. Les plus utiles sont :

  • accept : pour limiter à certains types de fichier acceptés (comme la valeur de l'attribut html5)
  • multiple : pour autoriser plusieurs fichiers pour ce champ.

Exemple :

[(#SAISIE_FICHIER{bigup, images, 
    label=Des images (par mime type),
    accept=image/*,
    multiple=oui})]

[(#SAISIE_FICHIER{bigup, cv, 
    label=Un fichier pdf (par extension),
    accept=.pdf})]

Plus de détails sur la saisie bigup

Les nettoyages

Les fichiers stockés dans _DIR_TMP/bigupload peuvent à tout moment être supprimés manuellement sans que cela n'affecte grandement le fonctionnement du site (sauf pour ceux qui utilisaient un formulaire avec de tels fichiers évidemment).

Bigup cependant s'occupe de nettoyer dès qu'il le peut son répertoire cache (dès qu'il comprend qu'un fichier a été utilisé ou aurait du l'être), et également enlève les vieux fichiers via une tâche périodique.

Pour plus de détails lire : les nettoyages des fichiers

Création d'un formulaire pour téléverser les fichiers

Pour qu'il soit compatible à la fois avec et sans javascript, il va falloir prendre en compte, côté PHP et HTML, un certain nombre d'éléments.

Côté HTML

Le formulaire (la balise <form>) doit être posté et autoriser les fichiers (multipart/form-data) ce qui revient à écrire la plupart du temps :

<form method="post" action="#ENV{action}" enctype="multipart/form-data">

Les input qui autorisent plusieurs fichiers doivent l'indiquer :

  • avec un nom de variable tableau, tel que name='fichiers[]'
  • avec la propriété multiple

La saisie bigup s'occupe de cela dès lors que l'option multiple est activée.

Côté PHP

Pour recréer le tableau $_FILES tel que le crée habituellement PHP, il faut connaître la valeur de l'attribut name de la balise input. Cette valeur est transmise avec le token calculé, et est inscrite dans le chemin de cache des fichiers reçu. Cela permet, à partir d'un fichier cache donné, de recréer le $_FILES qui lui correspondait.

Note sur les input file html5

Clone this wiki locally