Envois de fichier (TheUpload)

Sommaire

  1. Présentation
    1. Syntaxe et débogage
    2. Exemple 1 (normal)
    3. Exemple 2 (erreur de traitement)
    4. Exemple 3 (erreur 404)
  2. Traitement du fichier
  3. Informations complémentaires
  4. Méthodes publiques

Modifier les options

apijs.config
apijs.config.dialog
apijs.config.upload

Présentation

Gestion de l'envoi de fichier en mode asynchrone (AJAX).

Veuillez noter que bien que la taille et l'extension du fichier soient vérifiées avant l'envoi du formulaire, il est important que le script qui réceptionne le fichier revérifie ces données.

Syntaxe et débogage

Exemple 1 en fonctionnement normal

Exemple 2 avec une erreur de traitement

Exemple 3 avec une erreur 404

Traitement du fichier

Voici une implémentation minimale du fichier qui traite le fichier avant de l'enregistrer sur le serveur.

Celui-ci doit prendre en charge les 3 paramètres suivants : $_FILES['myInputImage'], $_GET['noAjax'] et $_GET['isAjax'].
- Deux réponses possibles : soit une redirection vers une autre page (1), soit un message texte (2).
- Deux messages possibles : soit success-fileid, soit un message d'erreur.

# stop output buffering with apache
# <Location ~ "this_file">
#     php_flag zlib.output_compression off
# </Location>
# stop output buffering with lighttpd
# $HTTP["url"] =~ "this_file" {
#     server.stream-response-body = 2
# }
# stop output buffering in the script (http://stackoverflow.com/a/25835968)
# the echo move the progress bar to 100%
if (!empty($_GET['isAjax']) && empty($_GET['noAjax'])) {
    header('Content-Encoding: chunked', true);
    header('Content-Type: text/plain; charset=utf-8');
    header('Cache-Control: no-cache, must-revalidate');
    ini_set('output_buffering', false);
    ini_set('implicit_flush', true);
    ob_implicit_flush(true);
    for ($i = 0; $i < ob_get_level(); $i++)
        ob_end_clean();
    echo ' ';
}

try {
    $file = tempnam(sys_get_temp_dir(), '');                    # = /tmp/anDY8jnU
    move_uploaded_file($_FILES['myInputImage']['name'], $file);
    $result = 'success-'.basename($file);                       # = success-anDY8jnU
}
catch (Exception $e) {
    $result = $e->getMessage();
}

if (empty($_GET['isAjax']) || !empty($_GET['noAjax']))
    header('Location: xyz.php?image='.rawurlencode($result).'&noAjax=true'); # (1)
else
    echo $result; # (2)

Lorsque le traitement AJAX se passe bien, le script doit renvoyer success-fileid.
Le fileid est transmis à la fonction callback de la manière suivante : callback(fileid, args).

Informations complémentaires

Le paramètre inputname correspond au nom du champ fichier du formulaire.
Le paramètre maxsize correspond à la taille maximale autorisée en mégaoctet.
Le paramètre extensions correspond à la liste des extensions autorisées (* pour toutes ; jpg,png pour jpg/png ; jpg pour jpg).

Pour le paramètre icon, les classes CSS suivantes :
- peuvent être utilisées ou modifiées : debug print error warning
- ne peuvent pas être utilisées ou modifiées : start ready end slideshow loading
- ne peuvent pas être modifiées mais peuvent être utilisées : notransition lock
- ne peuvent pas être utilisées mais peuvent être modifiées : information confirmation options upload download progress waiting photo video

En fonction de la taille de la fenêtre, le design des boîtes de dialogue s'adapte automatiquement (media queries). En fonction des modifications que vous pourriez être amené à faire, le code CSS suivant pourra vous être utile :

@media screen and (max-width:30rem),(max-device-width:30rem) { ... }
# 30rem = #apijsBox.width [26rem] + 4

Méthodes publiques

apijs.i18n.translate('word');
apijs.i18n.nodeTranslate('word');
apijs.i18n.changeLang('fr');

apijs.upload.sendFile(...);

apijs.dialog.dialogInformation(...);
apijs.dialog.dialogConfirmation(...);
apijs.dialog.dialogFormOptions(...);
apijs.dialog.dialogFormUpload(...);
apijs.dialog.dialogProgress(...);
apijs.dialog.dialogWaiting(...);
apijs.dialog.dialogPhoto(...);
apijs.dialog.dialogVideo(...);
apijs.dialog.actionClose();
apijs.dialog.styles.remove('string');