{"_id":"@boundstate/editorjs-attaches","_rev":"3-2e135c0ee6c6f99ea0b1ec4738bb392c","name":"@boundstate/editorjs-attaches","dist-tags":{"latest":"1.4.1"},"versions":{"1.4.0":{"name":"@boundstate/editorjs-attaches","version":"1.4.0","keywords":["codex editor","tool","attaches","editor.js","editorjs"],"author":{"name":"CodeX","email":"team@codex.so"},"license":"MIT","_id":"@boundstate/editorjs-attaches@1.4.0","maintainers":[{"name":"guiltyspark","email":"info@boundstatesoftware.com"},{"name":"mikejpeters","email":"mikejpeters@gmail.com"}],"homepage":"https://github.com/editor-js/attaches#readme","bugs":{"url":"https://github.com/editor-js/attaches/issues"},"dist":{"shasum":"a461a408563ad0d867a573df6af9c005f428a297","tarball":"https://registry.npmjs.org/@boundstate/editorjs-attaches/-/editorjs-attaches-1.4.0.tgz","fileCount":8,"integrity":"sha512-BApqKwVSrcRBk/HJXptAZRrUXMwzWqJT3bi8VDd2QfVDlV3gPRYBnk2sZpeKI4FlM40pfroRM+pe70K0qPO6DQ==","signatures":[{"sig":"MEQCIEH8H4Yy4L74Q2qDdWFq3fUjPLXgJkcKiVYYLrADOTWHAiAxVdlgUlFPSDCqXtp1vbuu5CB8jWusoeB2p+az9mLyHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50677},"main":"./dist/bundle.js","gitHead":"41fe43f6dfdddb65b1f5344ed5aa797b286dd10b","scripts":{"build":"webpack --mode production","server":"node ./dev/server.js","build:dev":"webpack --mode development --watch"},"_npmUser":{"name":"mikejpeters","email":"mikejpeters@gmail.com"},"repository":{"url":"git+https://github.com/editor-js/attaches.git","type":"git"},"_npmVersion":"6.14.16","description":"Tool for the [Editor.js](https://editorjs.io).","directories":{},"_nodeVersion":"12.22.12","dependencies":{"@codexteam/icons":"^0.0.4"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","request":"^2.88.0","webpack":"^4.29.6","css-loader":"^1.0.0","formidable":"^1.2.1","@babel/core":"^7.14.2","file-loader":"^4.1.0","webpack-cli":"^3.3.0","babel-loader":"^8.2.2","style-loader":"^0.21.0","postcss-loader":"^3.0.0","postcss-nested":"^4.1.1","@codexteam/ajax":"^4.0.1","to-string-loader":"^1.2.0","@babel/preset-env":"^7.14.2","svg-inline-loader":"^0.8.2","eslint-config-codex":"^1.6.4","eslint-webpack-plugin":"^3.2.0","postcss-nested-ancestors":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/editorjs-attaches_1.4.0_1746468444175_0.27511184744335004","host":"s3://npm-registry-packages-npm-production"}},"1.4.1":{"name":"@boundstate/editorjs-attaches","version":"1.4.1","keywords":["codex editor","tool","attaches","editor.js","editorjs"],"author":{"name":"CodeX","email":"team@codex.so"},"license":"MIT","_id":"@boundstate/editorjs-attaches@1.4.1","maintainers":[{"name":"guiltyspark","email":"info@boundstatesoftware.com"},{"name":"mikejpeters","email":"mikejpeters@gmail.com"}],"homepage":"https://github.com/editor-js/attaches#readme","bugs":{"url":"https://github.com/editor-js/attaches/issues"},"dist":{"shasum":"c9fccbf2c989968ea0c8332dafec1997b9481510","tarball":"https://registry.npmjs.org/@boundstate/editorjs-attaches/-/editorjs-attaches-1.4.1.tgz","fileCount":8,"integrity":"sha512-ZAcSQPyV4YmtULrpIj7grNrPu3y9AegDXjmo58tCkl7e9bv6mAfH8KjcWGA+v8I/qN9CX/1iWHV6KfVEVCLjsw==","signatures":[{"sig":"MEUCIQDsSKJaW26fr3aMoKclCw2iQ1HDN8isDOjl02mtP1VQHQIgP4KVggwD157RZM7Byhv7fNuxWH/Vy1MyIAWqXJFaTp0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50180},"main":"./dist/bundle.js","gitHead":"081b401c9b805d74d27b24cd57118a6b9ab2f68c","scripts":{"build":"webpack --mode production","server":"node ./dev/server.js","build:dev":"webpack --mode development --watch"},"_npmUser":{"name":"mikejpeters","email":"mikejpeters@gmail.com"},"repository":{"url":"git+https://github.com/editor-js/attaches.git","type":"git"},"_npmVersion":"8.19.4","description":"Tool for the [Editor.js](https://editorjs.io).","directories":{},"_nodeVersion":"16.20.2","dependencies":{"@codexteam/icons":"^0.0.4"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","request":"^2.88.0","webpack":"^4.29.6","css-loader":"^1.0.0","formidable":"^1.2.1","@babel/core":"^7.14.2","file-loader":"^4.1.0","webpack-cli":"^3.3.0","babel-loader":"^8.2.2","style-loader":"^0.21.0","postcss-loader":"^3.0.0","postcss-nested":"^4.1.1","@codexteam/ajax":"^4.0.1","to-string-loader":"^1.2.0","@babel/preset-env":"^7.14.2","svg-inline-loader":"^0.8.2","eslint-config-codex":"^1.6.4","eslint-webpack-plugin":"^3.2.0","postcss-nested-ancestors":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/editorjs-attaches_1.4.1_1746472030878_0.6962165150163524","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-05T18:07:24.063Z","modified":"2025-09-16T21:38:59.735Z","1.4.0":"2025-05-05T18:07:24.368Z","1.4.1":"2025-05-05T19:07:11.077Z"},"bugs":{"url":"https://github.com/editor-js/attaches/issues"},"author":{"name":"CodeX","email":"team@codex.so"},"license":"MIT","homepage":"https://github.com/editor-js/attaches#readme","keywords":["codex editor","tool","attaches","editor.js","editorjs"],"repository":{"url":"git+https://github.com/editor-js/attaches.git","type":"git"},"description":"Tool for the [Editor.js](https://editorjs.io).","maintainers":[{"email":"mikejpeters@gmail.com","name":"mikejpeters"}],"readme":"# Attaches Tool\n\nTool for the [Editor.js](https://editorjs.io).\n\nThis tool allows you to attach files to your articles.\n\n\n\n## Installation\n\nYou can get the package using any of these ways.\n\n### Via NPM / Yarn\n\n```shell\nnpm install @boundstate/editorjs-attaches\n```\n\n### Load from CDN\n\nYou can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@boundstate/editorjs-attaches).\n\n`https://cdn.jsdelivr.net/npm/@boundstate/editorjs-attaches@latest`\n\nThen require this script on page with Editor.js through the `` tag.\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nimport AttachesTool from '@boundstate/editorjs-attaches';\n\nvar editor = EditorJS({\n ...\n\n tools: {\n ...\n attaches: {\n class: AttachesTool,\n config: {\n endpoint: 'http://localhost:8008/uploadFile'\n }\n }\n }\n\n ...\n});\n```\n\n## Config Params\n\nAttaches Tool supports these configuration parameters:\n\n| Field | Type | Description |\n|--------------------------|----------------------------| ------------------ |\n| endpoint | `string` | Optional endpoint for file uploading or use uploader |\n| uploader | `{uploadByFile: function}` |Optional custom uploading method or use endpoint|\n| field | `string` | (default: `file`) Name of uploaded file field in POST request |\n| types | `string` | (default: `*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).|\n| buttonText | `string` | (default: `Select file`) Placeholder for file upload button |\n| errorMessage | `string` | (default: `File upload failed`) Message to show if file upload failed |\n| additionalRequestHeaders | `object` | (default: `{}`) Object with any custom headers which will be added to request. Example: `{\"X-CSRF-TOKEN\": \"W5fe2...hR8d1\"}` |\n| downloader | `{download: function}` |Optional custom for downloading image. See details below.|\n\n## Output data\n\nThis Tool returns `data` with following format\n\n| Field | Type | Description |\n| -------------- | --------- | ------------------------------- |\n| file | `object` | Uploaded file data. Data received from backend uploader. See description below. |\n| title | `string` | File's title. Initially set as uploaded file name. Can be modified by user. |\n\n### file object \n\nObject `file` consists of the following fields. All of them are optional, `size` and `extension` are supported by design.\n\n| Field | Type | Description |\n| -------------- | --------- | ----------------------------------|\n| url |`string` | Full public path of uploaded file |\n| size |`number` | File's size (expected in bytes, according to Tool's design) |\n| name |`string` | File's name |\n| extension |`string` | File's extension |\n\n```json\n{\n \"type\" : \"attaches\",\n \"data\" : {\n \"file\": {\n \"url\" : \"https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg\",\n \"size\": 91,\n \"name\": \"hero.jpg\",\n \"extension\": \"jpg\"\n },\n \"title\": \"Hero\"\n }\n}\n```\n\n## Backend response format\n\nResponse of your uploader **should** cover following format:\n\n```json5\n{\n \"success\" : 1,\n \"file\": {\n // any data you want\n // for example: url, name, size, title\n }\n}\n```\n\n**success** - uploading status. 1 for successful, 0 for failed\n\n**file** - uploaded file data. Can contain any data you want to store. All fields will be stored as [file object](#file-object) in output data.\n\nFields supported by the UI of block:\n\n - `title`\n - `size`\n - `extension` (if not present, will be extracted from the `name`)\n - `url`\n\n## Providing custom uploading methods\n\nAs mentioned at the Config Params section, you have an ability to provide own custom uploading method.\nIt is a quite simple: implement `uploadByFile` method and pass them via `uploader` config param.\nThe method return a Promise that resolves with response in a format that described at the [backend response format](#backend-response-format) section.\n\n\n| Method | Arguments | Return value | Description |\n| -------------- | --------- | -------------| ------------|\n| uploadByFile | `File` | `{Promise.<{success, file: {url}}>}` | Upload file to the server and return an uploaded file data |\n\nExample:\n\n```js\nimport AttachesTool from '@boundstate/editorjs-attaches';\n\nvar editor = EditorJS({\n ...\n\n tools: {\n ...\n attaches: {\n class: AttachesTool,\n config: {\n /**\n * Custom uploader\n */\n uploader: {\n /**\n * Upload file to the server and return an uploaded image data\n * @param {File} file - file selected from the device or pasted by drag-n-drop\n * @return {Promise.<{success, file: {url}}>}\n */\n uploadByFile(file){\n // your own uploading logic here\n return MyAjax.upload(file).then((response) => {\n return {\n success: 1,\n file: {\n url: response.fileurl,\n // any data you want\n // for example: name, size, title\n }\n };\n });\n },\n }\n }\n }\n }\n ...\n});\n```\n\n## Providing custom download method\n\nAs mentioned at the Config Params section, you have an ability to provide own custom downloading methods.\nIt is a quite simple: implement `download` method and pass them via `downloader` config param.\n\n\n| Method | Arguments | Return value | Description |\n| -------------- | --------- |------------------|------------|\n| download | `url`, `File` | `url` or `blobUrl` | Custom download function to get image data |\n\nExample:\n\n```js\nimport AttachesTool from '@boundstate/editorjs-attaches';\n\nvar editor = EditorJS({\n ...\n tools: {\n ...\n attaches: {\n class: AttachesTool,\n config: {\n /**\n * Custom downloader\n */\n downloader: {\n async download(url: string, file: any) {\n const data = await getImageData();\n const blob = new Blob([data]);\n const blobUrl = URL.createObjectURL(blob);\n return blobUrl;\n },\n },\n }\n }\n}\n});\n```\n> It is recommended to add a \"name\" attribute to the upload parameters to make the downloaded filename more clear and recognizable.\n```js\nreturn {\n success: 1,\n file: {\n url: response.fileurl,\n name: file.name\n // for example: name, size, title\n }\n};\n```","readmeFilename":"README.md"}