Documentation du Widget Téléchargement de Fichiers

Le widget Téléchargement de Fichiers permet aux utilisateurs de télécharger un ou plusieurs fichiers dans votre application avec des options de configuration avancées pour la validation des fichiers, le stockage et l'expérience utilisateur.

Aperçu​

Le widget Téléchargement de Fichiers fournit une interface robuste de téléchargement de fichiers avec support pour:

• Téléchargements multiples de fichiers
• Validation du type de fichier
• Limitations de la taille des fichiers
• Fonctionnalité de glisser-déposer
• Intégration de stockage en cloud (AWS S3)
• Style et validation personnalisés

Configuration de Base​

Paramètres Globaux​

Nom​

• Champ: Nom
• Description: Nom d'affichage du widget
• Type: Saisie de texte
• Requis: Oui

Variable/Modèle​

• Champ: Variable/Modèle
• Description: Propriété du modèle de données qui stockera le tableau de fichiers téléchargés
• Type: Saisie de texte
• Requis: Oui
• Exemple: uploadedFiles

Configuration du Téléchargement​

Limite de Fichiers​

• Champ: Limite
• Description: Nombre maximum de fichiers qui peuvent être téléchargés
• Type: Saisie numérique
• Par défaut: Aucune limite
• Exemple: 5 (permet jusqu'à 5 fichiers)

Types de Fichiers​

• Champ: Types de fichiers
• Description: Types MIME de fichiers acceptables
• Type: Saisie de texte
• Format: Types MIME séparés par des virgules
• Exemples:
  • image/* (tous les types d'images)
  • image/jpeg,image/png,image/gif (types d'images spécifiques)
  • application/pdf (uniquement les fichiers PDF)
  • image/*,application/pdf (images et PDFs)
• Référence: Types MIME MDN

Taille des Fichiers​

• Champ: Taille du fichier
• Description: Taille maximale de fichier autorisée par fichier
• Type: Saisie numérique
• Unité: Octets
• Exemple: 26214400 (25 Mo en octets)
• Remarque: La limite du serveur est 25 Mo par défaut

Interface de Téléchargement​

Glisser-Déposer​

• Champ: Glisser-Déposer
• Description: Activez l'interface de téléchargement de fichier glisser-déposer
• Type: Commutateur à bascule
• Par défaut: Désactivé
• Lorsqu'activé: Affiche une zone de dépôt avec une icône de téléchargement
• Lorsque désactivé: Affiche un bouton pour la sélection de fichiers

Texte du Bouton​

• Champ: Bouton
• Description: Texte affiché sur le bouton de téléchargement
• Type: Saisie de texte
• Par défaut: "Choisir des Fichiers"
• Exemple: "Télécharger des Images"

Texte Conseil​

• Champ: Conseil
• Description: Texte d'assistance affiché sous la zone de téléchargement
• Type: Saisie de texte
• Exemple: "Formats supportés: JPG, PNG, PDF. Taille max: 25 Mo"

Stockage AWS S3​

• Champ: Stocker dans S3
• Description: Stockez les fichiers téléchargés dans le compartiment AWS S3 au lieu du stockage local
• Type: Commutateur à bascule
• Par défaut: Désactivé
• Exigences: Le compartiment S3 doit être configuré dans votre compte
• Remarque: Ce sera l'option par défaut dans les versions futures

Accès Public aux Fichiers​

• Champ: Fichier public
• Description: Rendre les fichiers téléchargés accessibles publiquement
• Type: Commutateur à bascule
• Par défaut: Désactivé
• Effet: Les fichiers peuvent être accédés sans authentification

Validation et Règles​

Validation Intégrée​

Le widget valide automatiquement:

• Type de fichier par rapport aux types MIME acceptés
• Taille du fichier par rapport à la limite de taille maximale
• Nombre de fichiers par rapport à la limite

Règles de Validation Personnalisées​

Vous pouvez ajouter des règles de validation personnalisées dans la section Règles:

• Requis: Rendre le champ obligatoire
• Règles Personnalisées: Ajouter des fonctions de validation JavaScript

Validation Basée sur l'Écran​

Configurez le comportement du widget par écran dans la section Validation:

• Disponible: Afficher/masquer le widget sur des écrans spécifiques
• Visible: Contrôler la visibilité avec des conditions
• Requis: Rendre le champ requis sur des écrans spécifiques
• Désactiver: Désactiver le widget sur des écrans spécifiques

Style et Mise en Page​

Style de Base​

• Largeur: Définissez la largeur du widget (unités CSS)
• Classe: Ajoutez des classes CSS personnalisées
• Classes Dynamiques: Définissez les classes en fonction des conditions

Options de Mise en Page​

• Mise en Page: Choisissez entre l'affichage bloc ou inline
• Bordure: Activez/désactivez la bordure autour du widget

Événements et Actions​

Événement On Click​

• Champ: On click
• Description: Fonction JavaScript exécutée lorsque des fichiers sont téléchargés/supprimés
• Contexte: Accédez aux fichiers téléchargés via la variable du modèle
• Variables Disponibles:
  • SF_input: Objet contenant les informations du fichier
  • SF_currentIndex: Index dans les contextes de boucle

Exemples d'Utilisation​

Téléchargement Basique de Fichier​

Téléchargement de Document avec Plusieurs Fichiers​

Configuration du Stockage S3​

Configuration Avancée​

Visibilité Conditionnelle​

Définissez le widget pour afficher/masquer en fonction des autres valeurs du formulaire:

Gestion des Erreurs​

Scénarios d'Erreur Courants​

1. Type de Fichier Non Accepté: "Le type de fichier n'est pas acceptable!"
2. Fichier Trop Volumineux: "La taille du fichier ne peut pas dépasser [maxSize] octets!"
3. Trop de Fichiers: "La limite est [limit][fichiers](/docs/fr/ressources/global/files)!!"
4. Erreur Serveur: "La taille du fichier à télécharger dépasse la limite de 25 Mo."

Meilleures Pratiques​

1. Limites de Fichiers: Définissez des limites de fichiers raisonnables en fonction de la capacité de votre serveur
2. Commentaires Utilisateur: Fournissez toujours un texte conseil clair sur les formats et les tailles acceptés
3. Validation: Utilisez à la fois la validation côté client et côté serveur
4. Stockage: Envisagez d'utiliser S3 pour une meilleure performance et scalabilité
5. Sécurité: Soyez prudent avec les paramètres de fichier public
6. UX: Utilisez le glisser-déposer pour une meilleure expérience utilisateur
7. Messages d'Erreur: Fournissez des messages d'erreur clairs et exploitables

Notes d'Intégration​

• Les fichiers sont automatiquement téléchargés vers /api/v1/files/fileupload ou /api/v1/files/fileupload-s3
• Le widget s'intègre avec le système de gestion de fichiers du projet
• Les fichiers téléchargés sont associés à l'ID de projet actuel
• Les métadonnées des fichiers sont stockées dans la variable de modèle spécifiée sous forme de tableau