added upload php script, need db name and pass
This commit is contained in:
Toddeh
parent
a9492bcc5f
commit
7842bb1a94
2 changed files with 110 additions and 46 deletions
|
|
@ -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
52
frontend/upload.php
Normal 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.']);
|
||||
}
|
||||
?>
|
||||
Loading…
Reference in a new issue