This is a plugin for the draft-js-plugins-editor.
This plugin adds dropping & uploading files functionality to your editor with uploading image to server and using image URL instead of base64 format
Usage:
import createDragNDropUploadPlugin from '@ajmalpkc/draft-js-drag-n-drop-custom-upload-plugin'; import upload from './upload'; ... ... export const imagePlugin = createImagePlugin({ decorator }); export const dragNDropFileUploadPlugin = createDragNDropUploadPlugin({ handleUpload: upload, //write your image upload codes in upload.js addImage: imagePlugin.addImage, }); const dndFileUploadPlugin = createDndFileUploadPlugin();upload.js
// Read file contents intelligently as plain text/json, image as dataUrl or // anything else as binary function readFile(file) { return new Promise(function (resolve) { var reader = new FileReader(); // This is called when finished reading reader.onload = function (event) { // Return an array with one image if (file.type.indexOf("image/") === 0) { const src = `YOUR IMAGE URL`; resolve({ // These are attributes like size, name, type, ... lastModifiedDate: file.lastModifiedDate, lastModified: file.lastModified, name: file.name, size: file.size, type: file.type, // This is the files content as base64 src: src //event.target.result }); } else { resolve({ // These are attributes like size, name, type, ... lastModifiedDate: file.lastModifiedDate, lastModified: file.lastModified, name: file.name, size: file.size, type: file.type, // This is the files content as base64 src: event.target.result }); } }; if (file.type.indexOf('text/') === 0 || file.type === 'application/json') { reader.readAsText(file); } else if (file.type.indexOf('image/') === 0) { reader.readAsDataURL(file); } else { reader.readAsBinaryString(file); } }); } // Read multiple files using above function export default function readFiles(files) { return Promise.all(files.map(readFile)); }