# @ch-sridhar15/ckeditor5-file-upload

> Classic File Upload Tool for CKEditor5

Latest version **1.1.0** (published 2022-01-24) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @ch-sridhar15/ckeditor5-file-upload
pnpm add @ch-sridhar15/ckeditor5-file-upload
yarn add @ch-sridhar15/ckeditor5-file-upload
bun add @ch-sridhar15/ckeditor5-file-upload
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-01-24 |
| First published | 2022-01-20 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | piriianulavinia |
| Maintainers | ch-sridhar15 |
| Keywords | ckeditor5, classic, file, upload, plugin |

## Links

- npm: https://www.npmjs.com/package/@ch-sridhar15/ckeditor5-file-upload
- Repository: https://github.com/eMAGTechLabs/ckeditor5-file-upload
- Homepage: https://github.com/eMAGTechLabs/ckeditor5-file-upload#readme
- Issues: https://github.com/eMAGTechLabs/ckeditor5-file-upload/issues
- npm.io page: https://npm.io/package/@ch-sridhar15/ckeditor5-file-upload

## Dependencies (7)

- [@ckeditor/ckeditor5-ui](https://npm.io/package/@ckeditor/ckeditor5-ui.md) ^31.0.0
- [@ckeditor/ckeditor5-core](https://npm.io/package/@ckeditor/ckeditor5-core.md) ^31.0.0
- [@ckeditor/ckeditor5-utils](https://npm.io/package/@ckeditor/ckeditor5-utils.md) ^31.0.0
- [@ckeditor/ckeditor5-engine](https://npm.io/package/@ckeditor/ckeditor5-engine.md) ^31.0.0
- [@ckeditor/ckeditor5-upload](https://npm.io/package/@ckeditor/ckeditor5-upload.md) ^31.0.0
- [@ckeditor/ckeditor5-widget](https://npm.io/package/@ckeditor/ckeditor5-widget.md) ^31.0.0
- [@ckeditor/ckeditor5-clipboard](https://npm.io/package/@ckeditor/ckeditor5-clipboard.md) ^31.0.0

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-01-24
- 1.0.1 — 2022-01-20
- 1.0.0 — 2022-01-20

## README

# ckeditor5-file-upload
CKEditor5 File Upload Plugin

This plugin allows you to upload file that have mime type application/*.


# Installation

```
npm i @ch-sridhar15/ckeditor5-file-upload
```
or
```
yarn add @ch-sridhar15/ckeditor5-file-upload
```

# Usage

Update src/ckeditor.js with:
```javascript
import FileUpload from "@ch-sridhar15/ckeditor5-file-upload/fileupload";
import SimpleFileUploadAdapter from "@ch-sridhar15/ckeditor5-file-upload/src/simplefileuploadadapter";

Editor.builtinPlugins = [
  // ...
  FileUpload,
  SimpleFileUploadAdapter,
  // ...
];

Editor.defaultConfig = {
  // ...
  simpleFileUpload: {
    url: 'http://my-custom-link.com',
    fileTypes: [
      '.pdf',
      '.doc',
      '.docx',
      '.xls',
      '.xlsx'
    ]
  },
  toolbar: {
    items: [
      // ...
      'fileUpload',
      // ...
    ]
  },
  // ...
};
```
Then
```
npm run build
```
or
```
yarn build
```
# How it works

The plugin creates a link entity inside editor content with an empty href attribute and when the upload process is completed the server response should contains an resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link. 

### Communication protocol
When the file upload process starts, the adapter sends a POST request to config.simpleFileUpload.url.

### Configuring allowed file types
Use the simpleFileUpload.url configuration option to define the allowed file MIME types that can be uploaded to CKEditor 5.

By default, users are allowed to upload pdf, doc, docx, xls, xlsx documents.

### Upload file
When the file upload process is initiated, in the editor content appears a link with href attribute empty and text link corresponds to the  uploaded file name.

![Toolbar Inputs](https://bucket-doc-s1.s3.eu-central-1.amazonaws.com/images/print4.png)
<br/>

### Upload progress
This upload adapter will show users about the file upload progress with the help of a progress bar.
The progress bar has a button to cancel the file upload process.

### Upload complete
When the file has been successfully uploaded, the server should return an object containing the resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link. 

![Toolbar Inputs](https://bucket-doc-s1.s3.eu-central-1.amazonaws.com/images/print3.png)
<br/>

---
_Source: https://npm.io/package/@ch-sridhar15/ckeditor5-file-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._