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?
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!