// Function to upload image
function uploadImage(imageInput, previewImage, imageUrlElement, copyButton, progressBar) {
const file = imageInput.files[0];
const formData = new FormData();
formData.append('image', file);
// Show the progress bar
progressBar.style.display = 'block';
fetch('https://api.imgbb.com/1/upload?key=6062c1a0e81e57b4484980358921462f', {
method: 'POST',
body: formData,
onUploadProgress: function(progressEvent) {
const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
progressBar.value = progress;
}
})
.then(response => response.json())
.then(data => {
const imageUrl = data.data.url;
imageUrlElement.value = imageUrl;
previewImage.src = imageUrl;
// Add event listener for copy button
copyButton.addEventListener('click', () => {
imageUrlElement.select();
document.execCommand('copy');
});
// Hide the progress bar when finished
progressBar.style.display = 'none';
})
.catch(error => {
console.error('Error:', error);
// Hide the progress bar on error
progressBar.style.display = 'none';
});
}
// First image
const imageInput1 = document.getElementById('image-input1');
const previewImage1 = document.getElementById('preview-image1');
const imageUrlElement1 = document.getElementById('image-url1');
const copyButton1 = document.getElementById('copy-button1');
const progressBar1 = document.getElementById('progress-bar1');
imageInput1.addEventListener('change', () => {
uploadImage(imageInput1, previewImage1, imageUrlElement1, copyButton1, progressBar1);
});
// Second image
const imageInput2 = document.getElementById('image-input2');
const previewImage2 = document.getElementById('preview-image2');
const imageUrlElement2 = document.getElementById('image-url2');
const copyButton2 = document.getElementById('copy-button2');
const progressBar2 = document.getElementById('progress-bar2');
imageInput2.addEventListener('change', () => {
uploadImage(imageInput2, previewImage2, imageUrlElement2, copyButton2, progressBar2);
});
// Third image
const imageInput3 = document.getElementById('image-input3');
const previewImage3 = document.getElementById('preview-image3');
const imageUrlElement3 = document.getElementById('image-url3');
const copyButton3 = document.getElementById('copy-button3');
const progressBar3 = document.getElementById('progress-bar3');
imageInput3.addEventListener('change', () => {
uploadImage(imageInput3, previewImage3, imageUrlElement3, copyButton3, progressBar3);
});
// Fourth image
const imageInput4 = document.getElementById('image-input4');
const previewImage4 = document.getElementById('preview-image4');
const imageUrlElement4 = document.getElementById('image-url4');
const copyButton4 = document.getElementById('copy-button4');
const progressBar4 = document.getElementById('progress-bar4');
imageInput4.addEventListener('change', () => {
uploadImage(imageInput4, previewImage4, imageUrlElement4, copyButton4, progressBar4);
});
// Fiveth image
const imageInput5 = document.getElementById('image-input5');
const previewImage5 = document.getElementById('preview-image5');
const imageUrlElement5 = document.getElementById('image-url5');
const copyButton5 = document.getElementById('copy-button5');
const progressBar5 = document.getElementById('progress-bar5');
imageInput5.addEventListener('change', () => {
uploadImage(imageInput5, previewImage5, imageUrlElement5, copyButton5, progressBar5);
});
// Sixth image
const imageInput6 = document.getElementById('image-input6');
const previewImage6 = document.getElementById('preview-image6');
const imageUrlElement6 = document.getElementById('image-url6');
const copyButton6 = document.getElementById('copy-button6');
const progressBar6 = document.getElementById('progress-bar6');
imageInput6.addEventListener('change', () => {
uploadImage(imageInput6, previewImage6, imageUrlElement6, copyButton6, progressBar6);
});