Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Image from Clipboard</title>
</head>
<body>
    <h1>Paste an Image from Clipboard</h1>
    <input type="file" id="fileInput" style="display:none;">
    <img id="preview" src="" alt="Image Preview" style="max-width: 300px;">
    <p>Press <strong>Ctrl+V</strong> to paste the image.</p>

    <script>
        // Function to handle the paste event
        document.addEventListener('paste', async (event) => {
            const items = event.clipboardData.items;
            
            for (let item of items) {
                if (item.type.startsWith('image/')) {
                    const blob = item.getAsFile();

                    // Preview the image
                    const preview = document.getElementById('preview');
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                    };
                    reader.readAsDataURL(blob);

                    // Upload the image (example using fetch)
                    const formData = new FormData();
                    formData.append('file', blob, 'pasted-image.png');
                    
                    // Send the image to the server
                    try {
                        const response = await fetch('upload-url', {
                            method: 'POST',
                            body: formData
                        });
                        if (response.ok) {
                            console.log('Image uploaded successfully');
                        } else {
                            console.error('Upload failed');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }

                    break;  // Exit after processing the first image
                }
            }
        });
    </script>
</body>
</html>
Editor is loading...