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 >
<!-- Input to choose files -->
2023-11-01 22:23:40 +01:00
< form id = " uploadForm " >
< input type = " file " id = " fileInput " multiple >
2023-10-22 20:01:47 +02:00
< input type = " text " placeholder = " titre " id = " titre " ></ input >
< select id = " select_type " >
2023-11-03 22:22:27 +01:00
< option value = " 1 " > annale </ option >
< option value = " 2 " > fiche_revision </ option >
2023-10-22 20:01:47 +02:00
</ select >
2023-11-03 22:22:27 +01:00
< input type = " text " placeholder = " commentaires généraux sur l'ensemble des documents " id = " commentaire_auteur " ></ input >
< div id = " selectedImages " ></ div >
2023-11-11 20:33:14 +01:00
< input type = " checkbox " id = " corrige_checkbox " >
< label for = " corrige_checkbox " > Corrigé inclu </ label >
2023-11-03 22:22:27 +01:00
< button type = " button " onclick = " uploadFiles() " > Téléverser les fichiers </ button >
2023-11-01 22:23:40 +01:00
</ form >
<!-- Button to open the camera -->
< button onclick = " openCamera() " > Open Camera </ button >
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 );
2023-11-05 17:03:58 +01:00
let ex = [{ duree : " 10 " , themes : [ " algèbre " , " analyse " ], commentaire_exo : " cci est un commenataire " },{ duree : " 15 " , themes : [ " elec analogique " ], commentaire_exo : " " }];
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
}
2023-11-03 22:22:27 +01:00
// Append captured images as files to the FormData
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
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 });
}
2023-10-22 19:24:59 +02:00
</ script >
</ body >
</ html >
