javascripthtmlajaxmultipartform-dataform-data

form data not receiving image file for submision (ajax)


this might be silly, but not my form nor my formdata are receiving my file input's image i want to the image to server folder using php but my php code never receives any image.

this is my code:

<form id="AZA-addatc-form" method="post" enctype="multipart/form-data">
        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-title" class="AZA-addatc-label">article title</label>
            <input type="text" id="AZA-addatc-title" name="AZA-addatc-title" class="AZA-addatc-input" required>
        </div>

        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-image" class="AZA-addatc-label">article picture</label>
            <input type="file" id="AZA-addatc-image" name="AZA-addatc-image" class="AZA-addatc-file-input" accept="image/*">
            <img id="AZA-addatc-preview" class="AZA-addatc-preview" src="#" alt="Image Preview">
            <small>choose image less than 5MB</small>
        </div>

        <div class="AZA-addatc-form-group">
            <label for="AZA-addatc-content" class="AZA-addatc-label">content</label>
            <div id="AZA-addatc-editor"></div>
            <textarea id="AZA-addatc-content" name="AZA-addatc-content" style="display:none;"></textarea>
        </div>

        <div class="AZA-addatc-form-group" style="visibility: hidden">
            <label class="AZA-addatc-label">
                <input type="checkbox" id="AZA-addatc-status" name="AZA-addatc-status" checked>
                Publish Immediately
            </label>
        </div>

        <button type="submit" class="AZA-addatc-submit">submit</button>
    </form>
const form = document.getElementById('AZA-addatc-form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Get content from Quill editor
        const content = document.getElementById('AZA-addatc-content');
        content.value = quill.root.innerHTML;

        // Validate form
        const title = document.getElementById('AZA-addatc-title').value.trim();
        const image = imageInput.files[0];
        console.log(image);

        if (!title) {
            showAlert('article title required', 'error');
            return;
        }

        if (!image) {
            showAlert('choose an image', 'error');
            return;
        }

        if (!content.value || content.value === '<p><br></p>') {
            showAlert('enter content', 'error');
            return;
        }

        // Prepare form data
        const formData = new FormData(form);
        // formData.append('AZA-addatc-title', document.getElementById('AZA-addatc-title').value);
        // formData.append('AZA-addatc-image', image);
        // formData.append('AZA-addatc-content', quill.root.innerHTML);
        // formData.append('AZA-addatc-status', document.getElementById('AZA-addatc-status').checked ? '1' : '0');
        formData.append('action', 'add_article');

        // Submit via AJAX
        submitArticle(formData);
    });

    // AJAX submission
    function submitArticle(formData) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'assets/php/database/A-add-article.php', true);

        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        showAlert(response.message, 'success');
                        form.reset();
                        quill.setContents([]);
                        imagePreview.style.display = 'none';
                    } else {
                        showAlert(response.message, 'error');
                    }
                } catch (e) {
                    showAlert('Error parsing server response', 'error');
                }
            } else {
                showAlert('quest error', 'error');
            }
        };

        xhr.onerror = function() {
            showAlert('server error', 'error');
        };
        console.log(formData);
        xhr.send(formData);
    }

    // Show alert message
    function showAlert(message, type) {
        const alertDiv = document.getElementById('AZA-addatc-alert');
        alertDiv.textContent = message;
        alertDiv.className = 'AZA-addatc-alert AZA-addatc-alert-' + type;
        alertDiv.style.display = 'block';

        setTimeout(() => {
            alertDiv.style.display = 'none';
        }, 5000);
    }

i do these but at last my image input returns empty into formdata

"AZA-addatc-image" → {}

i can't find what is wrong with this can any one help me out of this?


Solution

  • thanks every one for your answers

    but i found out what was the problem

    i changed the browser to chrome and saw that my image is being sent to my php file

    then i found my code problems

    first: i used application/json instead of multipart/form-data

    second: i added a column to my database but didn't add it in my query

    so now every thing works!