Media Library basic example

temp: 144529

by eitanp461

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.8.0/cloudinary-core.min.js"></script>
<script src="https://media-library.cloudinary.com/global/all.js"></script>
<html>

  <head>
    <title>Inline Test</title>
  </head>

  <body>

    <script src="//cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="//widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
 <script type="text/javascript">
      window.ml = cloudinary.createMediaLibrary({
          cloud_name: 'eitanpeer',
          api_key: '265875743184126',
          remove_header: false,
          max_files: '1',
          insert_caption: 'Insert',
          default_transformations: [
            []
          ],
          button_class: 'myBtn',
          button_caption: 'Select Image or Video'
        }, {
          insertHandler: function(data) {
            data.assets.forEach(asset => {
              console.log('Inserted Asset : ', JSON.stringify(asset, null, 2));
              console.log('InsertHandler : ', this.shadowRoot.querySelector('.myBtn'));
            })
          }
        },

        document.getElementById("#open-btn")
      );
      
      function openLibrary() {
      window.ml.show({
 				transformation: {
					url: 'https://eitanpeer-res.cloudinary.com/image/upload/e_grayscale/v1/sample.jpg'
				},
				})
      };

    </script>
    <hr />
    <div id="widget_here"></div>

    <a onClick="openLibrary()" href="#">Open Library and select image</a>
    <hr />

    <div id="thumbnails" />
    <hr />

   
  </body>

</html>