مشكلة في دمج ملفين مع بعض في ملف واحد

السلام عليكم عند اضافة اكواد رفع الصور الى صفحة النشر

في موقعي

و بعد اختيار الصورة و الضغط على زر رفع يتم اعادة تحميل الصفحة بدلا من رفع الصورة و توليد رابط مباشر لها

اكواد صفحة رفع الصور تعمل بشكل سليم و هي في صفحة منفصلة عن صفحة النشر ربما المشكلة في الازرار لا اعلم

هذا جزء رفع الصور
<form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file" id="file" accept="image/*,video/*" required>
        <br><br>
        <button type="submit">رفع</button>
    </form>
    <div id="progress-bar">
        <div></div>
    </div>
    <div id="result"></div>

    <h3>روابط الصور المضافة:</h3>
    <div id="imageFieldsContainer"></div>

    <script>
        // دالة لإضافة حقل رابط صورة جديد
        function addImageField(url = '') {
            var container = document.getElementById('imageFieldsContainer');
            var inputField = document.createElement('input');
            inputField.type = 'url';
            inputField.name = 'image_urls[]';
            inputField.placeholder = 'رابط صورة (اختياري)';
            inputField.style.width = '100%';

            // إذا كان الرابط موجودًا، قم بضبط القيمة وجعل الحقل للقراءة فقط
            if (url) {
                inputField.value = url;
                inputField.readOnly = true;
            }

            container.appendChild(inputField);
            container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل
        }

        document.getElementById('upload-form').addEventListener('submit', function(event) {
            event.preventDefault();

            var fileInput = document.getElementById('file');
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    document.querySelector('#progress-bar div').style.width = percentComplete + '%';
                    document.querySelector('#progress-bar div').textContent = Math.round(percentComplete) + '%';
                }
            };

            xhr.onload = function() {
                if (xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var resultDiv = document.getElementById('result');
                    if (response.success) {
                        resultDiv.innerHTML = `<p>تم رفع الملف بنجاح. يمكنك الوصول إليه عبر الرابط التالي:</p>`;
                        resultDiv.innerHTML += `<a href="${response.url}" target="_blank">${response.url}</a>`;
                       
                        // إضافة الرابط إلى حقل الصور تلقائيًا
                        addImageField(response.url);
                    } else {
                        resultDiv.textContent = 'حدث خطأ أثناء رفع الملف.';
                    }
                } else {
                    alert('حدث خطأ أثناء محاولة رفع الملف.');
                }
            };

            xhr.send(formData);
        });
    </script>
و هذا زر نشر المنشور
 <button type="submit" name="submit_post">نشر المنشور</button>
</form>