Media Library Web Component

A client framework and server agnostic Media library Web Component made with vue3.

Installation

Install ts-medialibrary with npm

  npm install ts-medialibrary

Usage Example

Javascript

<form>
  <ts-medialibrary
      multiple
      title="Library Demo For Github"
      url="http://dummy.dev/media"
    ></ts-medialibrary>
    <div id="fileinput"></div>
</form>

<script src="node_modules/ts-medialibrary/dist/ts-medialibrary.js"></script>
<script>
    customElements.whenDefined("ts-medialibrary").then((c) => {
      const el = document.querySelector("ts-medialibrary");

      if(el){
        el.addEventListener("updated", function (e) {
          const payload = e.detail[0];

          //appending hidden input insdie form
          document.getElementById("fileinput").innerHTML = payload.html;
        });
      }
      
    });
</script>

Vue

  import 'ts-medialibrary/dist/ts-medialibrary.js';

  <ts-medialibrary url="REST_URL_HERE" @updated="onSelectionChanged"></ts-medialibrary>

React

You can either add ref to the ts-medialibrary and listen just like with js or can wrap and make new HOC react component.

import 'ts-medialibrary/dist/ts-medialibrary.js';

const MediaLibrary = ({ url, onChange }) => {
  const ref = useRef();


  useLayoutEffect(() => {
    const handleChange = customEvent => onChange(customEvent.detail[0]);

    const { current } = ref;

    current.addEventListener('updated', handleChange);

    return () => current.removeEventListener('updated', handleChange);
  }, [ref]);

   

  return (
    <ts-medialibrary
      ref={ref}
      url={url}
    />
  );
};

API Reference

Client

| Props | Type | Default | Description | | :-------- | :------- | :------- | :-------------------------------- | | url | string | none | Required. REST Url to fetch and upload media | | uid | string | default | Unique identifer required for multiple instances in same page. | | label | string | Select File(s) | Upload Button Label | | title | string | Media Library | Library Modal Heading | | udpate-label | string | Click To Change | Upload Button Label after selections are made | | choosen | string | None | Comma separated id to preselect media. | | can-remove | string, boolean, number | 0 | Allow delete action if true | | blocking | string, number, boolean | 0 | If true than backdrop blocks the UI and modal stays open when clicking on it | | input-name | string | files[] | input name which is used to return html string on update | | input-key | string | id | key from media object to be used as input value | | multiple | string, boolean, number | 0 | Allow multiple selection and upload | | preview-link | string, boolean, number | 1 | Open selected media in new tab | allow-files | boolean, number | 0 | By default only images are allowed, Passing value of 1 will allow upload of any files defined in accept prop | | accept | string | "image/*, audio/*, video/*, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .pdf, .doc, .docx, .csv, .txt | File types to accept when allow-files=1. Only for clientisde. For server validation you have to use your own. | | limit | number | 50 | Number of max items to display in the library. Your server can return 100s of items but library will only show limit items. To see the remaining items, either have to search or sort. |

Emits

| Event | Payload | Description | | :-------- | :------- | :----- | | updated | selected: media[] | Arry of selected media {id, url, thumb_url}[] | | html: string | Hidden input string with input-name as name and value mapped to media[input-key] |

Events are dispatched as native CustomEvents on the custom element. Additional event arguments (payload) will be exposed as an array on the CustomEvent object as its detail property. const payload = e.detail[0];

Server

Server Api Reference.

To test the library there is a default solution provided for laravel, You have to install one of my other package Media Library Package which comes with all required url actions.

Get all items

  GET /PROPS_URL

Response

{"items": "MediaResourceCollection[]", "success": 1}

Upload item

  POST /PROPS_URL

| Body | Type | Description | | :-------- | :------- | :-------------------------------- | | files[] | HTTPFile | Required. array of files | | allow_files | number(0, 1) | If the upload should support only image or any files. |

Response

{"items": "UploadedMediaResourceCollection[]", "success": 1, "message": "UPLOADED SUCCESS MESSAGE"}

Delete item

  DELETE /PROPS_URL/${id}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | id | string | Required. Id of item to delete |

Response

{ "success": 1, "message": "DELETED MESSAGE"}

Error Response

{ "error": 1, "message": "ERROR_MESSAGE"}

Customization and Theming

| CSS Variable | Default | Description | | :-------- | :------- | :-------------------------------- | | --tml-color-primary-rgb | 99, 102, 241 | Primary color RGB | | --tml-color-danger-rgb | 255, 0, 0 | Primary color RGB | | --tml-color-success | green | Success Color | | --tml-color-secondary | rgb(249, 250, 251) | Secondary Color | | --tml-color-grey | grey | Grey Color | | --tml-color-light | #bbbbbb | Light Color | | --tml-color-lighter | #cccccc | Lighter Color | | --tml-modal-z-index | 100 | Z-Index for modal | | --tml-modal-content-z-index | 10| Z-Index for modal content | |--tml-modal-animation-duration | 0.3s | Modal open animation duration | |--tml-modal-background-color |rgba(30, 30, 30, 0.8)| Modal background color | |--tml-modal-width |fit-content| Modal width | |--tml-modal-min-width |500px| Modal min width | |--tml-modal-max-width |100vw| Modal max width | |--tml-modal-height |80%` | Modal height |

There are a lot more variables which will be updated soon.

Tech Stack

Client: Vue3, Typescript, SCSS

Demo

Acknowledgements

• Filament Admin Media Library