Skip to content

ajmalpkc/draft-js-drag-n-drop-custom-upload-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DraftJS Drag & Drop File Upload Plugin with Custom Image Upload Option

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

About

Custom image upload passing option build upon draft-js-drag-n-drop-upload-plugin of draft-js-plugins

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy