<div id="loading" style="display: none;">
 <div class="ball"></div>
 <div class="ball"></div>
 <div class="ball"></div>
 </div>
<div id="imgStenanev" style="display: none;padding: 10px;background-color: #dfdfdf;margin: 10px 0;border-radius:6px;">
 <p class="addmorephotos"><i class="fa fa-plus-circle"></i> მეტი ფოტოს დასამატებლად დაკლიკე uPload_ს</p>
 </div>
 <div style="border-radius: 5px;padding: 5px 8px 5px 8px;margin: 0px 0px -4px -18px;font: 12px 'Georgia', sans-serif;border: 1px solid #ddd;background: #ffffff;cursor: pointer;color: #444444;">
<span class="uploadImage" id="bs-newAPI" class="bs-newAPI" title="ატვირთე ფოტო კომენტარებში">
 
 <span style=""><i class="fa fa-upload" aria-hidden="true"></i></span>
 
 <span style="margin-left: 2px;">uPload img</span>
 </span>
<input type="file" id="file" name="file" multiple style="display: none;"> 
 </div>

const clientId = "a4512aae58a0d49";
const imgurAPI = 'https://api.imgur.com/3/image/';
 
 const btn = document.getElementById('bs-newAPI');
 const fileInput = document.getElementById('file');
 const imgStenanev = document.getElementById('imgStenanev');
 const commentField = document.getElementById('message');
 const submitButton = document.getElementById('addcBut');
 const loading = document.getElementById('loading');

 let imgBBCodes = [];

 // Replace with your audio file's URL
 const audioUrl = '/upload.wav';
 const audio = new Audio(audioUrl);

 btn.addEventListener('click', () => {
 fileInput.click();
 });

 fileInput.addEventListener('change', async (e) => {
 const files = Array.from(e.target.files);

 loading.style.display = 'block'; // Show loading animation

 for (const file of files) {
 const formData = new FormData();
 formData.append('image', file);
 
 try {
 const response = await fetch(imgurAPI, {
 method: 'POST',
 headers: {
 'Authorization': `Client-ID ${clientId}`
 },
 body: formData
 });
 
 const data = await response.json();
 
 if (response.ok) {
 const div = document.createElement('div');
 const img = document.createElement('img');
 img.src = data?.data?.link;
 div.appendChild(img);
 imgStenanev.appendChild(div);

 const imgBBCode = `[img]${img.src}[/img]`;
 imgBBCodes.push(imgBBCode);
 } else {
 console.error('Image upload failed:', data);
 }
 } catch (error) {
 console.error('Image upload failed:', error);
 }
 }
 
 loading.style.display = 'none'; // Hide loading animation
 imgStenanev.style.display = 'block';
 audio.play(); // Play audio
 });

 submitButton.addEventListener('click', () => {
 imgBBCodes.forEach(imgBBCode => {
 commentField.value += imgBBCode;
 });

 imgBBCodes = [];
 imgStenanev.style.display = 'none';
 imgStenanev.innerHTML = '';
 });

 .addmorephotos {font-size:13px;margin-bottom:5px;}
#imgStenanev img {max-width:40px;}

 .ball {
 width: 10px;
 height: 10px;
 margin: 5px;
 display: inline-block;
 border-radius: 100%;
 background-color: #000;
 animation: bounce 1s infinite ease-in-out;
 }

 .ball:nth-child(2) {
 animation-delay: -0.33s;
 background-color: #f00;
 }

 .ball:nth-child(3) {
 animation-delay: -0.66s;
 background-color: #0f0;
 }

 @keyframes bounce {
 0%, 80%, 100% {
 transform: scale(0);
 opacity: 0.5;
 }
 40% {
 transform: scale(1);
 opacity: 1;
 }
 }