beenull/Imgur-Clone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added preview for img upload

Browse source
This commit is contained in:
Toddeh Alexander - MacAir 2024-05-02 14:27:00 -07:00
parent 7b102c3cd4
commit 1c7505d5de
1 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/php/index.php Executable file → Normal file
View file

@ -46,7 +46,6 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
@ -78,13 +77,21 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
</form>
</div>
<button id="upload-button" class="upload-button" disabled>Upload Image</button>
<button id="upload-button" class="upload-button" disabled>Upload Image</button>
<div id="image-preview-container" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
<h2>Upload Preview</h2>
<span id="preview-placeholder" style="display: block;">A preview will appear here once you upload.</span>
<img id="image-preview" src="#" alt="" style="height: 300px;">
</div>
<script>
const dropZone = document.querySelector('.drop-zone');
const input = document.getElementById('image');
const form = document.getElementById('upload-form');
const uploadButton = document.getElementById('upload-button');
const imagePreview = document.getElementById('image-preview');
const previewPlaceholder = document.getElementById('preview-placeholder');
dropZone.addEventListener('click', () => {
input.click();
@ -112,7 +119,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
handleFileUpload(file);
});
function handleFileUpload(file) {
function handleFileUpload(file) {
// Check if the file is of a valid image type
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
@ -122,6 +129,9 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
input.value = '';
uploadButton.classList.remove('enabled');
uploadButton.setAttribute('disabled', 'disabled');
// Clear the image preview
imagePreview.src = '';
previewPlaceholder.style.display = 'block';
return;
}
@ -134,14 +144,19 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
input.value = '';
uploadButton.classList.remove('enabled');
uploadButton.setAttribute('disabled', 'disabled');
// Clear the image preview
imagePreview.src = '';
previewPlaceholder.style.display = 'block';
return;
}
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
imagePreview.src = reader.result;
uploadButton.classList.add('enabled');
uploadButton.removeAttribute('disabled');
previewPlaceholder.style.display = 'none';
};
}
@ -163,10 +178,11 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
form.submit();
});
input.addEventListener('click', (e) => {
e.stopPropagation();
});
e.stopPropagation();
});
</script>
</body>
</html>
</html>