{"id":105,"date":"2025-05-09T15:09:44","date_gmt":"2025-05-09T15:09:44","guid":{"rendered":"https:\/\/kentekenvideo.nl\/index.php\/kenteken-upload-2\/"},"modified":"2025-05-09T15:10:59","modified_gmt":"2025-05-09T15:10:59","slug":"upload","status":"publish","type":"page","link":"https:\/\/kentekenvideo.nl\/index.php\/upload\/","title":{"rendered":"Upload je foto\u2019s en Video\u2019s"},"content":{"rendered":"<form id=\"kentekenvideo-upload-form\" action=\"https:\/\/kentekenvideo.nl\/wp-admin\/admin-ajax.php\" method=\"post\" enctype=\"multipart\/form-data\"><input type=\"hidden\" name=\"action\" value=\"kentekenvideo_handle_upload\"><input type=\"hidden\" id=\"kentekenvideo_nonce\" name=\"kentekenvideo_nonce\" value=\"bb17f71df3\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/105\" \/><p>\r\n                    <label for=\"kenteken\">Kenteken (verplicht)<\/label><br>\r\n                    <input type=\"text\" name=\"kenteken\" id=\"kenteken\" required\/>\r\n                <\/p><p>\r\n                    <label for=\"record_date\">Wanneer is de foto of video gemaakt? (optioneel)<\/label><br>\r\n                    <input type=\"date\" name=\"record_date\" id=\"record_date\"\/>\r\n                <\/p><p>\r\n                    <label for=\"location_info\">Wil je delen waar de foto of video is gemaakt? (optioneel)<\/label><br>\r\n                    <input type=\"text\" name=\"location_info\" id=\"location_info\"\/>\r\n                <\/p><p>\r\n                    <label for=\"kentekenvideo_files\">Bestanden uploaden (verplicht)<\/label><br>\r\n                    <input type=\"file\" name=\"kentekenvideo_files[]\" id=\"kentekenvideo_files\" multiple required\/>\r\n                    <small>Selecteer meerdere foto's (max 10) of 1 video<\/small>\r\n                <\/p><div id=\"kvu-progress-bar-container\" style=\"display:none; width: 100%; background-color: #f3f3f3; border: 1px solid #ccc; border-radius: 5px; margin-top:10px; box-sizing: border-box;\"><div id=\"kvu-progress-bar\" style=\"width: 0%; height: 30px; background-color: #4CAF50; text-align: center; line-height: 30px; color: white; border-radius: 5px; transition: width 0.3s ease-in-out;\">0%<\/div><\/div><div id=\"kvu-upload-status\" style=\"margin-top:10px; font-weight: bold;\"><\/div><p style=\"margin-top:15px;\">\r\n                    <input type=\"checkbox\" name=\"consent\" id=\"consent\" required\/>\r\n                    <label for=\"consent\">\r\n                        Hierbij geef je akkoord dat je de eigenaar bent van het materiaal dat je upload. En hierbij geef je KentekenVideo.nl toestemming om het materiaal te gebruiken op de manier dat KentekenVideo.nl wil, zoals voor commercieel doelen.\r\n                    <\/label>\r\n                <\/p><div class=\"g-recaptcha\" data-sitekey=\"6LdqczArAAAAALbZmbMmnOL4r2BxJej63NGoli1b\"><\/div><script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" async defer id=\"google-recaptcha\"><\/script><p>\r\n                    <input type=\"submit\" name=\"kentekenvideo_submit\" value=\"Uploaden\"\/>\r\n                <\/p><\/form>    <script type=\"text\/javascript\">\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const form = document.getElementById('kentekenvideo-upload-form');\r\n        if (!form) {\r\n            return;\r\n        }\r\n\r\n        const progressBarContainer = document.getElementById('kvu-progress-bar-container');\r\n        const progressBar = document.getElementById('kvu-progress-bar');\r\n        const uploadStatus = document.getElementById('kvu-upload-status');\r\n        const submitButton = form.querySelector('input[type=\"submit\"]');\r\n\r\n        form.addEventListener('submit', function(e) {\r\n            e.preventDefault();\r\n\r\n            const formActionUrl = form.getAttribute('action'); \/\/ Get the action URL correctly\r\n            console.log('Attempting to POST to:', formActionUrl); \r\n\r\n            uploadStatus.innerHTML = '';\r\n            if (progressBarContainer) progressBarContainer.style.display = 'block';\r\n            if (progressBar) {\r\n                progressBar.style.width = '0%';\r\n                progressBar.textContent = '0%';\r\n            }\r\n            if (submitButton) submitButton.disabled = true;\r\n\r\n            const formData = new FormData(form);\r\n            const xhr = new XMLHttpRequest();\r\n\r\n            xhr.open('POST', formActionUrl, true); \/\/ Use the correctly obtained URL\r\n\r\n            xhr.upload.onprogress = function(event) {\r\n                if (event.lengthComputable) {\r\n                    const percentComplete = Math.round((event.loaded \/ event.total) * 100);\r\n                    if (progressBar) {\r\n                        progressBar.style.width = percentComplete + '%';\r\n                        progressBar.textContent = percentComplete + '%';\r\n                    }\r\n                }\r\n            };\r\n\r\n            xhr.onload = function() {\r\n                if (submitButton) submitButton.disabled = false;\r\n                \r\n                if (xhr.status >= 200 && xhr.status < 300) {\r\n                    try {\r\n                        const response = JSON.parse(xhr.responseText);\r\n                        if (response.success) {\r\n                            uploadStatus.innerHTML = '<div style=\"color: green;\">' + escapeHTML(response.data.message) + '<\/div>';\r\n                            form.reset(); \r\n                            if (progressBar) { \r\n                                 progressBar.style.width = '0%';\r\n                                 progressBar.textContent = '0%';\r\n                            }\r\n                            if (progressBarContainer) progressBarContainer.style.display = 'none';\r\n\r\n                            if (typeof grecaptcha !== 'undefined' && grecaptcha.reset && form.querySelector('.g-recaptcha')) {\r\n                                const widgets = document.querySelectorAll('[id^=\"___grecaptcha_\"]');\r\n                                widgets.forEach(widget => {\r\n                                    const widgetId = widget.getAttribute('data-widgetid');\r\n                                    if(widgetId) {\r\n                                       try { grecaptcha.reset(parseInt(widgetId)); } catch(e) { \/* console.error(\"Error resetting reCAPTCHA widget:\", e); *\/ }\r\n                                    } else if (widget.classList.contains('g-recaptcha-response')) {\r\n                                        try { grecaptcha.reset(); } catch(e) { \/* console.error(\"Error resetting reCAPTCHA:\", e); *\/ }\r\n                                    }\r\n                                });\r\n                                if (form.querySelector('.g-recaptcha') && typeof grecaptcha.reset === 'function') {\r\n                                    try { grecaptcha.reset(); } catch(e) { \/*ignore*\/ }\r\n                                }\r\n                            }\r\n                        } else {\r\n                            uploadStatus.innerHTML = '<div style=\"color: red;\">Fout: ' + escapeHTML(response.data.message || 'Er is een onbekende fout opgetreden.') + '<\/div>';\r\n                             if (progressBarContainer) progressBarContainer.style.display = 'none';\r\n                            if (response.data && response.data.recaptcha_reset && typeof grecaptcha !== 'undefined' && grecaptcha.reset && form.querySelector('.g-recaptcha')) {\r\n                                 try { grecaptcha.reset(); } catch(e) { \/*ignore*\/ }\r\n                            }\r\n                        }\r\n                    } catch (e) {\r\n                        uploadStatus.innerHTML = '<div style=\"color: red;\">Fout bij het verwerken van het antwoord van de server.<\/div>';\r\n                        console.error(\"Error parsing JSON:\", e, xhr.responseText);\r\n                        if (progressBarContainer) progressBarContainer.style.display = 'none';\r\n                    }\r\n                } else {\r\n                    uploadStatus.innerHTML = '<div style=\"color: red;\">Uploadfout: Server antwoordde met status ' + xhr.status + '. Controleer de console voor de URL.<\/div>';\r\n                    console.error(\"Server error on AJAX request:\", xhr.status, xhr.statusText, \"Requested URL:\", formActionUrl, \"Response:\", xhr.responseText); \/\/ Use corrected URL here too\r\n                    if (progressBarContainer) progressBarContainer.style.display = 'none';\r\n                }\r\n            };\r\n\r\n            xhr.onerror = function() {\r\n                if (submitButton) submitButton.disabled = false;\r\n                if (progressBarContainer) progressBarContainer.style.display = 'none';\r\n                uploadStatus.innerHTML = '<div style=\"color: red;\">Netwerkfout bij het uploaden. Controleer uw internetverbinding.<\/div>';\r\n            };\r\n\r\n            xhr.send(formData);\r\n        });\r\n\r\n        function escapeHTML(str) {\r\n            if (str === null || typeof str === 'undefined') return '';\r\n            if (typeof str !== 'string') str = String(str);\r\n            const p = document.createElement('p');\r\n            p.textContent = str;\r\n            return p.innerHTML;\r\n        }\r\n    });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[],"class_list":["post-105","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/pages\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":2,"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":107,"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/pages\/105\/revisions\/107"}],"wp:attachment":[{"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kentekenvideo.nl\/index.php\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}