yahoo-pixelframe-uploader


<yahoo-pixelframe-uploader /> is a images / video uploader. It's a none UI web component. That means developers could design the whole stuff through <yahoo-pixelframe-uploader /> dispatch custom events.

Users could picked image / video files through the following methods.

- pick from file picker window.
- drag & drop files into drop zone
- direct copy / paste files which from file system or web page.

!

Basic Usage

<yahoo-pixelframe-uploader /> is a web component. All we need to do is put the required script into your HTML document. Then follow <yahoo-pixelframe-uploader />'s html structure and everything will be all set.

- Required Script

``html

`

- Structure

Put <yahoo-pixelframe-uploader /> into HTML document.

`html



type="button"
class="buttons"
slot="trigger"
>
UPLOAD


`

Remember set clickable content inside <yahoo-pixelframe-uploader /> as its child and set attribute "slot" as "trigger". It will turn on file picker window when user tapped.

JavaScript Instantiation

<yahoo-pixelframe-uploader /> could also use JavaScript to create DOM element. Here comes some examples.

`html

`

Style Customization

<yahoo-pixelframe-uploader /> is a none UI web componentom. Clients need to setup UI by themselves. So there will be no CSS hook to style it.

Attributes

<yahoo-pixelframe-uploader /> supports some attributes to let it become more convenience & useful.

- multiple

Set multiple or not. This should be boolean string. User could pick multi-files once multiple set.

`html

...

`

- accept

Set accept. Same as input[accept]. Developers could set this to filter files by type.

`html

...

`

- imagelimitation

Set imagelimitation. This should be JSON boolean string. <yahoo-pixelframe-uploader /> will check image specs by this setting.

minwidth：image width must bigger than this.\
minheight：image height must bigger than this.\
size：image file size must under this.

`html

...

`

- videolimitation

Set videolimitation. This should be JSON boolean string. <yahoo-pixelframe-uploader /> will check video specs by this setting.

minwidth：video width must bigger than this.\
minheight：video height must bigger than this.\
size：video file size must under this.\
duration：video duration must smaller than this.

`html

...

`

- maximagecount

Set maximagecount. <yahoo-pixelframe-uploader /> will restrict image count which user picked each time.

`html

...

`

- maxvideocount

Set maxvideocount. <yahoo-pixelframe-uploader /> will restrict video count which user picked each time.

`html

...

`

- webservice

Set webservice config. Web developers could set fetch config for "token" or "upload" web service.

token：Set url for token fetching.\
upload：Set urls and params for upload fetching.

`html

...

`

Property


| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| multiple | Boolean | Getter / Setter <yahoo-pixelframe-uploader />'s multiple state. |
| accept | String | Getter / Setter <yahoo-pixelframe-uploader />'s accept. |
| imagelimitation | Object | Getter / Setter <yahoo-pixelframe-uploader />'s imagelimitation. <yahoo-pixelframe-uploader /> will check image specs by this setting. |
| videolimitation | Object | Getter / Setter <yahoo-pixelframe-uploader />'s videolimitation. <yahoo-pixelframe-uploader /> will check video specs by this setting. |
| maximagecount | Integer | Getter / Setter <yahoo-pixelframe-uploader />'s maximagecount. <yahoo-pixelframe-uploader /> will restrict image count which user picked each time. |
| maxvideocount | Integer | Getter / Setter <yahoo-pixelframe-uploader />'s maxvideocount. <yahoo-pixelframe-uploader /> will restrict video count which user picked each time. |
| webservice | Object | Getter / Setter <yahoo-pixelframe-uploader />'s webservice. Web developers could set fetch config for "token" or "upload" web service. <yahoo-pixelframe-uploader /> will restrict video count which user picked each time. |
| processing | Boolean | Getter <yahoo-pixelframe-uploader />'s processing state. |

Events

| Event Signature | Description |
| ----------- | ----------- |
| yahoo-pixelframe-uploader-pick | Fired when <yahoo-pixelframe-uploader /> user picked image / video files. Developers could gather picked information through event.detail. |
| yahoo-pixelframe-uploader-error | Fired when <yahoo-pixelframe-uploader /> error occured. Developers could gather information through event.detail. |
| yahoo-pixelframe-uploader-process-start | Fired when <yahoo-pixelframe-uploader /> upload process start. |
| yahoo-pixelframe-uploader-process-end | Fired when <yahoo-pixelframe-uploader /> upload process end. |
| yahoo-pixelframe-uploader-progress | Fired when <yahoo-pixelframe-uploader /> upload processing. Developers could gather id & progress through event.detail to setup each unit's progress status. |
| yahoo-pixelframe-uploader-done | Fired when <yahoo-pixelframe-uploader /> finished all upload procerss. Developers could gather results through event.detail. |

Mathod

| Mathod Signature | Description |
| ----------- | ----------- |
| passFiles(files) | Pass files which user picked to <yahoo-pixelframe-uploader />. （files should be blob` format）. |

Reference

- <yahoo-pixelframe-uploader /> demo
- YouTube tutorial
- Object.groupBy()
- canvas drawImage