Put it in your app Without a framework

Without a framework

What <FileDrive> mounts is @rebofiles/drive’s, which needs no framework: Vue, Svelte, Angular, or a page of plain HTML. It takes the same options, and renders itself again changing only what differs, so the focus and what is scrolled stay where they were.

Start

Mount it

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')! });

Pieces

The pieces under it

Each is exported, for an interface of your own without React.

Name	What it is
createDriveClient	One function per route of the server; uploads in parts that resume.
createUploads	The queue of uploads: three at a time, speed, time left, asking about what is there.
lookInDrive	What looks for a file in the drive before it goes.
readDropped, readChosen	The files of folders dropped or chosen, at their paths.
downloadZip, writeZip	A .zip made in the page, as its files come.
renditionsOf, placeholderOf	The smaller pictures of an image, and its placeholder.
textOf, hashOf	What is written in a file, and its SHA-256.
CSS, TEXTS, translator	The look, scoped to .rf-drive, and the words.

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