Media control is a responsive control for selecting documents and images from server.

For using media, you must reference jquery, bootstrap, font-awsome and media.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.css" />
    <link rel="stylesheet" href="https://github.com/bssyco/media/dist/css/media.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
    <script src="https://github.com/bssyco/media/dist/js/media.js"></script>

Add a div tag to your form.

    <div class="media-library"></div>

Call media in your js tag.

   $('.media-library').media({
       name: "mediaItems",
       apiUrl: "https://github.com/bssyco/media/docs/assets/index.json",
       title: "Media Library",
   }, this);

You select div element and call media with your options.

If you want call files from your server, you must replace your server api link with apiUrl value in media parameters.

Your server reponse must be like this:

    {
      "files": [
      {
        "url": "assets/sample1.jpg",
        "name": "sample1.jpg",
        "type": "image",
        "size": "1200",
        "modified": "2026-01-01"
      },
      {
        "url": "assets/sample2.jpg",
        "name": "sample2.jpg",
        "type": "image",
        "size": "1200",
        "modified": "2026-01-01"
      }
    ]
  }

when you submit the form that have media control, form submitted with name that you assigned in media options.

In this example, data submitted with name of ‘mediaItems’ and value of [“url1”, “url2”] in an array.