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

added drag and drop area for upload image, needs sanitization

Browse source
This commit is contained in:
Toddeh 2024-04-30 19:34:59 -07:00
parent 13705c1886
commit 4380b253dc
4 changed files with 86 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
backend/php/css/styles.css
View file

@ -1,4 +1,3 @@
/* Common Styles */
nav {
background-color: #333;
@ -103,5 +102,15 @@ body {
}
.file-input {
margin-top: 10px;
margin: 1rem 0;
}
.file-info {
display: center;
flex-direction: column;
align-items: flex-start;
}
#no-file-chosen {
margin-top: 5px;
}

96
backend/php/index.php
View file

@ -40,31 +40,85 @@ if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES['image']['tmp_name'])
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Upload Image</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav>
<div class="nav-container">
<a href="index.php" class="nav-logo">Image Upload</a>
<ul class="nav-menu">
<li><a href="index.php">Home</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ul>
</div>
</nav>
<div id="upload-container">
<h2>Upload Image</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
<label for="image" class="file-label">Select image to upload:</label>
<input type="file" name="image" id="image" class="file-input">
<input type="submit" value="Upload Image" name="submit" class="upload-button">
</form>
<nav>
<div class="nav-container">
<a href="index.php" class="nav-logo">Image Upload</a>
<ul class="nav-menu">
<li><a href="index.php">Home</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ul>
</div>
</nav>
<script>
document.getElementById('image').addEventListener('change',function(){this.files.length>0&&this.files[0].type.startsWith('image/')?document.querySelector('.upload-button').classList.add('enabled'):document.querySelector('.upload-button').classList.remove('enabled')});
</script>
<div id="drag-drop-container" class="drop-zone">
<h2>Upload Image</h2>
<p>Accepted file types: jpg, jpeg, png, gif</p>
<div class="drop-message">
<div class="upload-icon"></div>
<span id="file-name"></span>
</div>
<form id="upload-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" class="file-input" accept="image/*">
</form>
</div>
<button id="upload-button" class="upload-button" disabled>Upload Image</button>
<script>
const dropZone = document.querySelector('.drop-zone');
const input = document.getElementById('image');
const form = document.getElementById('upload-form');
const uploadButton = document.getElementById('upload-button');
dropZone.addEventListener('click', () => {
input.click();
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
const file = e.dataTransfer.files[0];
input.files = e.dataTransfer.files;
handleFileUpload(file);
});
input.addEventListener('change', () => {
const file = input.files[0];
handleFileUpload(file);
});
function handleFileUpload(file) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
uploadButton.classList.add('enabled');
uploadButton.removeAttribute('disabled');
};
} else {
alert('Please upload an image file.');
}
}
uploadButton.addEventListener('click', () => {
form.submit();
});
input.addEventListener('click', (e) => {
e.stopPropagation();
});
</script>
</body>
</html>

94
backend/php/js/script.js
View file

@ -1,94 +0,0 @@
const dragDropContainer = document.getElementById('drag-drop-container');
const fileInput = document.getElementById('file-input');
const uploadButton = document.getElementById('upload-button');
let selectedFile = null;
// Initially disable the upload button and set its background color to grey
disableUploadButton();
dragDropContainer.addEventListener('dragover', (event) => {
event.preventDefault();
dragDropContainer.classList.add('drag-over');
});
dragDropContainer.addEventListener('dragleave', () => {
dragDropContainer.classList.remove('drag-over');
});
dragDropContainer.addEventListener('drop', (event) => {
event.preventDefault();
dragDropContainer.classList.remove('drag-over');
// Get the first file from the dropped files
const file = event.dataTransfer.files[0];
// Check if the file is a PNG, JPEG, or GIF
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
selectedFile = file;
updateFileInfo(file.name);
enableUploadButton();
} else {
alert('Please drop a PNG, JPEG, or GIF file.');
}
});
dragDropContainer.addEventListener('click', () => {
fileInput.click();
});
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
selectedFile = file;
updateFileInfo(file.name);
enableUploadButton();
} else {
updateFileInfo('');
disableUploadButton();
}
});
uploadButton.addEventListener('click', () => {
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('File uploaded successfully!');
// Optionally handle the response, e.g., display uploaded file details
console.log('Uploaded filename:', data.fileName);
} else {
alert('File upload failed. Please try again.');
}
})
.catch(error => {
console.error('Error uploading file:', error);
alert('File upload failed. Please try again.');
});
} else {
alert('Please select a file to upload.');
}
});
function updateFileInfo(fileName) {
const fileInfo = document.getElementById('file-info');
fileInfo.textContent = fileName ? `Selected file: ${fileName}` : '';
}
function enableUploadButton() {
uploadButton.disabled = false;
uploadButton.style.backgroundColor = '#4CAF50'; // Green
uploadButton.style.cursor = 'pointer';
}
function disableUploadButton() {
uploadButton.disabled = true;
uploadButton.style.backgroundColor = '#ccc'; // Gray
uploadButton.style.cursor = 'default';
}

0
backend/php/js/user_gallery.js
View file