#Développement d'extensions

#Extension des types de fichiers front-end

Pour les fichiers que vous avez téléversés, l'interface utilisateur côté client peut afficher différents aperçus en fonction de leur type. Le champ de pièce jointe du gestionnaire de fichiers intègre une fonction d'aperçu basée sur le navigateur (via un iframe), ce qui permet de visualiser directement la plupart des formats (images, vidéos, audio, PDF, etc.). Si un format de fichier n'est pas pris en charge par l'aperçu intégré du navigateur, ou si vous avez besoin d'une interaction d'aperçu spécifique, vous pouvez étendre les composants d'aperçu en fonction du type de fichier.

#Exemple

Par exemple, si vous souhaitez étendre un composant de carrousel pour les fichiers image, vous pouvez utiliser le code suivant :

import match from 'mime-match';
import { Plugin, attachmentFileTypes } from '@nocobase/client';

class MyPlugin extends Plugin {
  load() {
    attachmentFileTypes.add({
      match(file) {
        return match(file.mimetype, 'image/*');
      },
      Previewer({ index, list, onSwitchIndex }) {
        const onDownload = useCallback(
          (e) => {
            e.preventDefault();
            const file = list[index];
            saveAs(file.url, `${file.title}${file.extname}`);
          },
          [index, list],
        );
        return (
          <LightBox
            // discourageDownloads={true}
            mainSrc={list[index]?.url}
            nextSrc={list[(index + 1) % list.length]?.url}
            prevSrc={list[(index + list.length - 1) % list.length]?.url}
            onCloseRequest={() => onSwitchIndex(null)}
            onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
            onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
            imageTitle={list[index]?.title}
            toolbarButtons={[
              <button
                key={'preview-img'}
                style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
                type="button"
                aria-label="Download"
                title="Download"
                className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
                onClick={onDownload}
              >
                <DownloadOutlined />
              </button>,
            ]}
          />
        );
      },
    });
  }
}

attachmentFileTypes est un objet d'entrée fourni par le package @nocobase/client pour étendre les types de fichiers. Vous utilisez sa méthode add pour ajouter un descripteur de type de fichier.

Chaque type de fichier doit implémenter une méthode match() pour vérifier s'il répond aux exigences. Dans l'exemple, la méthode fournie par le package mime-match est utilisée pour vérifier l'attribut mimetype du fichier. Si le type correspond à image/*, il est considéré comme un type de fichier à traiter. Si la correspondance échoue, le système reviendra au traitement de type intégré.

La propriété Previewer de l'objet descripteur de type est le composant utilisé pour l'aperçu. Lorsque le type de fichier correspond, ce composant sera rendu pour afficher l'aperçu. Il est généralement recommandé d'utiliser un composant de type modale (comme <Modal />) comme conteneur de base, puis d'y placer le contenu de l'aperçu et les éléments interactifs pour implémenter la fonctionnalité d'aperçu.

#API

export interface FileModel {
  id: number;
  filename: string;
  path: string;
  title: string;
  url: string;
  extname: string;
  size: number;
  mimetype: string;
}

export interface PreviewerProps {
  index: number;
  list: FileModel[];
  onSwitchIndex(index): void;
}

export interface AttachmentFileType {
  match(file: any): boolean;
  Previewer?: React.ComponentType<PreviewerProps>;
}

export class AttachmentFileTypes {
  add(type: AttachmentFileType): void;
}

#attachmentFileTypes

attachmentFileTypes est une instance globale que vous importez depuis le package @nocobase/client :

import { attachmentFileTypes } from '@nocobase/client';

#attachmentFileTypes.add()

Enregistre un nouveau descripteur de type de fichier auprès du registre des types de fichiers. Le type du descripteur est AttachmentFileType.

#AttachmentFileType

#match()

Une méthode pour faire correspondre les formats de fichiers.

Le paramètre file est un objet de données pour le fichier téléversé, contenant des propriétés qui peuvent être utilisées pour la vérification du type :

• mimetype : La description du mimetype du fichier.
• extname : L'extension du fichier, incluant le ".".
• path : Le chemin de stockage relatif du fichier.
• url : L'URL du fichier.

Retourne une valeur de type boolean, indiquant le résultat de la correspondance.

#Previewer

Un composant React pour prévisualiser le fichier.

Les propriétés (Props) sont :

• index : L'index du fichier dans la liste des pièces jointes.
• list : La liste des pièces jointes.
• onSwitchIndex : Une fonction pour changer l'index du fichier prévisualisé.

La fonction onSwitchIndex peut être appelée avec n'importe quel index de la list pour passer à un autre fichier. Si vous l'appelez avec null comme paramètre, le composant d'aperçu sera directement fermé.

onSwitchIndex(null);