@artibox/slate-file-uploader

Introduction

This package is an util related to process of file uploading of editor.
You can use this package to upload files to some third party storages. Like gcloud storage, s3, ...etc.

Installation

npm install @artibox/slate-file-uploader --save

or

$ yarn add @artibox/slate-file-uploader

Usage

import React from 'react';
import { Image as ImageIcon } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { createImage } from '@artibox/slate-image';
import { createFileUploader } from '@artibox/slate-file-uploader';
import { Toolbar } from '@artibox/slate-toolbar';

const Image = createImage({
  hostingResolvers: {
    GCLOUD_STORAGE: name => `<Your Public Url>/${name}`
  }
});
const FileUploader = createFileUploader({
  accept: ['image/*'],
  createNode: {
    image: {
      dataURL: dataURL => Image.createBlock(dataURL, 'GCLOUD_STORAGE'),
      response: response => Image.createBlock(JSON.parse(response).name, 'GCLOUD_STORAGE')
    }
  },
  headers: file => ({
    Authorization: 'Bearer <Your OAuth2 Token>',
    'Content-Type': file.type
  }),
  url: file =>
    `https://storage.googleapis.com/upload/storage/v1/b/<Your Bucket Name>/o?uploadType=media&name=${file.name}`
});

const plugins = [
  Image.forPlugin(),
  FileUploader.forPlugin(),
  Toolbar.forPlugin({
    collapsedTools: [{ icon: ImageIcon, hook: FileUploader.forToolHook() }]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;

API

• constants
• typings
• createFileUploader
• FileUploader.forPlugin
• FileUploader.forToolHook
• FileUploaderController