Grapesjs Uppy

Uppy file uploader for grapesjs.WIP

Add companion to use other image sources other than local. At the moment only tus is supported for file uploads

Screenshot:

DEMO

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<link href="https://unpkg.com/grapesjs-uppy/dist/grapesjs-uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs-uppy"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-uppy'],
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

Summary

• Plugin name: grapesjs-uppy

Options

Option	Description	Default
btnEl	Custom button element which triggers Uppy modal
btnText	Text for the button in case the custom one is not provided	Add images
theme	Uppy's filepicker theme	dark
uppyOpts	Uppy's options	{...}
dashboardOpts	Uppy's dashboard options	{...}
companionUrl	Uppy companion url	https://companion.uppy.io
endpoint	Tus endpoint url	https://tusd.tusdemo.net/files/
onComplete	On complete upload callback	console.log('successful files:', assets)
onFailed	On failed upload callback	console.log('failed files:', assets)
googledrive	Use plugin	false
dropbox	Use plugin	false
instagram	Use plugin	false
facebook	Use plugin	false
onedrive	Use plugin	false
unsplash	Use plugin	false
webcam	Use plugin	true
screencapture	Use plugin	true

Download

• CDN
  • https://unpkg.com/grapesjs-uppy
• NPM
  • npm i grapesjs-uppy
• GIT
  • git clone https://github.com/Ju99ernaut/grapesjs-uppy.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapesjs-uppy/dist/grapesjs-uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-uppy.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-uppy'],
      pluginsOpts: {
        'grapesjs-uppy': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-uppy';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-uppy/dist/grapesjs-uppy.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-uppy.git
$ cd grapesjs-uppy

Install dependencies

$ npm i

Build css

$ npm run build:css

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT