<textarea style="width: 95%;height: 300px;resize: none;display: block;border: 1px solid #cdcdcd;" id="output_div" placeholder="All url codes will be here..."> </textarea> <button id='uploadBtn' class='main-button button'>Upload Codes</button> <input type="file" style='display: none;' id="myFileInput" multiple accept="image/*"> <script type='module'> async function uploadToImgur(files) { const CLIENT_ID = '33f63d5902f27e5'; // Map each file to a fetch promise const uploadPromises = Array.from(files).map(async (file) => { const formData = new FormData(); formData.append('image', file); try { const response = await fetch('https://api.imgur.com/3/image', { method: 'POST', headers: { Authorization: `Client-ID ${CLIENT_ID}` }, body: formData }); if (!response.ok) throw new Error(`Upload failed: ${response.statusText}`); const data = await response.json(); return { success: true, link: data.data.link }; } catch (error) { return { success: false, error: error.message }; } await sleep(10); }); // Execute all uploads concurrently return await Promise.all(uploadPromises); } // Example usage with a file input const fileInput = document.querySelector('#myFileInput'); const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', async () => { uploadBtn.textContent = "Uploading..."; uploadBtn.style.opacity = '0.7'; uploadBtn.style.pointerEvents = 'none'; const results = await uploadToImgur(fileInput.files); const output = document.getElementById('output_div'); results.forEach((res, index) => { if (res.success) { output.value += `${res.link}\n`; console.log(`Image ${index + 1} uploaded: ${res.link}`); } else { console.error(`Image ${index + 1} failed: ${res.error}`); } }); uploadBtn.textContent = "Upload"; uploadBtn.style.opacity = '1'; uploadBtn.style.pointerEvents = 'auto'; }); </script>