import { Editor } from 'pixlr-sdk';

const frame = document.getElementById('your-iframe-id');
const fileInput = document.getElementById('your-file-input-id');

let editor;

fileInput.addEventListener('change', async (event) => {
    const files = event.target.files;
    if (files.length > 0) {
        const file = files[0]; // Use the first file for this example

        if(!editor) {
            // Connect to the Pixlr editor
            editor = await Editor.connect('your-jwt-token', frame);
        }

        // Open the file in the editor
        for await (const newFile of editor.open(file)) {
            // Handle the updated file
            // For example, display the edited image on your page
        }
    }
});