https://github.com/kanety/stimulus-uploader

https://github.com/kanety/stimulus-uploader

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-uploader
• Owner: kanety
• License: mit
• Created: 2021-10-16T07:50:15.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-16T08:28:56.000Z (over 3 years ago)
• Last Synced: 2024-12-25T04:04:45.912Z (23 days ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-uploader

A stimulus controller for simple file uploader.

## Dependencies

* @hotwired/stimulus 3.0

## Installation

Install from npm:

    $ npm install @kanety/stimulus-uploader --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import UploaderController from '@kanety/stimulus-uploader';

const application = Application.start();

application.register('uploader', UploaderController);

```

Import css:

```css

@import '@kanety/stimulus-uploader';

```

Build html as follows:

```html



  



```


### Optional targets

#### progress

You can specify element to show progress message as follows:

```html



  

  




```


### Options

#### params

Set additional query parameters:

```html





```


You can also set global query parameters as follows:

```javascript

import UploaderController from '@kanety/stimulus-uploader';

// set by object

UploaderController.params = { key: 'value' };

// set by function

UploaderController.params = () => {

  return { key: "value" };

}

```

#### fetch-options

Set additional fetch options recognized by fetch API:

```html





```


You can also set global options as follows:

```javascript

import UploaderController from '@kanety/stimulus-uploader';

UploaderController.fetchOptions = { key: 'value' };

```

### Callbacks

Run callbacks when files are uploaded or failed:

```javascript

let element = document.querySelector('[data-controller="uploader"]');

element.addEventListener('uploader:before', e => {

  console.log(e.detail.files);

});

element.addEventListener('uploader:start', e => {

  console.log(e.detail.index + ":" + e.detail.file);

});

element.addEventListener('uploader:done', e => {

  console.log(e.detail.index + ":" + e.detail.file);

});

element.addEventListener('uploader:fail', e => {

  console.log(e.detail.index + ":" + e.detail.file);

});

element.addEventListener('uploader:end', e => {

  console.log(e.detail.index + ":" + e.detail.file);

});

element.addEventListener('uploader:after', e => {

  console.log(e.detail.files);

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).