In this javascript code something wrong my image not storing I am using laravel and when i add multiple image. I make input via javascipt but when i sumbit and store image not storing to datebase i think smth wrong in javascript code
<div class="col-6" id="imageCol">
<div class="row flex-nowrap align-items-center" id="imageCard">
<div class="card image-card mb-2" style="height: 425px; width: 80%">
<div class="card-body">
<i class="bi bi-plus-circle" style="font-size: 60px"></i> <!-- Placeholder icon -->
</div>
</div>
<div class="d-block">
<div class="card image-card mb-2" style="width: 15%">
<div class="card-body">
<i class="bi bi-plus-circle"></i> <!-- Placeholder icon -->
</div>
</div>
<div class="card image-card mb-2" style="width: 15%">
<div class="card-body">
<i class="bi bi-plus-circle"></i> <!-- Placeholder icon -->
</div>
</div>
<div class="card image-card mb-2" style="width: 15%">
<div class="card-body">
<i class="bi bi-plus-circle"></i> <!-- Placeholder icon -->
</div>
</div>
<div class="card image-card mb-2" style="width: 15%">
<div class="card-body">
<i class="bi bi-plus-circle"></i> <!-- Placeholder icon -->
</div>
</div>
</div>
</div>
<div class="image-container">
<div class="col-8" id="firstImageContainer"></div>
<div class="col-3" id="smallImagesContainer"></div>
<span class="col-8 text-danger">Bellik: Surat ýüklenenden soň 400x400 bolýandyr suratlaryňyzy şoňa görä goýuň!</span>
</div>
</div>
<script>
const imageCardClickHandler = () => {
const imageInput = document.createElement('input');
Object.assign(imageInput, {
type: 'file',
accept: 'image/*',
name: 'image[]',
multiple: true,
});
document.body.appendChild(imageInput);
imageInput.click();
imageInput.addEventListener('change', function handleImageChange(event) {
const files = event.target.files;
const [firstImageContainer, smallImagesContainer] = ['firstImageContainer', 'smallImagesContainer'].map(id => document.getElementById(id));
if (!firstImageContainer || !smallImagesContainer) {
console.error('Image containers not found.');
return;
}
const existingImagesCount = firstImageContainer.children.length + smallImagesContainer.children.length;
const maxImagesAllowed = 6;
const imagesToAdd = Math.min(files.length, maxImagesAllowed - existingImagesCount);
const imageCard = document.getElementById('imageCard');
imageCard.parentNode.removeChild(imageCard);
for (let i = 0; i < imagesToAdd; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function (e) {
const image = document.createElement('img');
Object.assign(image, { src: e.target.result, classList: 'img-thumbnail' });
const imageWrapper = document.createElement('div');
imageWrapper.classList.add('image-wrapper');
imageWrapper.appendChild(image);
const removeIcon = document.createElement('i');
Object.assign(removeIcon, { classList: 'bi bi-trash-fill remove-icon' });
removeIcon.addEventListener('click', function () {
imageWrapper.parentNode.removeChild(imageWrapper);
});
imageWrapper.appendChild(removeIcon);
(firstImageContainer.children.length === 0 ? firstImageContainer : smallImagesContainer).appendChild(imageWrapper);
};
reader.onerror = error => console.error('Error reading image:', error);
reader.readAsDataURL(file);
}
if (existingImagesCount + imagesToAdd > maxImagesAllowed) {
alert(`You can only add up to ${maxImagesAllowed} images.`);
}
document.body.removeChild(imageInput);
});
};
document.getElementById('imageCard').addEventListener('click', imageCardClickHandler);
document.getElementById('imageForm').addEventListener('submit', function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(this);
const [firstImageContainer, smallImagesContainer] = ['firstImageContainer', 'smallImagesContainer'].map(id => document.getElementById(id));
if (!firstImageContainer || !smallImagesContainer) {
console.error('Image containers not found.');
return;
}
[...firstImageContainer.querySelectorAll('img'), ...smallImagesContainer.querySelectorAll('img')].forEach(img => {
formData.append('image[]', img.src);
});
fetch('/post/store', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with your fetch operation:', error));
});
</script>
Something wrong my code when i submit image not sumbiting smth wrong javascript code i can not find it