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.

Check the following video and take a look what can <yahoo-pixelframe-uploader /> do ?

image

Tutorial

Chekc the following tutorial and see how <yahoo-pixelframe-uploader /> work.

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

<script type="module" src="https://unpkg.com/yahoo-pixelframe-uploader/mjs/wc-yahoo-pixelframe-uploader.js"> </script>

Structure

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

<yahoo-pixelframe-uploader> <script type="application/json"> { "multiple": true, "accept": ".jpg,.jpeg,.png,.gif,.webp,.avif,.mov,.mp4,.ogg,.webm", "imagelimitation": { "minwidth": 100, "minheight": 100, "size": 52428800 }, "videolimitation": { "minwidth": 100, "minheight": 100, "size": 314572800, "duration": 3600 }, "maximagecount": 5, "maxvideocount": 5, "webservice": { "token": { "url": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload" }, "upload": { "urls": { "video": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload", "image": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload" }, "params": { "targetType": "rating", "targetId": "auction2", "appName": "auction", "resizingProfile": "bid_seller_logo", "transcodingProfile": "auction" } } } } </script> <button type="button" class="buttons" slot="trigger" > UPLOAD </button> </yahoo-pixelframe-uploader>

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.

<script type="module"> import { YahooPixelframeUploader } from 'https://unpkg.com/yahoo-pixelframe-uploader/mjs/wc-yahoo-pixelframe-uploader.js'; //use DOM api const nodeA = document.createElement('yahoo-pixelframe-uploader'); document.body.appendChild(nodeA); nodeA.multiple = true; nodeA.maximagecount = 10; nodeA.maxvideocount = 5; // new instance with Class const nodeB = new YahooPixelframeUploader(); document.body.appendChild(nodeB); nodeB.multiple = false; // new instance with Class & default config const config = { "multiple": true, "accept": ".jpg,.jpeg,.png,.gif,.webp,.avif,.mov,.mp4,.ogg,.webm", "imagelimitation": { "minwidth": 100, "minheight": 100, "size": 52428800 }, "videolimitation": { "minwidth": 100, "minheight": 100, "size": 314572800, "duration": 3600 }, "maximagecount": 2, "maxvideocount": 1, "webservice": { "token": { "url": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload" }, "upload": { "urls": { "video": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload", "image": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload" }, "params": { "targetType": "rating", "targetId": "auction2", "appName": "auction", "resizingProfile": "bid_seller_logo", "transcodingProfile": "auction" } } } }; const nodeC = new YahooPixelframeUploader(config); document.body.appendChild(nodeC); </script>

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.

<yahoo-pixelframe-uploader multiple> ... </yahoo-pixelframe-uploader>

accept

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

<yahoo-pixelframe-uploader accept=".jpg,.jpeg,.png,.gif,.webp,.avif,.mov,.mp4,.ogg,.webm"> ... </yahoo-pixelframe-uploader>

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.

<yahoo-pixelframe-uploader imagelimitation='{"minwidth":100,"minheight":100,"size":52428800}'> ... </yahoo-pixelframe-uploader>

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.

<yahoo-pixelframe-uploader videolimitation='{"minwidth":100,"minheight":100,"size":314572800,"duration":3600}'> ... </yahoo-pixelframe-uploader>

maximagecount

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

<yahoo-pixelframe-uploader maximagecount="2"> ... </yahoo-pixelframe-uploader>

maxvideocount

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

<yahoo-pixelframe-uploader maxvideocount="1"> ... </yahoo-pixelframe-uploader>

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.

<yahoo-pixelframe-uploader webservice='{"token":{"url":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload"},"upload":{"urls":{"video":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload","image":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload"},"params":{"targetType":"rating","targetId":"auction2","appName":"auction","resizingProfile":"bid_seller_logo","transcodingProfile":"auction"}}}'> ... </yahoo-pixelframe-uploader>

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