function custom_multi_image_upload_form_shortcode($atts) {
// Récupérer le paramètre prefix du shortcode
$atts = shortcode_atts(array(
'prefix' => 'envoi-'
), $atts);
ob_start();
?>
<style>
.upload-container {
max-width: 800px;
margin: 30px auto;
padding: 30px;
border: 3px dashed #ccc;
border-radius: 10px;
text-align: center;
background: #f9f9f9;
position: relative;
min-height: 350px;
}
.upload-container.highlight {
border-color: #4CAF50;
background: #e8f5e9;
}
#file-input {
display: none;
}
.upload-label {
display: block;
padding: 15px 30px;
background: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
margin: 20px auto;
font-size: 16px;
}
.preview-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin: 25px 0;
padding: 15px;
min-height: 200px;
}
.preview-item {
width: 120px;
height: 120px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
#upload-button {
display: none;
padding: 12px 30px;
background: #2196F3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 20px auto;
font-size: 16px;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0,0,0,0.1);
border-top: 5px solid #4CAF50;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.instructions {
font-size: 18px;
margin-bottom: 20px;
color: #555;
}
.file-count {
margin-top: 10px;
font-weight: bold;
color: #4CAF50;
font-size: 16px;
}
.success-message {
color: green;
font-weight: bold;
margin-top: 15px;
font-size: 16px;
}
</style>
<div class="loading-overlay" id="loading-overlay">
<div class="spinner"></div>
<p style="font-size: 18px;">Téléchargement en cours...</p>
</div>
<form id="upload-form" method="post" enctype="multipart/form-data">
<input type="hidden" name="file_prefix" value="<?php echo esc_attr($atts['prefix']); ?>">
<div class="upload-container" id="drop-area">
<div class="instructions">
<p>Glissez-déposez vos images ici</p>
<p>OU</p>
</div>
<input type="file" id="file-input" name="user_images[]" accept="image/*" multiple>
<label for="file-input" class="upload-label">Sélectionner des images</label>
<div class="preview-container" id="preview-container"></div>
<div class="file-count" id="file-count"></div>
<button type="submit" id="upload-button" name="upload_images">Télécharger les images</button>
<?php if (isset($_GET['success']) && $_GET['success'] == '1'): ?>
<div class="success-message">
<?php echo intval($_GET['count']) . ' image(s) téléchargée(s) avec succès!'; ?>
</div>
<?php endif; ?>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const previewContainer = document.getElementById('preview-container');
const uploadButton = document.getElementById('upload-button');
const loadingOverlay = document.getElementById('loading-overlay');
const fileCount = document.getElementById('file-count');
const form = document.getElementById('upload-form');
let selectedFiles = [];
// Empêcher les comportements par défaut
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
// Effets visuels pour le glisser-déposer
dropArea.addEventListener('dragenter', () => dropArea.classList.add('highlight'));
dropArea.addEventListener('dragleave', () => dropArea.classList.remove('highlight'));
dropArea.addEventListener('drop', () => dropArea.classList.remove('highlight'));
// Gestion du dépôt de fichiers
dropArea.addEventListener('drop', handleDrop);
// Gestion de la sélection via le bouton
fileInput.addEventListener('change', () => handleFiles(fileInput.files));
// Gestion de la soumission du formulaire
form.addEventListener('submit', () => loadingOverlay.style.display = 'flex');
function handleDrop(e) {
e.preventDefault();
handleFiles(e.dataTransfer.files);
}
function handleFiles(newFiles) {
const validFiles = Array.from(newFiles).filter(file => file.type.startsWith('image/'));
selectedFiles = [...selectedFiles, ...validFiles];
previewContainer.innerHTML = '';
if (selectedFiles.length > 0) {
const dataTransfer = new DataTransfer();
selectedFiles.forEach(file => dataTransfer.items.add(file));
fileInput.files = dataTransfer.files;
selectedFiles.forEach(file => {
const previewItem = document.createElement('div');
previewItem.className = 'preview-item';
const reader = new FileReader();
reader.onload = (e) => {
previewItem.innerHTML = `<img src="${e.target.result}" />`;
};
reader.readAsDataURL(file);
previewContainer.appendChild(previewItem);
});
fileCount.textContent = `${selectedFiles.length} image(s) sélectionnée(s)`;
uploadButton.style.display = 'block';
} else {
uploadButton.style.display = 'none';
fileCount.textContent = '';
}
}
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('custom_multi_image_upload_form', 'custom_multi_image_upload_form_shortcode');
// Gestion du téléchargement
add_action('init', function() {
if (isset($_POST['upload_images']) && !empty($_FILES['user_images'])) {
$upload_dir = wp_upload_dir();
$files = $_FILES['user_images'];
$success_count = 0;
$prefix = isset($_POST['file_prefix']) ? sanitize_text_field($_POST['file_prefix']) : 'envoi-';
foreach ($files['name'] as $key => $name) {
if ($files['error'][$key] === UPLOAD_ERR_OK) {
$file = [
'name' => $files['name'][$key],
'type' => $files['type'][$key],
'tmp_name' => $files['tmp_name'][$key],
'size' => $files['size'][$key],
];
$allowed_types = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$file_ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
if (in_array($file_ext, $allowed_types) && $file['size'] < 10000000) {
$original_name = pathinfo($file['name'], PATHINFO_FILENAME);
$new_filename = $prefix . $original_name . '.' . $file_ext;
$filename = wp_unique_filename($upload_dir['path'], $new_filename);
$destination = $upload_dir['path'] . '/' . $filename;
if (move_uploaded_file($file['tmp_name'], $destination)) {
// Enregistrer dans la médiathèque WordPress
$attachment = [
'guid' => $upload_dir['url'] . '/' . $filename,
'post_mime_type' => $file['type'],
'post_title' => preg_replace('/\.[^.]+$/', '', $new_filename),
'post_content' => '',
'post_status' => 'inherit'
];
$attach_id = wp_insert_attachment($attachment, $destination);
require_once(ABSPATH . 'wp-admin/includes/image.php');
$attach_data = wp_generate_attachment_metadata($attach_id, $destination);
wp_update_attachment_metadata($attach_id, $attach_data);
// Compatibilité avec les plugins comme FileBird
do_action('add_attachment', $attach_id);
$success_count++;
}
}
}
}
wp_redirect(add_query_arg([
'success' => '1',
'count' => $success_count
], $_SERVER['REQUEST_URI']));
exit;
}
});