new restylt
This commit is contained in:
+155
-58
@@ -70,6 +70,64 @@ $certname->execute(); ?>
|
||||
</script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>
|
||||
const uploadLang = "<?php echo $_SESSION['langselect'] ?? 'it'; ?>";
|
||||
|
||||
const uploadMessages = {
|
||||
it: {
|
||||
invalidImageType: "Seleziona solo immagini JPG, JPEG o PNG.",
|
||||
imageTooLarge: "L'immagine è troppo grande. Dimensione massima consentita: ",
|
||||
uploadFailed: "Caricamento file fallito, riprova.",
|
||||
uploadSuccess: "File caricato correttamente.",
|
||||
imageUploadFailed: "Caricamento immagine fallito, riprova.",
|
||||
imageUploadSuccess: "Immagine caricata correttamente.",
|
||||
noFileChosen: "<?php echo $nofilechoosen; ?>"
|
||||
},
|
||||
en: {
|
||||
invalidImageType: "Please select only JPG, JPEG or PNG images.",
|
||||
imageTooLarge: "The image is too large. Maximum allowed size is ",
|
||||
uploadFailed: "File upload failed, please try again.",
|
||||
uploadSuccess: "File uploaded successfully.",
|
||||
imageUploadFailed: "Image upload failed, please try again.",
|
||||
imageUploadSuccess: "Image uploaded successfully.",
|
||||
noFileChosen: "<?php echo $nofilechoosen; ?>"
|
||||
}
|
||||
};
|
||||
|
||||
const msg = uploadMessages[uploadLang] || uploadMessages.it;
|
||||
|
||||
const maxImageSizeMB = 8;
|
||||
const maxImageSizeBytes = maxImageSizeMB * 1024 * 1024;
|
||||
|
||||
const allowedImageTypes = [
|
||||
"image/jpeg",
|
||||
"image/jpg",
|
||||
"image/png"
|
||||
];
|
||||
|
||||
function validateImageFileInput(inputElement) {
|
||||
const fileLength = inputElement.files.length;
|
||||
|
||||
for (let i = 0; i < fileLength; i++) {
|
||||
const file = inputElement.files[i];
|
||||
const fileType = file.type.toLowerCase();
|
||||
|
||||
if (!allowedImageTypes.includes(fileType)) {
|
||||
alert(msg.invalidImageType);
|
||||
inputElement.value = "";
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.size > maxImageSizeBytes) {
|
||||
alert(msg.imageTooLarge + maxImageSizeMB + " MB.");
|
||||
inputElement.value = "";
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Add this CSS to your styles */
|
||||
.custom-file-upload {
|
||||
@@ -180,7 +238,10 @@ $certname->execute(); ?>
|
||||
</h4>
|
||||
|
||||
|
||||
<p class="text-muted mb-3"><?php echo $allowedkind; ?></p>
|
||||
<p class="text-muted mb-3">
|
||||
<?php echo $allowedkind; ?>
|
||||
<?php echo ($_SESSION['langselect'] ?? 'it') === 'en' ? 'Allowed formats: JPG, JPEG, PNG. Max upload size: 8 MB.' : 'Formati ammessi: JPG, JPEG, PNG. Dimensione massima: 8 MB.'; ?>
|
||||
</p>
|
||||
|
||||
|
||||
<table id="photoaded">
|
||||
@@ -189,6 +250,11 @@ $certname->execute(); ?>
|
||||
$photoshoesside = "";
|
||||
$photoshoessole = "";
|
||||
|
||||
$lang = $_SESSION['langselect'] ?? 'it';
|
||||
|
||||
$photo1 = "";
|
||||
$photo2 = "";
|
||||
|
||||
if ($trfnumberfinal->getColumnVal("idarticletype") == '1') {
|
||||
$photo1 = $photoshoesside;
|
||||
$photo2 = $photoshoessole;
|
||||
@@ -199,8 +265,11 @@ $certname->execute(); ?>
|
||||
$photo1 = $photomasksidea;
|
||||
$photo2 = $photomasksideb;
|
||||
} elseif ($trfnumberfinal->getColumnVal("idarticletype") == '4') {
|
||||
$photo1 = "Foto fronte";
|
||||
$photo2 = "Foto retro";
|
||||
$photo1 = ($lang === 'en') ? 'Front photo' : 'Foto fronte';
|
||||
$photo2 = ($lang === 'en') ? 'Back photo' : 'Foto retro';
|
||||
} elseif ($trfnumberfinal->getColumnVal("idarticletype") == '5') {
|
||||
$photo1 = ($lang === 'en') ? 'Photo 1' : 'Foto 1';
|
||||
$photo2 = ($lang === 'en') ? 'Photo 2' : 'Foto 2';
|
||||
} ?>
|
||||
<th><?php echo $photo1; ?></th>
|
||||
<th></th>
|
||||
@@ -213,7 +282,13 @@ $certname->execute(); ?>
|
||||
<form id="uploadFormphoto" enctype="multipart/form-data">
|
||||
<label for="fileInput1" class="custom-file-upload"><?php echo $browsebotton; ?></label>
|
||||
<div class="file-name-display" onclick="document.getElementById('fileInput1').click();"><?php echo $nofilechoosen; ?></div>
|
||||
<input type="file" name="docphotoone[]" id="fileInput1" style="display: none;" onchange="updateFileName(1)">
|
||||
<input
|
||||
type="file"
|
||||
name="docphotoone[]"
|
||||
id="fileInput1"
|
||||
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
|
||||
style="display: none;"
|
||||
onchange="updateFileName(1)">
|
||||
<input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
|
||||
<input type="submit" name="submit" value="UPLOAD" />
|
||||
</form>
|
||||
@@ -228,7 +303,13 @@ $certname->execute(); ?>
|
||||
<form id="uploadFormphototwo" enctype="multipart/form-data">
|
||||
<label for="fileInput2" class="custom-file-upload"><?php echo $browsebotton; ?></label>
|
||||
<div class="file-name-display" onclick="document.getElementById('fileInput2').click();"><?php echo $nofilechoosen; ?></div>
|
||||
<input type="file" name="docphototwo[]" id="fileInput2" style="display: none;" onchange="updateFileName(2)">
|
||||
<input
|
||||
type="file"
|
||||
name="docphototwo[]"
|
||||
id="fileInput2"
|
||||
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
|
||||
style="display: none;"
|
||||
onchange="updateFileName(2)">
|
||||
<input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
|
||||
<input type="submit" name="submit" value="UPLOAD" />
|
||||
</form>
|
||||
@@ -236,11 +317,21 @@ $certname->execute(); ?>
|
||||
<div id="uploadStatus2"></div>
|
||||
</div>
|
||||
<script>
|
||||
// Add this script to handle the filename display
|
||||
function updateFileName(index) {
|
||||
var input = document.getElementById('fileInput' + index);
|
||||
var fileNameDisplay = document.querySelector('.upload-div #uploadStatus' + index);
|
||||
fileNameDisplay.textContent = input.files[0].name || 'No file chosen';
|
||||
|
||||
if (!validateImageFileInput(input)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var form = input.closest('form');
|
||||
var fileNameDisplay = form.querySelector('.file-name-display');
|
||||
|
||||
if (input.files && input.files.length > 0) {
|
||||
fileNameDisplay.textContent = input.files[0].name;
|
||||
} else {
|
||||
fileNameDisplay.textContent = msg.noFileChosen;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -434,6 +525,9 @@ $certname->execute(); ?>
|
||||
<div class="card-body">
|
||||
<h4 class="mt-0 header-title"><?php echo $addphotos; ?></h4>
|
||||
<p class="text-muted mb-3"><?php echo $addphotossuggestion; ?></p>
|
||||
<p class="text-muted mb-3">
|
||||
<?php echo ($_SESSION['langselect'] ?? 'it') === 'en' ? 'Allowed formats: JPG, JPEG, PNG. Max upload size: 8 MB per image.' : 'Formati ammessi: JPG, JPEG, PNG. Dimensione massima: 8 MB per immagine.'; ?>
|
||||
</p>
|
||||
|
||||
<!-- Upload area -->
|
||||
<div class="upload-area" id="uploadfile">
|
||||
@@ -441,7 +535,12 @@ $certname->execute(); ?>
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</div>
|
||||
<p><?php echo $addphotosup; ?></p>
|
||||
<input type="file" id="fileupload" multiple accept="image/*" style="display:none;">
|
||||
<input
|
||||
type="file"
|
||||
id="fileupload"
|
||||
multiple
|
||||
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
|
||||
style="display:none;">
|
||||
</div>
|
||||
<div id="thumbnail-container"></div>
|
||||
|
||||
@@ -556,19 +655,24 @@ $certname->execute(); ?>
|
||||
|
||||
function handleFiles(files) {
|
||||
const thumbnailContainer = document.getElementById('thumbnail-container');
|
||||
thumbnailContainer.innerHTML = ''; // Clear previous thumbnails
|
||||
thumbnailContainer.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const fileType = file.type.toLowerCase();
|
||||
const validImageTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
|
||||
if (!validImageTypes.includes(fileType)) {
|
||||
alert('Only JPG, JPEG, and PNG files are allowed.');
|
||||
if (!allowedImageTypes.includes(fileType)) {
|
||||
alert(msg.invalidImageType);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (file.size > maxImageSizeBytes) {
|
||||
alert(msg.imageTooLarge + maxImageSizeMB + " MB.");
|
||||
continue;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
const img = document.createElement('img');
|
||||
img.src = e.target.result;
|
||||
@@ -576,14 +680,17 @@ $certname->execute(); ?>
|
||||
thumbnailContainer.appendChild(img);
|
||||
|
||||
setTimeout(() => {
|
||||
thumbnailContainer.removeChild(img);
|
||||
if (thumbnailContainer.contains(img)) {
|
||||
thumbnailContainer.removeChild(img);
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('idtrf', '<?php echo $idtrf; ?>'); // Pass idtrf from PHP to JS
|
||||
formData.append('idtrf', '<?php echo $idtrf; ?>');
|
||||
|
||||
fetch('uploadaddphotos.php', {
|
||||
method: 'POST',
|
||||
@@ -592,16 +699,20 @@ $certname->execute(); ?>
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
console.log('File uploaded successfully');
|
||||
console.log(msg.imageUploadSuccess);
|
||||
updatePhotoTable();
|
||||
} else {
|
||||
alert(data.message ? data.message : msg.imageUploadFailed);
|
||||
console.error('File upload failed: ', data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert(msg.imageUploadFailed);
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('fileupload').value = '';
|
||||
}
|
||||
|
||||
function updatePhotoTable() {
|
||||
@@ -622,13 +733,17 @@ $certname->execute(); ?>
|
||||
let html = '';
|
||||
jsonData.forEach(photo => {
|
||||
html += `<tr>
|
||||
<td><img src="uploadimages/${photo.filename}" class="thumbnail"></td>
|
||||
<td>${photo.description}</td>
|
||||
<td><a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=${photo.id}">
|
||||
<i class="fas fa-trash-alt text-danger font-16"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>`;
|
||||
<td>
|
||||
<a href="uploadimages/${photo.filename}" target="_blank">
|
||||
<img src="uploadimages/${photo.filename}" class="thumbnail">
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=${photo.id}">
|
||||
<i class="fas fa-trash-alt text-danger font-16"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>`;
|
||||
});
|
||||
document.getElementById('cont_file_photo').innerHTML = html;
|
||||
} catch (e) {
|
||||
@@ -662,6 +777,7 @@ $certname->execute(); ?>
|
||||
<!-- end page content -->
|
||||
</div>
|
||||
<!-- end page-wrapper -->
|
||||
|
||||
<script>
|
||||
var match = [
|
||||
"application/pdf",
|
||||
@@ -691,12 +807,13 @@ $certname->execute(); ?>
|
||||
beforeSend: function() {
|
||||
$('#uploadStatus').html('<img src="../images/uploading.gif"/>');
|
||||
},
|
||||
error: function() {
|
||||
$('#uploadStatus').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
|
||||
error: function(xhr) {
|
||||
let message = xhr.responseText ? xhr.responseText : msg.uploadFailed;
|
||||
$('#uploadStatus').html('<span style="color:#EA4335;">' + message + '</span>');
|
||||
},
|
||||
success: function(data) {
|
||||
$('#uploadForm')[0].reset();
|
||||
$('#uploadStatus').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
|
||||
$('#uploadStatus').html('<span style="color:#28A74B;">' + msg.uploadSuccess + '</span>');
|
||||
// $('.gallery').html(data);
|
||||
// $("#docadded").load(location.href + " #docadded");
|
||||
// SHOW UPLOADED FILE
|
||||
@@ -742,12 +859,13 @@ $certname->execute(); ?>
|
||||
beforeSend: function() {
|
||||
$('#uploadStatus1').html('<img src="../images/uploading.gif"/>');
|
||||
},
|
||||
error: function() {
|
||||
$('#uploadStatus1').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
|
||||
error: function(xhr) {
|
||||
let message = xhr.responseText ? xhr.responseText : msg.imageUploadFailed;
|
||||
$('#uploadStatus1').html('<span style="color:#EA4335;">' + message + '</span>');
|
||||
},
|
||||
success: function(data) {
|
||||
$('#uploadFormphoto')[0].reset();
|
||||
$('#uploadStatus1').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
|
||||
$('#uploadStatus1').html('<span style="color:#28A74B;">' + msg.imageUploadSuccess + '</span>');
|
||||
// $('.gallery').html(data);
|
||||
|
||||
// $("#photoaded").load(location.href + " #photoaded");
|
||||
@@ -760,20 +878,9 @@ $certname->execute(); ?>
|
||||
});
|
||||
});
|
||||
|
||||
// File type validation
|
||||
// File type and size validation - Photo 1
|
||||
$("#fileInput1").change(function() {
|
||||
var fileLength = this.files.length;
|
||||
// var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
|
||||
var i;
|
||||
for (i = 0; i < fileLength; i++) {
|
||||
var file = this.files[i];
|
||||
var imagefile = file.type.toLowerCase();
|
||||
if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
|
||||
alert('Please select a valid file (jpg, jpeg, png, bmp).');
|
||||
$("#fileInput1").val('');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
validateImageFileInput(this);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -793,12 +900,13 @@ $certname->execute(); ?>
|
||||
beforeSend: function() {
|
||||
$('#uploadStatus2').html('<img src="../images/uploading.gif"/>');
|
||||
},
|
||||
error: function() {
|
||||
$('#uploadStatus2').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
|
||||
error: function(xhr) {
|
||||
let message = xhr.responseText ? xhr.responseText : msg.imageUploadFailed;
|
||||
$('#uploadStatus2').html('<span style="color:#EA4335;">' + message + '</span>');
|
||||
},
|
||||
success: function(data) {
|
||||
$('#uploadFormphototwo')[0].reset();
|
||||
$('#uploadStatus2').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
|
||||
$('#uploadStatus2').html('<span style="color:#28A74B;">' + msg.imageUploadSuccess + '</span>');
|
||||
// $('.gallery').html(data);
|
||||
// $("#photoaded").load(location.href + " #photoaded");
|
||||
// SHOW PHOTO 2
|
||||
@@ -810,20 +918,9 @@ $certname->execute(); ?>
|
||||
});
|
||||
});
|
||||
|
||||
// File type validation
|
||||
// File type and size validation - Photo 2
|
||||
$("#fileInput2").change(function() {
|
||||
var fileLength = this.files.length;
|
||||
// var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
|
||||
var i;
|
||||
for (i = 0; i < fileLength; i++) {
|
||||
var file = this.files[i];
|
||||
var imagefile = file.type.toLowerCase();
|
||||
if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
|
||||
alert('Please select a valid file (jpg, jpeg, png, bmp).');
|
||||
$("#fileInput2").val('');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
validateImageFileInput(this);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user