upload-manager-module

Module réutilisable : composant FileUpload + hook useFileUpload pour l’upload vers Backblaze B2 (API déployée sur Railway).

Pour l’utiliser distant / en ligne dans tes autres projets, il faut d’abord le publier sur npm (une fois). Voir PUBLISH-NPM.md.

Installation (depuis internet, après publication)

Une fois le package publié sur npm :

npm install @TON_USERNAME/upload-manager

Ou si tu as gardé le nom sans scope :

npm install upload-manager-module

Remplace TON_USERNAME par ton username npm (ex. @danielbug25/upload-manager). Le module est alors installé depuis npm (en ligne), pas depuis un chemin local.

Installation en local (avant ou sans publication)

Pour tester sans publier, depuis un autre projet sur ta machine :

npm install /chemin/vers/upload-manager/packages/upload-module

Dépendances requises dans le projet qui utilise le module

Le module déclare en peerDependencies :

• react (>= 18)
• react-dom (>= 18)
• lucide-react
• sonner

Donc dans ton autre projet :

npm install lucide-react sonner

Et afficher les toasts (ex. dans le layout) :

import { Toaster } from "sonner";
// ...
<Toaster richColors position="top-center" />

Variables d’environnement (projet qui utilise le module)

Dans ton autre projet, dans .env.local :

NEXT_PUBLIC_UPLOAD_API_URL=https://upload-manager-api-production.up.railway.app

(Sinon cette URL est déjà la valeur par défaut dans le module.)

Utilisation dans l’autre projet

Avec le composant FileUpload

"use client";

import { useState } from "react";
import { FileUpload, useFileUpload } from "upload-manager-module";  // ou "@ton-username/upload-manager"
import { Upload } from "lucide-react";

export function MaPage() {
  const [file, setFile] = useState<File | null>(null);
  const [fileUrl, setFileUrl] = useState<string | undefined>();
  const [fileKey, setFileKey] = useState<string | undefined>();

  return (
    <FileUpload
      onFileSelect={(selectedFile, url, fileName) => {
        setFile(selectedFile ?? null);
        setFileUrl(url);
        setFileKey(fileName); // clé B2 pour delete ou BDD
      }}
      selectedFile={file}
      selectedUrl={fileUrl}
      accept="image/*,.pdf"
      label="Fichier"
      description="Glissez ou cliquez pour choisir"
      icon={Upload}
      maxSize={5 * 1024 * 1024}
    />
  );
}

Avec le hook uniquement

import { useFileUpload } from "upload-manager-module";

function MonComposant() {
  const { handleFileSelectWithValidation, deleteFile } = useFileUpload();

  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const result = await handleFileSelectWithValidation(f, {
      maxSize: 5 * 1024 * 1024,
      accept: "image/*",
    });
    if (result) {
      console.log("URL:", result.url, "Clé:", result.fileName);
    }
  };

  return <input type="file" onChange={handleChange} accept="image/*" />;
}

Résumé

1. Installer le module (local, Git ou npm).
2. Installer les peer deps : lucide-react, sonner (et avoir React).
3. Configurer NEXT_PUBLIC_UPLOAD_API_URL si besoin.
4. Importer FileUpload et/ou useFileUpload depuis upload-manager-module et les utiliser comme ci‑dessus.

L’API backend est déjà en ligne ; le module ne fait qu’appeler cette API depuis ton projet.