Image to URLh
Uploaded by
merazalveedevImage to URLh
Uploaded by
merazalveedev<!
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;
}
.drop-zone.dragover {
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;
}
button.secondary {
background: #6c757d;
}
button.secondary: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="http://www.w3.org/2000/svg" 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 = document.getElementById('dropZone');
const dropZoneContent = document.getElementById('dropZoneContent');
const fileInput = document.getElementById('fileInput');
const output = document.getElementById('output');
const previewContainer = document.getElementById('previewContainer');
const resultMessage = document.getElementById('resultMessage');
const urlContainer = document.getElementById('urlContainer');
const shareButtons = document.getElementById('shareButtons');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const imgbbAPIKey = "***"; // 🔁 Replace with your API key
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
if (e.dataTransfer.files.length > 0) {
handleFileUpload(e.dataTransfer.files[0]);
}
});
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
handleFileUpload(fileInput.files[0]);
}
});
function handleFileUpload(file) {
if (!file || !file.type.startsWith('image/')) {
showError("Only image files are allowed.");
return;
}
// Show preview
const reader = new FileReader();
reader.onload = (e) => {
previewContainer.innerHTML = `<img class="preview-image" src="$
{e.target.result}" alt="Preview">`;
};
reader.readAsDataURL(file);
// Show upload in progress
output.style.display = 'block';
resultMessage.innerHTML = '<div class="success-message">Uploading
image...</div>';
urlContainer.innerHTML = '';
shareButtons.innerHTML = '';
progressContainer.style.display = 'block';
progressBar.style.width = '0%';
progressBar.textContent = '0%';
// Update drop zone content
dropZoneContent.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" 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>${file.name}</p>
<p class="small">${formatFileSize(file.size)}</p>
`;
// Simulate progress (since we can't track actual upload progress with imgbb
API)
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 90) progress = 90;
updateProgress(progress);
}, 200);
// Prepare and send the request
const formData = new FormData();
formData.append('image', file);
fetch(`https://api.imgbb.com/1/upload?key=${imgbbAPIKey}`, {
method: "POST",
body: formData,
})
.then(res => res.json())
.then(data => {
clearInterval(progressInterval);
updateProgress(100);
if (data.success) {
const imageUrl = data.data.url;
const deleteUrl = data.data.delete_url;
resultMessage.innerHTML = '<div class="success-message">✅ Upload
successful!</div>';
urlContainer.innerHTML = `
<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;">
`;
shareButtons.innerHTML = `
<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="window.open('${imageUrl}', '_blank')">View
Image</button>
`;
} else {
showError("Upload failed. " + (data.error ? data.error.message : "Please
try again."));
}
})
.catch(err => {
clearInterval(progressInterval);
showError("Upload error. " + err.message);
console.error(err);
});
}
function updateProgress(percent) {
progressBar.style.width = `${percent}%`;
progressBar.textContent = `${Math.round(percent)}%`;
}
function showError(message) {
output.style.display = 'block';
resultMessage.innerHTML = `<div class="error-message">❌ ${message}</div>`;
urlContainer.innerHTML = '';
shareButtons.innerHTML = '';
progressContainer.style.display = 'none';
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert("Copied to clipboard!");
}).catch(err => {
console.error("Could not copy text: ", err);
// Fallback for older browsers
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert("Copied to clipboard!");
});
}
function shareImage(url) {
if (navigator.share) {
navigator.share({
title: 'Check out this image',
text: 'I uploaded this image using Imgbb',
url: url
}).catch(err => {
console.log('Error sharing:', err);
window.open(`https://www.facebook.com/sharer/sharer.php?u=$
{encodeURIComponent(url)}`, '_blank');
});
} else {
// Fallback for browsers that don't support Web Share API
window.open(`https://www.facebook.com/sharer/sharer.php?u=$
{encodeURIComponent(url)}`, '_blank');
}
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>
</body>
</html>
