Skip to main content

Uploader des fichiers via un JSON Schema

caution

Un fichier encodé au format base64 va entraîner une augmentation de 33% à 300% comparativement à sa taille initiale, source MDN.

Création d'un JSON Schema​

La première étape consiste à créer un JSON Schema, vous pouvez réaliser cette opération lors de la configuration d'un type de contenu ou donnée. Votre schéma devra définir une propriété de type data-url qui permettra de sélectionner un fichier à partir du formulaire qui sera généré.

Pour notre exemple, nous allons configurer un type de contenu Page pour permettre l'ajout de fichiers ne devant pas être accessibles depuis la médiathèque :

JSON Schema
{
  "properties": {
    "files": {
      "type": "array",
      "title": "Fichiers",
      "items": {
        "properties": {
          "name": {
            "type": "string",
            "title": "Nom du fichier"
          },
          "base64": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    }
  }
}

Image

Contraintes sur les fichiers​

Vous pouvez ajouter des contraintes afin de définir les types de fichiers autorisés par l'intermédiaire d'un UI Schema :

UI Schema
{
  "files": {
    "items": {
      "base64": {
        "ui:options": {
          "accept": [".pdf", ".svg"]
        }
      }
    }
  }
}
caution

La validation d'un UI Schema est réalisée seulement au niveau du navigateur.

Création d'une page de contenu​

Nous pourrons observer depuis l'onglet Personnalisation le formulaire correspondant au JSON Schema préalablement configuré :

Image

Concernant le fichier de sortie, vous pourrez observer la génération d'une propriété files qui contient la liste des fichiers encodés en base64 :

Image

Exploiter les fichiers​

Page.js
import Svg from "../Page/Svg"
import Pdf from "../Page/Pdf"

export default function Page({ page }) {
    return (
        <>
            <h1>{page.title}</h1>
            {
                page.files?.map((file, index) => {
                    const fileType = file.base64.split(";").shift()
                    switch (fileType) {
                        case "data:image/svg+xml":
                            return <Svg key={index} file={file} />
                        case "data:application/pdf":
                            return <Pdf key={index} file={file} />
                        default:
                            return <span>Undefined file type</span>
                    }
                })
            }
        </>
    )
}
Svg.js
export default function Svg({ file }) {
    return (
        <img src={file.base64} alt={file.name}/>
    )
}
Pdf.js
export default function Pdf({ file }) {
    return (
        <object data={file.base64} type="application/pdf" width="100%" height="500px">
            <p>Unable to display PDF file. <a href={file.base64}>Download</a> instead.</p>
        </object>
    )
}