2023-10-22 19:24:59 +02:00
<! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > File Upload </ title >
</ head >
< body >
2023-12-03 16:30:07 +01:00
< ? php
include ( " session_verif.php " );
2024-01-05 18:28:38 +01:00
// Include the PHP-CSRF library
include ( 'php-csrf.php' );
2023-12-03 16:30:07 +01:00
verifier_session ();
2024-01-05 18:28:38 +01:00
$csrf = new CSRF ();
2023-12-03 16:30:07 +01:00
?>
2023-10-22 19:24:59 +02:00
<!-- Input to choose files -->
2024-01-18 15:38:55 +01:00
< form id = " uploadForm " enctype = " multipart/form-data " >
2024-01-27 12:08:01 +01:00
< input type = " file " id = " fileInput " multiple required >
< br >
< select id = " select_type " onchange = " changer_mode() " required >
< option value = " " disabled selected > Sélectionner le niveau </ option >
< option value = " 1 " > 1 A </ option >
< option value = " 2 " > 2 A </ option >
< option value = " 3 " > 3 A </ option >
< option value = " 4 " > 4 A </ option >
< option value = " 5 " > 5 A </ option >
</ select >
<!-- ne s 'affiche qu' après avoir sélectionner le niveau -->
< select id = " select_type " onchange = " changer_mode() " hidden required >
< option value = " " disabled selected > Sélectionner la matière </ option >
<!-- options à chercher dans la bdd de ce niveau , avec possibilité de créer une nouvelle matière -->
</ select >
< br >
< select id = " select_type " onchange = " changer_mode() " required >
< option value = " " disabled selected > Sélectionner l ' année scolaire </ option >
< option value = " 1 " > 2019 - 2020 </ option >
< option value = " 2 " > 2020 - 2021 </ option >
< option value = " 3 " > 2021 - 2022 </ option >
< option value = " 4 " > 2022 - 2023 </ option >
< option value = " 5 " > 2023 - 2024 </ option >
</ select >
< br >
< input type = " text " placeholder = " titre " id = " titre " required ></ input >
< label for = " titre " > Utilisez un titre qui décrit bien l ' archive .</ label >
< br >
< select id = " select_type " onchange = " changer_mode() " required >
< option value = " 1 " > annale </ option >
< option value = " 2 " > fiche_revision </ option >
< option value = " 3 " > HTML personnalisé </ option >
</ select >
< input type = " text " placeholder = " commentaires généraux sur l'ensemble des documents " id = " commentaire_auteur " ></ input >
< br >
< div id = " selectedImages " ></ div >
< div id = " corrige_checkbox_wrapper " >
< input type = " checkbox " id = " corrige_checkbox " >
< label for = " corrige_checkbox " > Corrigé inclu </ label >
</ div >
< input type = " date " id = " date_conception_input " required >
< label for = " date_conception_input " > Date de conception du / des documents ( Mettez juste la bonne année si vous ne savez pas ) </ label >
< br >
< button type = " button " onclick = " uploadFiles() " > Téléverser les fichiers </ button >
2023-11-01 22:23:40 +01:00
</ form >
2024-01-16 16:57:40 +01:00
< div id = " exercices_details_wrapper " >
< button onclick = " ajouter_details_exo() " > Ajouter les détails d ' un exercice </ button >
</ div >
2024-01-16 20:43:18 +01:00
< button onclick = " openCamera() " > Prendre des photos </ button >
2023-11-01 22:23:40 +01:00
2023-10-22 19:24:59 +02:00
< script >
function uploadFiles () {
const fileInput = document . getElementById ( 'fileInput' );
// Create FormData object to append files
const formData = new FormData ();
2023-11-01 22:23:40 +01:00
formData . append ( " type " , document . getElementById ( " select_type " ) . value );
formData . append ( " titre " , document . getElementById ( " titre " ) . value );
2023-11-03 22:22:27 +01:00
formData . append ( " commentaire_auteur " , document . getElementById ( " commentaire_auteur " ) . value );
2023-10-22 20:01:47 +02:00
2023-11-11 20:33:14 +01:00
formData . append ( " corrige_inclu " , document . getElementById ( " corrige_checkbox " ) . value );
2024-01-18 15:38:55 +01:00
formData . append ( " date_conception " , document . getElementById ( " date_conception_input " ) . value );
2024-01-16 16:57:40 +01:00
//let ex = [{duree:"10",themes:["algèbre","analyse"],commentaire_exo:"ceci est un commenataire"},{duree:"15",themes:["elec analogique"],commentaire_exo:""}];
2024-01-16 18:03:18 +01:00
var ex = [];
2024-01-16 16:57:40 +01:00
// details des exos pour les annales
2024-01-16 18:03:18 +01:00
if ( formData . get ( " type " ) == " 1 " ){
var details = document . getElementsByClassName ( " input-details-exo " );
2024-01-16 16:57:40 +01:00
2024-01-16 18:03:18 +01:00
for ( let i = 0 ; i < details . length ; i = i + 3 ){
2024-01-16 16:57:40 +01:00
ex . push ({
2024-01-16 18:03:18 +01:00
duree : details [ i ] . value ,
themes : details [ i + 1 ] . value . split ( " , " ),
commentaire_exo : details [ i + 2 ] . value
2024-01-16 16:57:40 +01:00
})
}
}
2023-11-05 16:49:48 +01:00
formData . append ( " exercices " , JSON . stringify ( ex ))
2023-10-22 19:24:59 +02:00
// Append each selected file to the FormData
2023-11-03 22:22:27 +01:00
let i = 0 ;
2023-10-22 19:24:59 +02:00
for ( const file of fileInput . files ) {
2023-11-03 22:22:27 +01:00
formData . append ( 'fichier' + i , file );
i ++ ;
2023-10-22 19:24:59 +02:00
}
2024-01-16 18:03:18 +01:00
console . log ( ex );
2024-01-05 18:28:38 +01:00
//csrf token
formData . append ( " jeton-csrf " , " <?= $csrf->string ( $context = " televersement " )?> " );
// Append captured images as files to the FormData
2023-11-03 22:22:27 +01:00
const capturedImages = document . querySelectorAll ( '#selectedImages img' );
i = 0 ;
capturedImages . forEach (( img , index ) => {
const imageDataUrl = img . src ;
const blob = dataURLtoBlob ( imageDataUrl );
const file = new File ([ blob ], `camera_image_${index}.jpg` );
formData . append ( 'fichier' + i , file );
i ++ ;
});
2023-10-22 19:24:59 +02:00
// Make a POST request using Fetch API
2023-10-22 20:01:47 +02:00
fetch ( 'api.php/aj_doc' , {
2023-10-22 19:24:59 +02:00
method : 'POST' ,
body : formData
})
2023-11-01 22:23:40 +01:00
. then ( response => response . text ())
2023-10-22 19:24:59 +02:00
. then ( data => {
console . log ( data );
// Handle the response from the server
})
. catch ( error => {
console . error ( 'Error:' , error );
});
}
function openCamera () {
// Open the camera and take pictures
// You can use the MediaDevices API to access the camera
navigator . mediaDevices . getUserMedia ({ video : true })
. then ( mediaStream => {
const video = document . createElement ( 'video' );
document . body . appendChild ( video );
// Display the camera stream in a video element
video . srcObject = mediaStream ;
video . play ();
// Capture an image from the video stream
video . addEventListener ( 'click' , () => {
const canvas = document . createElement ( 'canvas' );
canvas . width = video . videoWidth ;
canvas . height = video . videoHeight ;
const context = canvas . getContext ( '2d' );
context . drawImage ( video , 0 , 0 , canvas . width , canvas . height );
// Convert the canvas content to a data URL
const imageDataUrl = canvas . toDataURL ( 'image/jpeg' );
2023-11-03 22:22:27 +01:00
// Display the captured image
const img = document . createElement ( 'img' );
img . src = imageDataUrl ;
img . style . maxWidth = '100px' ;
document . getElementById ( 'selectedImages' ) . appendChild ( img );
2023-10-22 19:24:59 +02:00
});
2023-11-03 22:22:27 +01:00
// POUR FERMER LA CAMERA :
// mediaStream.getTracks().forEach(track => track.stop());
2023-10-22 19:24:59 +02:00
})
. catch ( error => {
console . error ( 'Error accessing camera:' , error );
});
}
2023-11-03 22:22:27 +01:00
2024-01-16 16:57:40 +01:00
2023-11-03 22:22:27 +01:00
function dataURLtoBlob ( dataURL ) {
const arr = dataURL . split ( ',' );
const mime = arr [ 0 ] . match ( /: ( .* ? ); / )[ 1 ];
const bstr = atob ( arr [ 1 ]);
let n = bstr . length ;
const u8arr = new Uint8Array ( n );
while ( n -- ) {
u8arr [ n ] = bstr . charCodeAt ( n );
}
return new Blob ([ u8arr ], { type : mime });
}
2024-01-16 16:57:40 +01:00
function ajouter_details_exo (){
duree = document . createElement ( " input " );
duree . setAttribute ( " type " , " number " );
2024-01-16 17:24:17 +01:00
duree . setAttribute ( " placeholder " , " Entrez la durée de l'exercice en minutes. " )
2024-01-16 16:57:40 +01:00
// classe imortante pour itérer sur toutes les input
// dans le bon ordre et les associer aux exos dans la requête post
duree . setAttribute ( " class " , " input-details-exo " );
document . getElementById ( " exercices_details_wrapper " ) . appendChild ( duree );
themes = document . createElement ( " input " );
themes . setAttribute ( " type " , " text " );
2024-01-16 17:24:17 +01:00
themes . setAttribute ( " placeholder " , " Entrez les themes abordés par l'exercice séparés par une virgule. " );
2024-01-16 16:57:40 +01:00
themes . setAttribute ( " class " , " input-details-exo " );
document . getElementById ( " exercices_details_wrapper " ) . appendChild ( themes );
comm = document . createElement ( " input " );
comm . setAttribute ( " type " , " text " );
2024-01-16 17:24:17 +01:00
comm . setAttribute ( " placeholder " , " Un ptit commentaire sur l'exo ? " );
2024-01-16 16:57:40 +01:00
comm . setAttribute ( " class " , " input-details-exo " );
document . getElementById ( " exercices_details_wrapper " ) . appendChild ( comm );
// un peu de tendresse dans ce monde de brutes
br = document . createElement ( " br " );
document . getElementById ( " exercices_details_wrapper " ) . appendChild ( br );
hr = document . createElement ( " hr " );
document . getElementById ( " exercices_details_wrapper " ) . appendChild ( hr );
}
function mode_html (){
document . getElementById ( " exercices_details_wrapper " ) . setAttribute ( " hidden " , true );
document . getElementById ( " corrige_checkbox_wrapper " ) . setAttribute ( " hidden " , true );
}
function mode_fiche (){
document . getElementById ( " exercices_details_wrapper " ) . setAttribute ( " hidden " , true );
document . getElementById ( " corrige_checkbox_wrapper " ) . setAttribute ( " hidden " , true );
}
function mode_annale (){
document . getElementById ( " corrige_checkbox_wrapper " ) . removeAttribute ( " hidden " );
document . getElementById ( " exercices_details_wrapper " ) . removeAttribute ( " hidden " );
}
function changer_mode (){
switch ( document . getElementById ( " select_type " ) . value ){
// annale
case " 1 " :
mode_annale ();
break ;
// fiche
case " 2 " :
mode_fiche ();
break ;
// html personnalisé
case " 3 " :
mode_html ();
break ;
}
}
2024-01-18 15:38:55 +01:00
function init_date (){
var today = new Date ();
var dd = today . getDate ();
var mm = today . getMonth () + 1 ;
var yyyy = today . getFullYear () - 1 ; // pourquoi 2025 ?????
yyyy = parseInt ( yyyy ) + 1 ;
today = yyyy + " - " + mm + " - " + dd ;
console . log ( today );
document . getElementById ( " date_conception_input " ) . setAttribute ( " value " , today );
}
document . addEventListener ( " DOMContentLoaded " , ( event ) => {
init_date ();
});
2023-10-22 19:24:59 +02:00
</ script >
</ body >
</ html >
