Photo and Video Uploader

Image Upload Form

Upload images for your website and assign them to the appropriate service category

Upload Images *

Click to upload or drag & drop
PNG, JPG, JPEG, WEBP — Multiple files allowed
Uploading...
' + '
' + formatSize(file.size) + '
' + '
Ready to upload
' + '
' + '' + '
' + '
' + '
' + '' + '' + '
' + '
' + '' + '' + '
' + '
'; container.appendChild(card); } window._iufRemove = function(id) { var idx = -1; for (var i = 0; i < files.length; i++) { if (files[i].id === id) { idx = i; break; } } if (idx !== -1) { URL.revokeObjectURL(files[idx].url); files.splice(idx, 1); } var el = document.getElementById(id); if (el) el.remove(); }; // ── Upload to WordPress ── function uploadToWP(file) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('POST', WP_SITE + '/wp-json/wp/v2/media', true); xhr.setRequestHeader('Authorization', 'Basic ' + WP_AUTH); xhr.setRequestHeader('Content-Disposition', 'attachment; filename="' + encodeURIComponent(file.name) + '"'); xhr.setRequestHeader('Content-Type', file.type); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { try { var data = JSON.parse(xhr.responseText); resolve({ url: data.source_url, id: data.id }); } catch(e) { reject(new Error('Failed to parse WordPress response')); } } else { reject(new Error('WordPress upload failed: ' + xhr.status)); } }; xhr.onerror = function() { reject(new Error('Network error uploading to WordPress')); }; xhr.send(file); }); } // ── Send to Webhook ── function sendToWebhook(payload) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('POST', WEBHOOK_URL, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { resolve(xhr.status); }; xhr.onerror = function() { // Still resolve — webhook may have received data even if CORS blocks response resolve(0); }; xhr.send(JSON.stringify(payload)); }); } // ── Submit ── document.getElementById('iufSubmitBtn').addEventListener('click', async function() { var msgEl = document.getElementById('iufMessage'); var btn = document.getElementById('iufSubmitBtn'); var progressWrap = document.getElementById('iufProgressWrap'); var progressFill = document.getElementById('iufProgressFill'); var progressText = document.getElementById('iufProgressText'); msgEl.className = 'form-message'; msgEl.style.display = 'none'; if (files.length === 0) { msgEl.textContent = 'Please upload at least one image.'; msgEl.className = 'form-message error'; msgEl.style.display = 'block'; return; } // Validate categories for (var i = 0; i < files.length; i++) { var sel = document.getElementById('cat_' + files[i].id); if (!sel || !sel.value) { msgEl.textContent = 'Please select a category for "' + files[i].file.name + '".'; msgEl.className = 'form-message error'; msgEl.style.display = 'block'; return; } } btn.disabled = true; btn.textContent = 'Uploading...'; progressWrap.style.display = 'block'; progressFill.style.width = '0%'; var total = files.length; var completed = 0; var errors = 0; for (var j = 0; j < files.length; j++) { var entry = files[j]; var statusEl = document.getElementById('status_' + entry.id); var catEl = document.getElementById('cat_' + entry.id); var descEl = document.getElementById('desc_' + entry.id); try { // Step 1: Upload to WordPress if (statusEl) { statusEl.textContent = 'Uploading to WordPress...'; statusEl.className = 'entry-status uploading'; } progressText.textContent = 'Uploading "' + entry.file.name + '" to WordPress... (' + (completed + 1) + ' of ' + total + ')'; var wpResult = await uploadToWP(entry.file); // Step 2: Send to webhook if (statusEl) { statusEl.textContent = 'Sending to webhook...'; } progressText.textContent = 'Sending data to webhook... (' + (completed + 1) + ' of ' + total + ')'; await sendToWebhook({ image_url: wpResult.url, wp_media_id: wpResult.id, filename: entry.file.name, category: catEl ? catEl.value : '', description: descEl ? descEl.value.trim() : '', submitted_at: new Date().toISOString() }); if (statusEl) { statusEl.textContent = 'Uploaded successfully'; statusEl.className = 'entry-status success'; } completed++; } catch(err) { console.error('Error for ' + entry.file.name + ':', err); if (statusEl) { statusEl.textContent = 'Failed: ' + err.message; statusEl.className = 'entry-status error'; } errors++; completed++; } var pct = Math.round((completed / total) * 100); progressFill.style.width = pct + '%'; } progressWrap.style.display = 'none'; if (errors === 0) { msgEl.textContent = total + ' image' + (total > 1 ? 's' : '') + ' uploaded and submitted successfully!'; msgEl.className = 'form-message success'; msgEl.style.display = 'block'; // Clear files.forEach(function(f) { URL.revokeObjectURL(f.url); }); files = []; document.getElementById('iufEntries').innerHTML = ''; } else { msgEl.textContent = (total - errors) + ' of ' + total + ' images sent. ' + errors + ' failed — please try again.'; msgEl.className = 'form-message error'; msgEl.style.display = 'block'; } btn.disabled = false; btn.textContent = 'Submit Images'; }); })();

This website uses cookies.