{"_id":"@bryansng/editorjs-attaches","_rev":"3-680b739a658be842d429189e57dffad4","name":"@bryansng/editorjs-attaches","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bryansng/editorjs-attaches","version":"1.0.0","repository":{"type":"git","url":"git+https://github.com/bryansng/attaches.git"},"license":"MIT","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development --watch"},"keywords":["codex editor","tool","attaches","editor.js","editorjs"],"author":{"name":"CodeX","email":"team@codex.so"},"main":"./dist/bundle.js","devDependencies":{"@babel/core":"^7.14.2","@babel/preset-env":"^7.14.2","@codexteam/ajax":"^4.0.1","babel-loader":"^8.2.2","css-loader":"^3.5.3","eslint":"^6.1.0","eslint-config-codex":"github:codex-team/eslint-config","eslint-loader":"^2.2.1","file-loader":"^4.1.0","formidable":"^1.2.1","postcss-loader":"^3.0.0","postcss-nested":"^4.2.1","postcss-nested-ancestors":"^2.0.0","request":"^2.88.0","style-loader":"^1.2.1","styled-loader":"^0.0.0","svg-inline-loader":"^0.8.2","webpack":"^4.29.6","webpack-cli":"^3.3.0"},"gitHead":"94642348f19dedfe71c00e9f7c09e0b3beb546d7","description":"![](https://badgen.net/badge/Editor.js/v2.0/blue) # Attaches Tool Attaches Tool for the [Editor.js](https://codex.so/editor).","bugs":{"url":"https://github.com/bryansng/attaches/issues"},"homepage":"https://github.com/bryansng/attaches#readme","_id":"@bryansng/editorjs-attaches@1.0.0","_nodeVersion":"12.16.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-0eY0YJyKwiNziPmjHyyhrD0zZBxLQGuPNT4cOyC4UZsoTe1co4seS4sB2N2gJGXFV2mQIste1lb05mgsYUGoLQ==","shasum":"998e002bef64b5ec26533c97267518b0e23b7961","tarball":"https://registry.npmjs.org/@bryansng/editorjs-attaches/-/editorjs-attaches-1.0.0.tgz","fileCount":7,"unpackedSize":72280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu2tHttD6XzN9l4o7K/vZwl3n1V4romB0PsVWrw5sK7AIhAMGBo7yeKiGPVGB2kH6rP6rxWT9DEOHmIYOanezHFvqs"}]},"_npmUser":{"name":"bryansng","email":"sngby98@gmail.com"},"directories":{},"maintainers":[{"name":"bryansng","email":"sngby98@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/editorjs-attaches_1.0.0_1636910932150_0.19302013400071205"},"_hasShrinkwrap":false},"1.0.1":{"name":"@bryansng/editorjs-attaches","version":"1.0.1","repository":{"type":"git","url":"git+https://github.com/bryansng/attaches.git"},"license":"MIT","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development --watch"},"keywords":["codex editor","tool","attaches","editor.js","editorjs"],"author":{"name":"CodeX","email":"team@codex.so"},"main":"./dist/bundle.js","devDependencies":{"@babel/core":"^7.14.2","@babel/preset-env":"^7.14.2","@codexteam/ajax":"^4.0.1","babel-loader":"^8.2.2","css-loader":"^3.5.3","eslint":"^6.1.0","eslint-config-codex":"github:codex-team/eslint-config","eslint-loader":"^2.2.1","file-loader":"^4.1.0","formidable":"^1.2.1","postcss-loader":"^3.0.0","postcss-nested":"^4.2.1","postcss-nested-ancestors":"^2.0.0","request":"^2.88.0","style-loader":"^1.2.1","styled-loader":"^0.0.0","svg-inline-loader":"^0.8.2","webpack":"^4.29.6","webpack-cli":"^3.3.0"},"gitHead":"420e03e014d2d6653a6a99db0eb2a68e042f49a7","description":"![](https://badgen.net/badge/Editor.js/v2.0/blue) # Attaches Tool Attaches Tool for the [Editor.js](https://codex.so/editor).","bugs":{"url":"https://github.com/bryansng/attaches/issues"},"homepage":"https://github.com/bryansng/attaches#readme","_id":"@bryansng/editorjs-attaches@1.0.1","_nodeVersion":"12.16.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-WkC40XKfdYg8+TzpjJNEaI9G440opINgOxuuD9ECt5DNMy5TLVdYTlXGTpV9tekMz/nftlF5aD1WAwRyfkvMzg==","shasum":"467693a0ffa1dbd99b58f6958ae651060e5067b9","tarball":"https://registry.npmjs.org/@bryansng/editorjs-attaches/-/editorjs-attaches-1.0.1.tgz","fileCount":7,"unpackedSize":72325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzaJWCRA9TVsSAnZWagAAIxQP/iRFdwtK1gc3OvxkJqEt\nGpxfnzIjUmWml03U6Zu5/6joUDbQfl0LSM69ppm8V5Zh2rtSfWSjjQprZ58r\nWRhV0bPHMTvJR9dw28OmwJf58fHVMQGJqU9bvByd+IolbrRUKnhPKBn+00ci\n8DL0n1vzGSyaMh8iZjE5fzqhiWaWVqmJvqXvpASoM12tjlKuTX3/BNB7N4YG\n3bXeLHWKkEGh78aUM37IdDkpbcKZsTNDa5iE4rBoEXc6NAt7pp1jMcxuTFce\nUHoyb45xxjvhj7QlI9B/6FTlGJT6//dhZshNxLFCMtmxiIVTp/no+mOfohRp\nUsBvV1NJdtRKs25HJDwRcuJI+LBKZe3ND0nM3zOFklEMQOudAMjP1mfpnP4h\nbI96xWJFq5yanHE2vHgU/ICX9c4igObcPgGnFygDD1XvPADqX0wm+Ja8Q5Dd\nHRNTQGGK/ZWQza4Jm/v+c5DMNffWyrIZIY+PCV3IsCkhJxlM++I3QFwX5OkY\n9+eUnLFgOlqgyqzQE0XX+L98O8aogJrbHRItkWAgfyCQ8Aa4A7CFf39Zkukb\nnezcpH1NPhFiMymH3AU3igNYkxHyrnzX51JNz53UYEVu7qjBY2M25PtgTsqd\n1kI4owVgjMObqxyoep/Zu0s9VFQSRLWMrJakJX5an55w+DmtpX3yHryiIlko\nRuTa\r\n=hKC1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBz/e4EEHmRDZGGSKgLCUF59dPdW0NHig1I7Qkfm6o8PAiBlmOjc4DECQg13xkUm0EFPCJwhGygdvtqV7N7ynA9jVw=="}]},"_npmUser":{"name":"bryansng","email":"sngby98@gmail.com"},"directories":{},"maintainers":[{"name":"bryansng","email":"sngby98@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/editorjs-attaches_1.0.1_1636912346886_0.9486875457406658"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-14T17:28:52.089Z","1.0.0":"2021-11-14T17:28:52.306Z","modified":"2022-04-04T20:49:48.003Z","1.0.1":"2021-11-14T17:52:27.037Z"},"maintainers":[{"name":"bryansng","email":"sngby98@gmail.com"}],"description":"![](https://badgen.net/badge/Editor.js/v2.0/blue) # Attaches Tool Attaches Tool for the [Editor.js](https://codex.so/editor).","homepage":"https://github.com/bryansng/attaches#readme","keywords":["codex editor","tool","attaches","editor.js","editorjs"],"repository":{"type":"git","url":"git+https://github.com/bryansng/attaches.git"},"author":{"name":"CodeX","email":"team@codex.so"},"bugs":{"url":"https://github.com/bryansng/attaches/issues"},"license":"MIT","readme":"![](https://badgen.net/badge/Editor.js/v2.0/blue)\n# Attaches Tool\nAttaches Tool for the [Editor.js](https://codex.so/editor).\n\nThis tool allows you to attach files to your articles.\n\n![Example](https://capella.pics/7b63cffe-9214-40f4-9009-0637970a4630.jpg)\n\n## Get the package\nYou can get the package using any of these ways.\n\n### Install via npm\n\n```shell\nnpm i --save-dev @editorjs/attaches\n```\n\nInclude module at your application\n\n```javascript\nconst AttachesTool = require('@editorjs/attaches');\n```\n\n\n### Download to your project's source dir\n\n1. Upload folder `dist` from repository\n2. Add `dist/bundle.js` file to your page.\n\n### Load from CDN\n\nYou can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/attaches).\n\n`https://cdn.jsdelivr.net/npm/@editorjs/attaches@latest`\n\nThen require this script on page with Editor.js through the `<script src=\"\"></script>` tag.\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\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\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 <a name=\"file-object\"></a>\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.\nCan contain data you want to store. Fields `url`, `name`, `size`, and `extension` if present will be written to [file object](#file-object). Fields size and extension are supported by design.\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 '@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","readmeFilename":"README.md"}