Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 61 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,16 @@ var editor = EditorJS({

Attaches Tool supports these configuration parameters:

| Field | Type | Description |
| ----- | -------- | ------------------ |
| endpoint | `string` | Optional endpoint for file uploading or use uploader |
| uploader | `{uploadByFile: function}` |Optional custom uploading method or use endpoint|
| field | `string` | (default: `file`) Name of uploaded file field in POST request |
| types | `string` | (default: `*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).|
| buttonText | `string` | (default: `Select file`) Placeholder for file upload button |
| errorMessage | `string` | (default: `File upload failed`) Message to show if file upload failed |
| additionalRequestHeaders | `object` | (default: `{}`) Object with any custom headers which will be added to request. Example: `{"X-CSRF-TOKEN": "W5fe2...hR8d1"}` |

| Field | Type | Description |
|--------------------------|----------------------------| ------------------ |
| endpoint | `string` | Optional endpoint for file uploading or use uploader |
| uploader | `{uploadByFile: function}` |Optional custom uploading method or use endpoint|
| field | `string` | (default: `file`) Name of uploaded file field in POST request |
| types | `string` | (default: `*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).|
| buttonText | `string` | (default: `Select file`) Placeholder for file upload button |
| errorMessage | `string` | (default: `File upload failed`) Message to show if file upload failed |
| additionalRequestHeaders | `object` | (default: `{}`) Object with any custom headers which will be added to request. Example: `{"X-CSRF-TOKEN": "W5fe2...hR8d1"}` |
| downloader | `{download: function}` |Optional custom for downloading image. See details below.|

## Output data

Expand Down Expand Up @@ -176,3 +176,54 @@ var editor = EditorJS({
...
});
```

## Providing custom download method

As mentioned at the Config Params section, you have an ability to provide own custom downloading methods.
It is a quite simple: implement `download` method and pass them via `downloader` config param.


| Method | Arguments | Return value | Description |
| -------------- | --------- |------------------|------------|
| download | `url`, `File` | `url` or `blobUrl` | Custom download function to get image data |

Example:

```js
import ImageTool from '@editorjs/attaches';


var editor = EditorJS({
...
tools: {
...
attaches: {
class: AttachesTool,
config: {
/**
* Custom downloader
*/
downloader: {
async download(url: string, file: any) {
const data = await getImageData();
const blob = new Blob([data]);
const blobUrl = URL.createObjectURL(blob);
return blobUrl;
},
},
}
}
}
});
```
> It is recommended to add a "name" attribute to the upload parameters to make the downloaded filename more clear and recognizable.
```js
return {
success: 1,
file: {
url: response.fileurl,
name: file.name
// for example: name, size, title
}
};
```
11 changes: 9 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export default class AttachesTool {
buttonText: config.buttonText || 'Select file to upload',
errorMessage: config.errorMessage || 'File upload failed',
uploader: config.uploader || undefined,
downloader: config.downloader || undefined,
additionalRequestHeaders: config.additionalRequestHeaders || {},
};

Expand Down Expand Up @@ -399,7 +400,7 @@ export default class AttachesTool {
/**
* If upload is successful, show info about the file
*/
showFileData() {
async showFileData() {
this.nodes.wrapper.classList.add(this.CSS.wrapperWithFile);

const { file, title } = this.data;
Expand Down Expand Up @@ -437,11 +438,17 @@ export default class AttachesTool {
this.nodes.wrapper.appendChild(fileInfo);

if (file.url !== undefined) {
let downloadInfo = {href: file.url};
const fileName = file.name || file.url.split("/").pop();
if (this.config.downloader) {
downloadInfo.href = await this.config.downloader.download(file.url, file);
downloadInfo.download = fileName;
}
const downloadIcon = make('a', this.CSS.downloadButton, {
innerHTML: IconChevronDown,
href: file.url,
target: '_blank',
rel: 'nofollow noindex noreferrer',
...downloadInfo
});

this.nodes.wrapper.appendChild(downloadIcon);
Expand Down