added upload php script, need db name and pass

This commit is contained in:
Toddeh 2024-04-13 22:25:44 -07:00
parent a9492bcc5f
commit 7842bb1a94
2 changed files with 110 additions and 46 deletions

View file

@ -7,76 +7,88 @@ let selectedFile = null;
disableUploadButton();
dragDropContainer.addEventListener('dragover', (event) => {
event.preventDefault();
dragDropContainer.classList.add('drag-over');
event.preventDefault();
dragDropContainer.classList.add('drag-over');
});
dragDropContainer.addEventListener('dragleave', () => {
dragDropContainer.classList.remove('drag-over');
dragDropContainer.classList.remove('drag-over');
});
dragDropContainer.addEventListener('drop', (event) => {
event.preventDefault();
dragDropContainer.classList.remove('drag-over');
event.preventDefault();
dragDropContainer.classList.remove('drag-over');
// Get the first file from the dropped files
const file = event.dataTransfer.files[0];
// 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.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.');
}
// 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.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();
}
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);
// Send the formData to the server using fetch or XMLHttpRequest
// ...
console.log('Uploading file:', selectedFile.name);
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
// 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.');
}
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}` : '';
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';
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';
}
uploadButton.disabled = true;
uploadButton.style.backgroundColor = '#ccc'; // Gray
uploadButton.style.cursor = 'default';
}

52
frontend/upload.php Normal file
View file

@ -0,0 +1,52 @@
<?php
// Database configuration
$host = 'localhost'; // MySQL host
$dbname = 'your_database_name'; // Database name
$username = 'your_username'; // Database username
$password = 'your_password'; // Database password
// Create a PDO instance (connect to database)
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Check if a file was uploaded
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
// Validate file type (ensure it's an image)
$fileType = $_FILES['file']['type'];
$allowedTypes = ['image/png', 'image/jpeg', 'image/gif'];
if (in_array($fileType, $allowedTypes)) {
// Define upload directory (adjust as needed)
$uploadDirectory = 'uploads/';
// Create uploads directory if it doesn't exist
if (!file_exists($uploadDirectory)) {
mkdir($uploadDirectory, 0777, true);
}
// Generate a unique filename
$fileName = uniqid('img_') . '_' . basename($_FILES['file']['name']);
$targetPath = $uploadDirectory . $fileName;
// Attempt to move uploaded file to specified directory
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetPath)) {
// File uploaded successfully, insert into database
$sql = "INSERT INTO images (filename, filepath) VALUES (:filename, :filepath)";
$stmt = $pdo->prepare($sql);
$stmt->execute(['filename' => $fileName, 'filepath' => $targetPath]);
// Return success response
echo json_encode(['success' => true, 'fileName' => $fileName]);
} else {
// Error moving file
echo json_encode(['success' => false, 'message' => 'Error uploading file.']);
}
} else {
// Invalid file type
echo json_encode(['success' => false, 'message' => 'Invalid file type.']);
}
} else {
// Error in file upload
echo json_encode(['success' => false, 'message' => 'Error in file upload.']);
}
?>