@artibox/slate-file-uploader
v1.2.0
Published
<div align="center"> <img src="https://raw.githubusercontent.com/ianstormtaylor/slate/master/docs/images/banner.png" height="200" /> </div>
Downloads
22
Readme
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;