JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://media-library.cloudinary.com/global/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clone/2.1.2/clone.min.js"></script>
<button type="button" class="insert-image" data-url="https://res.cloudinary.com/made-media/image/upload/c_fill,f_auto,g_auto,h_360,q_auto,w_640/v1518993955/sample.jpg">Edit Image</button>

<button type="button" class="insert-image" data-width="640" data-height="360">Insert Image</button>

<!-- 720x405 -->

JavaScript

const cloudname = 'made-media';
const apikey = '537287965427583';
const apisecret = 'hlf9be2eC1ZBWPQ4cPc4RVIDPB8';
const username = '[email protected]';
const timestamp = Date.now();

const signature = sha256('cloud_name=' + cloudname + '&timestamp=' + timestamp + '&username=' + username + apisecret);

const transformations = {
    quality: 'auto',
    fetch_format: 'auto',
    gravity: 'auto',
    crop: 'fill',
};

const options = {
    cloud_name: cloudname,
    api_key: apikey,
    multiple: false,
    timestamp: timestamp,
    signature: signature,
    username: username,
    default_transformations: [
    	transformations,
    ],
};

const handlers = {
    insertHandler: function (data) {
        let image = null;

        if (0 in data.assets) {
        	if ('derived' in data.assets[0]) {
                image = data.assets[0].derived[0].secure_url;
            } else {
            	image = data.assets[0].secure_url;
            }
        }

		alert(image);
    },
};

const medialibrary = cloudinary.createMediaLibrary(options, handlers);

const buttons = document.querySelectorAll('.insert-image');

buttons.forEach(button => {
	button.addEventListener('click', function (event) {
        const elem = event.currentTarget;

        let opts = {
        	folder: {
            	path: '',
                resource_type: 'all',
            },
        };

        if ('url' in elem.dataset) {
            opts = {
                transformation: {
                    url: elem.dataset.url,
                },
            };
        }

        const transformation = clone(transformations);

		if ('width' in elem.dataset) {
        	transformation.width = elem.dataset.width;
        }

        if ('height' in elem.dataset) {
        	transformation.height = elem.dataset.height;
        }

    	opts.default_transformations = [transformation];

        medialibrary.show(opts);
    }, false);
});