added upload php script, need db name and pass
This commit is contained in:
Toddeh
parent
a9492bcc5f
commit
7842bb1a94
|
|
@ -7,76 +7,88 @@ let selectedFile = null;
|
||||||
disableUploadButton();
|
disableUploadButton();
|
||||||
|
|
||||||
dragDropContainer.addEventListener('dragover', (event) => {
|
dragDropContainer.addEventListener('dragover', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
dragDropContainer.classList.add('drag-over');
|
dragDropContainer.classList.add('drag-over');
|
||||||
});
|
});
|
||||||
|
|
||||||
dragDropContainer.addEventListener('dragleave', () => {
|
dragDropContainer.addEventListener('dragleave', () => {
|
||||||
dragDropContainer.classList.remove('drag-over');
|
dragDropContainer.classList.remove('drag-over');
|
||||||
});
|
});
|
||||||
|
|
||||||
dragDropContainer.addEventListener('drop', (event) => {
|
dragDropContainer.addEventListener('drop', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
dragDropContainer.classList.remove('drag-over');
|
dragDropContainer.classList.remove('drag-over');
|
||||||
|
|
||||||
// Get the first file from the dropped files
|
// Get the first file from the dropped files
|
||||||
const file = event.dataTransfer.files[0];
|
const file = event.dataTransfer.files[0];
|
||||||
|
|
||||||
// Check if the file is a PNG, JPEG, or GIF
|
// Check if the file is a PNG, JPEG, or GIF
|
||||||
if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif') {
|
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
|
||||||
selectedFile = file;
|
selectedFile = file;
|
||||||
updateFileInfo(file.name);
|
updateFileInfo(file.name);
|
||||||
enableUploadButton();
|
enableUploadButton();
|
||||||
} else {
|
} else {
|
||||||
alert('Please drop a PNG, JPEG, or GIF file.');
|
alert('Please drop a PNG, JPEG, or GIF file.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
dragDropContainer.addEventListener('click', () => {
|
dragDropContainer.addEventListener('click', () => {
|
||||||
fileInput.click();
|
fileInput.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
fileInput.addEventListener('change', () => {
|
fileInput.addEventListener('change', () => {
|
||||||
const file = fileInput.files[0];
|
const file = fileInput.files[0];
|
||||||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
|
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
|
||||||
selectedFile = file;
|
selectedFile = file;
|
||||||
updateFileInfo(file.name);
|
updateFileInfo(file.name);
|
||||||
enableUploadButton();
|
enableUploadButton();
|
||||||
} else {
|
} else {
|
||||||
updateFileInfo('');
|
updateFileInfo('');
|
||||||
disableUploadButton();
|
disableUploadButton();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
uploadButton.addEventListener('click', () => {
|
uploadButton.addEventListener('click', () => {
|
||||||
if (selectedFile) {
|
if (selectedFile) {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', selectedFile);
|
formData.append('file', selectedFile);
|
||||||
// Send the formData to the server using fetch or XMLHttpRequest
|
|
||||||
// ...
|
|
||||||
console.log('Uploading file:', selectedFile.name);
|
|
||||||
|
|
||||||
// Open the uploaded image in a new tab
|
fetch('upload.php', {
|
||||||
const imageUrl = URL.createObjectURL(selectedFile);
|
method: 'POST',
|
||||||
window.open(imageUrl, '_blank');
|
body: formData
|
||||||
} else {
|
})
|
||||||
alert('Please select a file to upload.');
|
.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) {
|
function updateFileInfo(fileName) {
|
||||||
const fileInfo = document.getElementById('file-info');
|
const fileInfo = document.getElementById('file-info');
|
||||||
fileInfo.textContent = fileName ? `Selected file: ${fileName}` : '';
|
fileInfo.textContent = fileName ? `Selected file: ${fileName}` : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function enableUploadButton() {
|
function enableUploadButton() {
|
||||||
uploadButton.disabled = false;
|
uploadButton.disabled = false;
|
||||||
uploadButton.style.backgroundColor = '#4CAF50'; // Green
|
uploadButton.style.backgroundColor = '#4CAF50'; // Green
|
||||||
uploadButton.style.cursor = 'pointer';
|
uploadButton.style.cursor = 'pointer';
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableUploadButton() {
|
function disableUploadButton() {
|
||||||
uploadButton.disabled = true;
|
uploadButton.disabled = true;
|
||||||
uploadButton.style.backgroundColor = '#ccc'; // Gray
|
uploadButton.style.backgroundColor = '#ccc'; // Gray
|
||||||
uploadButton.style.cursor = 'default';
|
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