File Manager To EditorJs

This file manager works with files and photos and audio.

Installation

Install via NPM

Get the package

npm i file-manager-editor-js --save

Include module at your application

import EditorJsFm from "file-manager-editor-js/src/lib/editor-js-connect";

import "file-manager-editor-js/src/style/main.scss";

Usage

Add a new Tool to the tools property of the Editor.js initial config.

var editor = EditorJS({
  ...
  
  tools: {
    ...
    fileManager: {
      class: EditorJsFm,
      config: {
        lang:"ru" || "en",
        token: "token",
        apiUrl: "https://example/api/v1",
        uploadUrl: "https://example",
        routes: {
            allFoldersOrCurentFolder: 'filemanager/folders/2' or 'filemanager/folders',
            subFoldersAndFiles: 'filemanager/folders/${_id}',
            updateFolder: 'filemanager/folder/${_id}',
            deleteFolder: 'filemanager/folder/${_id}',
            createFolder: 'filemanager/folders',
            updateFile: 'filemanager/file/${_id}',
            deleteFile: 'filemanager/file/${_id}',
            uploadFile: 'filemanager/folders/${_id}/file'
        }
      }
    }
  }
  
  ...
});

${_id} - this means that route will contain an id (that is, action on the specific folder or file or image)

Config Params

Field	Type	Description
token	string	authorization token
apiUrl	string	route to the API
uploadUrl	string	domain where is image/file/audio
routes	object	routes for work with api

Routes

Route	Description
allFoldersOrCurentFolder	On this route we receive all folders from the server, or a specific folder to id
subFoldersAndFiles	On this route we receive all folders and files/images to a specific folder
updateFolder	On this route we edit a folder, request params {title: 'new title', id: folder id}
deleteFolder	On this route we deleted a folder
createFolder	On this route we create subFolder, request params {title: 'folder name (default: new folder)', folderId: parent folder id or ''}
updateFile	On this route we edit a file/image, request params {title: 'new title', alt: 'new alt'}
deleteFile	On this route we deleted a file/image
uploadFile	On this route we upload file/image to folder, request params {folderId: folder id where upload file, file: upload file}

If route allFoldersOrCurentFolder includes id to folder 'filemanager/folders/ID', server response must be an object.

If route allFoldersOrCurentFolder does not include id to folder 'filemanager/folders', server response must be an array of objects.

Route allFoldersOrCurentFolder have required fields:

Field	Type	Description
title	string	folder name
id	string	folder id

Route subFoldersAndFiles have required fields:

Field	Type	Description
title	string	folder name
id	string	folder id
File	array	file to main folder
Folder	array	subFolder to main folder

Field File have required fields:

Field	Type	Description
alt	string	alt
id	string	id
mime	string	mime type ('application/msword','image/png', ...)
path	string	path to file or image without domain ('/uploads/2021-04-08/1617882721-1614172940-ExamTests_V1-(1).doc')
title	string	file name

Field Folder have required fields:

Field	Type	Description
id	string	id
title	string	file name

Output data

Field	Type	Description
url	string	image's/files/audio url
name	string	image's/files/audio name
type	string	type ('image' or 'audio' or 'file')

{
    "type" : "FileManager",
    "data" : {
        "url" : "https://example/hero.jpg",
        "name" : "Name",
        "type" : "image or file or audio"
    }
}