<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Upload to Imgbb</title>
<style>
.upload-box {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
}
.drop-zone {
border: 2px dashed #c3c7d1;
border-radius: 10px;
padding: 40px 20px;
cursor: pointer;
color: #666;
transition: all 0.3s;
margin-bottom: 20px;
}
.[Link] {
border-color: #007bff;
background-color: #f0f8ff;
}
.output {
margin-top: 20px;
word-break: break-all;
background: #f9f9f9;
padding: 15px;
border-radius: 5px;
text-align: left;
}
button {
margin: 10px 5px;
padding: 10px 15px;
border: none;
background: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #0056b3;
}
[Link] {
background: #6c757d;
}
[Link]:hover {
background: #5a6268;
}
.preview-container {
margin: 15px 0;
text-align: center;
}
.preview-image {
max-width: 100%;
max-height: 300px;
border-radius: 5px;
border: 1px solid #ddd;
}
.progress-container {
width: 100%;
background-color: #e9ecef;
border-radius: 5px;
margin: 15px 0;
display: none;
}
.progress-bar {
width: 0%;
height: 20px;
background-color: #28a745;
border-radius: 5px;
transition: width 0.3s;
text-align: center;
color: white;
line-height: 20px;
font-size: 12px;
}
.url-container {
background: #f1f1f1;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
word-break: break-all;
}
.share-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.success-message {
color: #28a745;
font-weight: bold;
margin: 10px 0;
}
.error-message {
color: #dc3545;
font-weight: bold;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="upload-box">
<h2>Image Uploader</h2>
<p>Drag & drop or click to upload images</p>
<div class="drop-zone" id="dropZone">
<div id="dropZoneContent">
<svg xmlns="[Link] width="48" height="48" viewBox="0 0
24 24" fill="none" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
<p>Choose a file or drag & drop it here</p>
<p class="small">Supports: JPG, PNG, GIF, etc.</p>
</div>
</div>
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar">0%</div>
</div>
<div class="output" id="output" style="display: none;">
<div class="preview-container" id="previewContainer"></div>
<div id="resultMessage"></div>
<div class="url-container" id="urlContainer"></div>
<div class="share-buttons" id="shareButtons"></div>
</div>
</div>
<script>
const dropZone = [Link]('dropZone');
const dropZoneContent = [Link]('dropZoneContent');
const fileInput = [Link]('fileInput');
const output = [Link]('output');
const previewContainer = [Link]('previewContainer');
const resultMessage = [Link]('resultMessage');
const urlContainer = [Link]('urlContainer');
const shareButtons = [Link]('shareButtons');
const progressContainer = [Link]('progressContainer');
const progressBar = [Link]('progressBar');
const imgbbAPIKey = "***"; // 🔁 Replace with your API key
[Link]('click', () => [Link]());
[Link]('dragover', (e) => {
[Link]();
[Link]('dragover');
});
[Link]('dragleave', () => {
[Link]('dragover');
});
[Link]('drop', (e) => {
[Link]();
[Link]('dragover');
if ([Link] > 0) {
handleFileUpload([Link][0]);
}
});
[Link]('change', () => {
if ([Link] > 0) {
handleFileUpload([Link][0]);
}
});
function handleFileUpload(file) {
if (!file || ) {
showError("Only image files are allowed.");
return;
}
// Show preview
const reader = new FileReader();
[Link] = (e) => {
[Link] = `<img class="preview-image" src="$
{[Link]}" alt="Preview">`;
};
[Link](file);
// Show upload in progress
[Link] = 'block';
[Link] = '<div class="success-message">Uploading
image...</div>';
[Link] = '';
[Link] = '';
[Link] = 'block';
[Link] = '0%';
[Link] = '0%';
// Update drop zone content
[Link] = `
<svg xmlns="[Link] width="48" height="48" viewBox="0 0
24 24" fill="none" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0
2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
<p>${[Link]}</p>
<p class="small">${formatFileSize([Link])}</p>
`;
// Simulate progress (since we can't track actual upload progress with imgbb
API)
let progress = 0;
const progressInterval = setInterval(() => {
progress += [Link]() * 10;
if (progress > 90) progress = 90;
updateProgress(progress);
}, 200);
// Prepare and send the request
const formData = new FormData();
[Link]('image', file);
fetch(`[Link] {
method: "POST",
body: formData,
})
.then(res => [Link]())
.then(data => {
clearInterval(progressInterval);
updateProgress(100);
if ([Link]) {
const imageUrl = [Link];
const deleteUrl = [Link].delete_url;
[Link] = '<div class="success-message">✅ Upload
successful!</div>';
[Link] = `
<strong>Image URL:</strong><br>
<input type="text" value="${imageUrl}" id="imageUrlInput" readonly
style="width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 3px;
margin-top: 5px;">
`;
[Link] = `
<button onclick="copyToClipboard('${imageUrl}')">Copy URL</button>
<button class="secondary" onclick="copyToClipboard('$
{deleteUrl}')">Copy Delete URL</button>
<button class="secondary"
onclick="shareImage('${imageUrl}')">Share</button>
<button onclick="[Link]('${imageUrl}', '_blank')">View
Image</button>
`;
} else {
showError("Upload failed. " + ([Link] ? [Link] : "Please
try again."));
}
})
.catch(err => {
clearInterval(progressInterval);
showError("Upload error. " + [Link]);
[Link](err);
});
}
function updateProgress(percent) {
[Link] = `${percent}%`;
[Link] = `${[Link](percent)}%`;
}
function showError(message) {
[Link] = 'block';
[Link] = `<div class="error-message">❌ ${message}</div>`;
[Link] = '';
[Link] = '';
[Link] = 'none';
}
function copyToClipboard(text) {
[Link](text).then(() => {
alert("Copied to clipboard!");
}).catch(err => {
[Link]("Could not copy text: ", err);
// Fallback for older browsers
const textarea = [Link]('textarea');
[Link] = text;
[Link](textarea);
[Link]();
[Link]('copy');
[Link](textarea);
alert("Copied to clipboard!");
});
}
function shareImage(url) {
if ([Link]) {
[Link]({
title: 'Check out this image',
text: 'I uploaded this image using Imgbb',
url: url
}).catch(err => {
[Link]('Error sharing:', err);
[Link](`[Link]
{encodeURIComponent(url)}`, '_blank');
});
} else {
// Fallback for browsers that don't support Web Share API
[Link](`[Link]
{encodeURIComponent(url)}`, '_blank');
}
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = [Link]([Link](bytes) / [Link](k));
return parseFloat((bytes / [Link](k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>
</body>
</html>
