ts-medialibrary v1.2.1-alpha

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

Emits

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

Response

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

Delete item

  DELETE /PROPS_URL/${id}

Response

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

Error Response

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

Customization and Theming

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

Tech Stack

Client: Vue3, Typescript, SCSS

Demo

Acknowledgements

• Filament Admin Media Library