Ponlo en tu app Sin framework

Sin framework

Lo que monta <FileDrive> es de @rebofiles/drive, que no necesita framework: Vue, Svelte, Angular o una página de HTML simple. Recibe las mismas opciones y se vuelve a dibujar cambiando solo lo distinto, así que el foco y el desplazamiento se quedan donde estaban.

Empezar

Móntalo

import { mountDrive, mountSharedLink } from '@rebofiles/drive';
import { pictureOfDocx, previewDocx, textOfDocx, thumbDocx, viewDocx } from '@rebofiles/drive/rebodocs';

const drive = mountDrive(document.getElementById('files')!, {
  base: '/api/files',
  theme: 'auto',
  previewDocument: previewDocx,
  viewDocument: viewDocx,
  thumbDocument: thumbDocx,
  pictureDocument: pictureOfDocx,
  textDocument: textOfDocx,
  onChange: () => refreshTheRestOfThePage(),
});

drive.update({ language: 'es' });  // other options, as a framework gives them again
drive.refresh();                   // after a change made elsewhere
drive.destroy();

// What someone sent a link sees:
mountSharedLink(document.getElementById('shared')!, { token: new URLSearchParams(location.search).get('link')! });

Piezas

Las piezas que tiene debajo

Todas se exportan, para una interfaz propia sin React.

Nombre	Qué es
createDriveClient	Una función por cada ruta del servidor; subidas en partes que se reanudan.
createUploads	La cola de subidas: tres a la vez, velocidad, tiempo restante, preguntar por lo que ya existe.
lookInDrive	Lo que busca un archivo en el drive antes de subirlo.
readDropped, readChosen	Los archivos de las carpetas soltadas o elegidas, con sus rutas.
downloadZip, writeZip	Un .zip hecho en la página, a medida que llegan sus archivos.
renditionsOf, placeholderOf	Las imágenes reducidas de una imagen, y su placeholder.
textOf, hashOf	Lo que está escrito en un archivo, y su SHA-256.
CSS, TEXTS, translator	El aspecto, limitado a .rf-drive, y las palabras.

import { createDriveClient, createUploads, formatDuration, lookInDrive } from '@rebofiles/drive';

const client = createDriveClient({ base: '/api/files' });
const uploads = createUploads(client, { check: lookInDrive(client), onChange: draw });
uploads.add(input.files, folderId);
// uploads.items, uploads.summary(): what to draw; stop, retry, decide, dismiss, clear