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

allowed for gif upload, changed js and html to accept file type input

Browse source
This commit is contained in:
Toddeh 2024-04-13 22:00:09 -07:00
parent f8ed25ff76
commit a9492bcc5f
2 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/index.html
View file

@ -21,9 +21,9 @@
<!-- Home Page (Upload) -->
<div id="drag-drop-container">
<h2>Drag and Drop Images</h2>
<p>Drop your PNG or JPEG files here <br><br>or click to select a file</p>
<p>PNG | JPEG | GIF files only <br><br>or click to select a file</p>
<div id="file-info"></div>
<input type="file" id="file-input" name="file" accept="image/png, image/jpeg" hidden>
<input type="file" id="file-input" name="file" accept="image/png, image/jpeg, image/gif" hidden>
</div>
<br>
<br>

18
frontend/js/script.js
View file

@ -22,13 +22,13 @@ dragDropContainer.addEventListener('drop', (event) => {
// Get the first file from the dropped files
const file = event.dataTransfer.files[0];
// Check if the file is a PNG or JPEG
if (file.type === 'image/png' || file.type === 'image/jpeg') {
// Check if the file is a PNG, JPEG, or GIF
if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif') {
selectedFile = file;
updateFileInfo(file.name);
enableUploadButton();
} else {
alert('Please drop a PNG or JPEG file.');
alert('Please drop a PNG, JPEG, or GIF file.');
}
});
@ -38,7 +38,7 @@ dragDropContainer.addEventListener('click', () => {
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
selectedFile = file;
updateFileInfo(file.name);
enableUploadButton();
@ -56,13 +56,9 @@ uploadButton.addEventListener('click', () => {
// ...
console.log('Uploading file:', selectedFile.name);
//THIS IS A TEST CASE TO MAKE SURE IMG IS BEING UPLOADED PROPER, NEED TO CONFIG SENDING TO SERVER!
// Open the uploaded PNG image in a new tab
if (selectedFile.type === 'image/png') {
const imageUrl = URL.createObjectURL(selectedFile);
window.open(imageUrl, '_blank');
}
// Open the uploaded image in a new tab
const imageUrl = URL.createObjectURL(selectedFile);
window.open(imageUrl, '_blank');
} else {
alert('Please select a file to upload.');
}