f43f92f365
- add deal category migration - add deals migration and model - add form to create deal - add image preview modal when uploading the image - refactor UI components to support `required` attribute - refactor input component to support description - fix some UI components does not support old values - fix some UI components does not show error messages
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
function upload(size) {
|
|
const imageInput = document.getElementById("image-input");
|
|
const closeModalBtn = document.getElementById("close-modal");
|
|
const cancelBtn = document.getElementById("cancel-modal");
|
|
const modal = document.getElementById("image-modal");
|
|
|
|
closeModalBtn.addEventListener('click', () => {
|
|
// this closes modal but does not remove the image from file input
|
|
modal.close();
|
|
})
|
|
|
|
cancelBtn.addEventListener('click', () => {
|
|
// clears the file from image input field and closes the modal
|
|
imageInput.value = "";
|
|
modal.close();
|
|
})
|
|
|
|
const image = imageInput.files[0];
|
|
|
|
if (!image || !image.type.includes("image")) {
|
|
alert("Please upload a valid image");
|
|
return;
|
|
}
|
|
if (image.size > size * 1000000) {
|
|
alert(`Max size of image is ${size} MB`);
|
|
return;
|
|
}
|
|
|
|
// Creating a FileReader class to convert image blob to base64
|
|
const fileReader = new FileReader();
|
|
fileReader.readAsDataURL(image);
|
|
|
|
fileReader.onload = (e) => {
|
|
const imagePlaceholder = document.getElementById("image-placeholder");
|
|
imagePlaceholder.src = e.target.result;
|
|
modal.showModal();
|
|
}
|
|
}
|
|
|
|
document.upload = upload;
|