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">
|
|
|
|
|
<option value="annale">annale</option>
|
|
|
|
|
<option value="fiche_revision">fiche_revision</option>
|
|
|
|
|
|
|
|
|
|
</select>
|
|
|
|
|
|
2023-11-01 22:23:40 +01:00
|
|
|
<button type="button" onclick="uploadFiles()">Upload File</button>
|
|
|
|
|
</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-10-22 20:01:47 +02:00
|
|
|
|
2023-10-22 19:24:59 +02:00
|
|
|
// Append each selected file to the FormData
|
|
|
|
|
for (const file of fileInput.files) {
|
2023-11-01 22:23:40 +01:00
|
|
|
formData.append('fichiers', file);
|
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');
|
|
|
|
|
|
|
|
|
|
// Close the camera stream
|
|
|
|
|
mediaStream.getTracks().forEach(track => track.stop());
|
|
|
|
|
|
|
|
|
|
// Make a POST request to upload the image
|
2023-10-22 20:01:47 +02:00
|
|
|
fetch('api.php/aj_doc', {
|
2023-10-22 19:24:59 +02:00
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
2023-11-01 22:23:40 +01:00
|
|
|
fichiers: [{ name: 'camera_image.jpg', data: imageDataUrl.split(',')[1] }]
|
2023-10-22 19:24:59 +02:00
|
|
|
})
|
|
|
|
|
})
|
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);
|
2023-11-01 22:23:40 +01:00
|
|
|
|
2023-10-22 19:24:59 +02:00
|
|
|
// Handle the response from the server
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error accessing camera:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
