Filarr Drop · Développeurs

Intégrer Filarr Drop à votre site.

Un script et un élément HTML. Le formulaire s’affiche dans un cadre servi par drop.filarr.eu ; votre page ne voit passer ni fichier ni réponse.

← Filarr Drop

Le code minimal

L’application le produit pour vous, avec le bon identifiant et la bonne clé (Collecte › Formulaires du site › Intégrer). Le lien intérieur s’affiche si JavaScript est coupé.

<script src="https://drop.filarr.eu/v1/drop.js" defer></script>
<filarr-drop form="frm_8KQ2M7WZ4D1X" pk="<clé publique>" lang="fr">
  <a href="https://drop.filarr.eu/f/frm_8KQ2M7WZ4D1X#pk=<clé publique>">Envoyer des documents</a>
</filarr-drop>

La clé, la référence, la langue, le thème et l’origine de votre page passent au cadre dans le fragment de son adresse (après #) : ils ne sont jamais envoyés à un serveur.

Attributs

Attributs de l’élément filarr-drop
attribut	règle
`form`	Obligatoire. L’identifiant du formulaire, frm_ suivi de 12 caractères.
`pk`	Obligatoire. La clé publique du formulaire. Sans elle, l’élément n’affiche que son lien intérieur. Le cadre ne chiffre qu’à cette clé : si le serveur en donne une autre, il refuse de s’afficher.
`lang`	Facultatif. fr, en, de, es ou it. Par défaut, la langue choisie dans l’éditeur.
`mode`	Facultatif. inline (par défaut) affiche le formulaire ; button affiche un bouton qui charge le formulaire au clic.
`theme`	Facultatif. light, dark ou auto.
`reference`	Facultatif, 200 caractères au plus. Une référence de dossier, ajoutée à l’envoi et chiffrée avec lui.

Les attributs sont lus quand l’élément entre dans la page, et seulement là. Pour changer de formulaire, de clé ou de référence, remplacez l’élément.

Événements

Le cadre parle à votre page, jamais l’inverse. drop.js relaie ses messages en événements DOM sur l’élément. Ils remontent dans la page : un écouteur sur un parent les reçoit aussi.

Événements émis par l’élément filarr-drop
événement	detail
`filarr:ready`	`{}`	Le formulaire est affiché.
`filarr:submitted`	`{ receipt, files }`	Un envoi est terminé. receipt est le code de reçu en 12 caractères, sans tirets : affichez-le au format XXXX-XXXX-XXXX, comme le cadre. files est le nombre de fichiers envoyés.
`filarr:error`	`{ code }`	Un envoi a échoué. code est un code court, par exemple form_paused, rate ou too_large.

document.addEventListener('filarr:submitted', (event) => {
  const { receipt, files } = event.detail;
  const code = receipt.replace(/(.{4})(?=.)/g, '$1-'); // XXXX-XXXX-XXXX
  console.log(code, files);
});

Jamais de nom de fichier, de réponse ni de référence dans un événement.

Les événements ne sont émis que vers une page dont l’origine figure dans les sites autorisés du formulaire.

Sites autorisés

Dans l’éditeur du formulaire, listez les origines où il peut s’afficher. Le cadre ne s’affiche que là ; ailleurs, le navigateur le bloque. Une modification compte au bout d’une minute au plus.

https://hôte, ou https://hôte:port, exactement : pas de joker, pas de chemin.
Pour essayer sur votre poste : http://localhost:port ou http://127.0.0.1:port, avec le port.
Une liste vide : le formulaire ne s’affiche dans aucun site. Sa page sur drop.filarr.eu reste ouverte.

Politique de sécurité du contenu

Si votre site a une CSP, ajoutez drop.filarr.eu à ces deux directives. drop.js ne fait aucune autre requête que le cadre, et ne pose aucun cookie.

script-src … https://drop.filarr.eu;
frame-src … https://drop.filarr.eu;

Version figée

/v1/drop.js suit les corrections de la v1. Pour un code qui ne change jamais, chargez la version figée avec son empreinte d’intégrité :

<script src="https://drop.filarr.eu/v1.0.0/drop.js" integrity="sha384-iVPTsGWrlmwF1PZCIEmxKnyKWcVQIZnXG5VnZHWaFx8geCP7G0RbQoy/gguyTibX" crossorigin="anonymous" defer></script>

React

Chargez le script une seule fois. Donnez à l’élément une key qui change avec le formulaire, la clé ou la référence : React le remplace, et le nouvel élément relit ses attributs.

import { useEffect, useRef } from 'react';

const LOADER = 'https://drop.filarr.eu/v1/drop.js';

function loadDropOnce() {
  if (document.querySelector(`script[src="${LOADER}"]`)) return;
  const script = document.createElement('script');
  script.src = LOADER;
  script.defer = true;
  document.head.appendChild(script);
}

export function FilarrDrop({ form, pk, reference, onSubmitted }) {
  const ref = useRef(null);
  useEffect(loadDropOnce, []);
  useEffect(() => {
    const el = ref.current;
    if (!el || !onSubmitted) return;
    const handle = (event) => onSubmitted(event.detail);
    el.addEventListener('filarr:submitted', handle);
    return () => el.removeEventListener('filarr:submitted', handle);
  }, [form, pk, reference, onSubmitted]);
  return (
    <filarr-drop
      key={`${form}:${pk}:${reference ?? ''}`}
      ref={ref}
      form={form}
      pk={pk}
      reference={reference}
    >
      <a href={`https://drop.filarr.eu/f/${form}#pk=${pk}`}>Envoyer des documents</a>
    </filarr-drop>
  );
}

Next.js

Le composant touche au DOM : c’est un composant client. next/script charge drop.js une seule fois, même si le composant apparaît sur plusieurs pages.

'use client';

import Script from 'next/script';

export function FilarrDrop({ form, pk }) {
  return (
    <>
      <Script src="https://drop.filarr.eu/v1/drop.js" strategy="afterInteractive" />
      <filarr-drop key={`${form}:${pk}`} form={form} pk={pk}>
        <a href={`https://drop.filarr.eu/f/${form}#pk=${pk}`}>Envoyer des documents</a>
      </filarr-drop>
    </>
  );
}

WordPress

Une extension WordPress est en préparation. En attendant, collez le code minimal dans un bloc « HTML personnalisé ».

Et côté serveur ?

Il n’y a pas d’API ni de webhook dans cette version : les envois arrivent, chiffrés, dans le Filarr de celui qui a créé le formulaire.