File upload - Téléversement de fichier

Composants permettant à l’utilisateur de sélectionner et envoyer un ou plusieurs fichiers.

Exemples

Taille

Défaut

Petit

Grand

État

Erreur (Error)

Erreurs multiples

Requis (Required)

Inactif (Disabled)

Sélection multiple

Avec un libellé de bouton personnalisé

Avec la liste des fichiers sélectionnés

Zone de glisser/déposer

Défaut

Small

Large

Erreur

Désactivé

Avec des items dynamiques


                                                        
                                                        
                                                            const myFileUpload = canvasElement.querySelector('dsa-file-upload')!;
                                                        
                                                        myFileUpload.addEventListener('dsa-file-upload', (event) => {
                                                            const items = event.detail.files;
                                                            myFileUpload.innerHTML = items
                                                            .map(
                                                                (file, index) =>
                                                                `<dsa-file-upload-item data-index="${index}">${file.name}</dsa-file-upload-item>`
                                                            )
                                                            .join('');
                                                        });
                                                        
                                                        myFileUpload.addEventListener('dsa-clear', (event) => {
                                                            const target = event.target as HTMLElement & {
                                                            dataset: { index: string };
                                                            };
                                                            const indexToRemove = Number(target.dataset.index);
                                                            myFileUpload.removeFile(indexToRemove);
                                                        });

Code TS associé