集成到你的应用不使用框架

不使用框架

<FileDrive> 挂载的其实是 @rebofiles/drive，它不需要任何框架：Vue、Svelte、Angular 或纯 HTML 页面都可以。它接受相同的选项，重新渲染时只更新变化的部分，因此焦点和滚动位置都保持不变。

开始

挂载

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

组成

底层的各个部分

每个部分都已导出，可用来构建不依赖 React 的自定义界面。

名称	作用
createDriveClient	服务器的每条路由对应一个函数；支持续传的分片上传。
createUploads	上传队列：同时三个、速度、剩余时间，以及对已存在文件的询问。
lookInDrive	上传前在网盘中查找文件。
readDropped, readChosen	拖放或选择的文件夹中的文件及其路径。
downloadZip, writeZip	在页面中边下载边生成 .zip。
renditionsOf, placeholderOf	图片的缩小版本及其占位图。
textOf, hashOf	文件中的文字及其 SHA-256。
CSS, TEXTS, translator	限定在 .rf-drive 范围内的样式，以及文字。

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