Attaches Tool for Editor.js
npm install @editorjs/attachesTool for the Editor.js.
This tool allows you to attach files to your articles.
!Example of the Attach tool look
You can get the package using any of these ways.
``shell`
npm install @editorjs/attaches
You can load specific version of package from jsDelivr CDN.
https://cdn.jsdelivr.net/npm/@editorjs/attaches@latest
Then require this script on page with Editor.js through the tag.
Add a new Tool to the tools property of the Editor.js initial config.
`javascript
import AttachesTool from '@editorjs/attaches';
var editor = EditorJS({
...
tools: {
...
attaches: {
class: AttachesTool,
config: {
endpoint: 'http://localhost:8008/uploadFile'
}
}
}
...
});
`
Attaches Tool supports these configuration parameters:
| Field | Type | Description |
| ----- | -------- | ------------------ |
| endpoint | string | Optional endpoint for file uploading or use uploader |{uploadByFile: function}
| uploader | |Optional custom uploading method or use endpoint|string
| field | | (default: file) Name of uploaded file field in POST request |string
| types | | (default: *) Mime-types of files that can be accepted with file selection.|string
| buttonText | | (default: Select file) Placeholder for file upload button |string
| errorMessage | | (default: File upload failed) Message to show if file upload failed |object
| additionalRequestHeaders | | (default: {}) Object with any custom headers which will be added to request. Example: {"X-CSRF-TOKEN": "W5fe2...hR8d1"} |
This Tool returns data with following format
| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| file | object | Uploaded file data. Data received from backend uploader. See description below. |string
| title | | File's title. Initially set as uploaded file name. Can be modified by user. |
Object file consists of the following fields. All of them are optional, size and extension are supported by design.
| Field | Type | Description |
| -------------- | --------- | ----------------------------------|
| url |string | Full public path of uploaded file |number
| size | | File's size (expected in bytes, according to Tool's design) |string
| name | | File's name |string
| extension | | File's extension |
`json`
{
"type" : "attaches",
"data" : {
"file": {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
"size": 91,
"name": "hero.jpg",
"extension": "jpg"
},
"title": "Hero"
}
}
Response of your uploader should cover following format:
`json5`
{
"success" : 1,
"file": {
// any data you want
// for example: url, name, size, title
}
}
success - uploading status. 1 for successful, 0 for failed
file - uploaded file data. Can contain any data you want to store. All fields will be stored as file object in output data.
Fields supported by the UI of block:
- titlesize
- extension
- (if not present, will be extracted from the name)url
-
As mentioned at the Config Params section, you have an ability to provide own custom uploading method.
It is a quite simple: implement uploadByFile method and pass them via uploader config param.
The method return a Promise that resolves with response in a format that described at the backend response format section.
| Method | Arguments | Return value | Description |
| -------------- | --------- | -------------| ------------|
| uploadByFile | File | {Promise.<{success, file: {url}}>} | Upload file to the server and return an uploaded file data |
Example:
`js
import AttachesTool from '@editorjs/attaches';
var editor = EditorJS({
...
tools: {
...
attaches: {
class: AttachesTool,
config: {
/**
* Custom uploader
*/
uploader: {
/**
* Upload file to the server and return an uploaded image data
* @param {File} file - file selected from the device or pasted by drag-n-drop
* @return {Promise.<{success, file: {url}}>}
*/
uploadByFile(file){
// your own uploading logic here
return MyAjax.upload(file).then((response) => {
return {
success: 1,
file: {
url: response.fileurl,
// any data you want
// for example: name, size, title
}
};
});
},
}
}
}
}
...
});
``