☰

Show UploadKit thumbnails on order page

Adds a thumbnail image to UploadKit links when viewing your Shopify order

// ==UserScript==
// @name         Show UploadKit thumbnails on order page
// @namespace    https://getuploadkit.com/
// @version      0.1
// @description  Adds a thumbnail image to UploadKit links when viewing your Shopify order
// @author       UploadKit
// @match        https://admin.shopify.com/*
// @icon         https://cdn.shopify.com/app-store/listing_images/c0fcf6b4639a2c657688c4e60f14e8f4/icon/CPrOqMv0lu8CEAE=.jpg
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const regex = new RegExp(
        "https:\\/\\/cdn2?\\.shopify\\.com(?:-uploadkit\\.app)?\\/.*\\?.*id=[^&]*&uu=([^&]*)&mo=([^&]*)&fi=([^&]*)(?:(?!&image).)*(&image=true)?",
        "g"
    );

    const checkAndRunOnNewNode = (node) => {
        if (node.nodeName.toLowerCase() === 'a') {
            if(node.getAttribute('href') && node.getAttribute('href').match(regex)) {
                const url = new URL(node.getAttribute('href'));
                const params = new URLSearchParams(url.search);

                var filename = params.get('fi');
                var decodedFilename = filename > '' ? atob(filename) : ''

                if(params.get('image')) {
                    const previewImageUrl = 'https://files.getuploadkit.com/' + params.get('id') + '/' + params.get('uu') + '/' + params.get('mo') + decodedFilename + '?preview=1';
                    console.log('previewImageUrl', previewImageUrl)
                    const previewImg = document.createElement('img')
                    previewImg.src = previewImageUrl
                    previewImg.href = node.getAttribute('href')
                    previewImg.style.width = '80px'
                    previewImg.style.marginLeft = '10px'
                    node.style.display = 'flex'
                    node.insertAdjacentElement('beforeend', previewImg)
                }
            }
        }
        // If this node has children, we want to go through them
        node.childNodes.forEach(checkAndRunOnNewNode);
    }

    const callback = function(mutationsList, observer) {
        // Recursive function to go through all nodes and descendants

        // Go through all mutations that have occurred
        for(let mutation of mutationsList) {
            // If the mutation added nodes
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // Go through all the added nodes
                mutation.addedNodes.forEach(checkAndRunOnNewNode);
            }
        }
    };

    const observer = new MutationObserver(callback);
    observer.observe(document, { childList: true, subtree: true });


})();