38 lines
1.1 KiB
PHP
38 lines
1.1 KiB
PHP
<!-- index.html (served by PHP) -->
|
|
<input type="file" id="photo" style="display:none;">
|
|
<div id="drop" style="border:2px dashed #bbb; padding:20px;">
|
|
Drag photo here or click to choose
|
|
</div>
|
|
|
|
<script>
|
|
const drop = document.getElementById('drop');
|
|
const photoInput = document.getElementById('photo');
|
|
|
|
drop.onclick = () => photoInput.click();
|
|
|
|
drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.background='#eef'; });
|
|
drop.addEventListener('dragleave', e => { e.preventDefault(); drop.style.background=''; });
|
|
|
|
drop.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
drop.style.background='';
|
|
const file = e.dataTransfer.files[0];
|
|
upload(file);
|
|
});
|
|
|
|
photoInput.addEventListener('change', () => upload(photoInput.files[0]));
|
|
|
|
async function upload(file) {
|
|
// 1️⃣ Send file to PHP, which will forward it to Flask
|
|
const form = new FormData();
|
|
form.append('photo', file);
|
|
|
|
const res = await fetch('/api/upload_photo', { // <-- PHP endpoint
|
|
method: 'POST',
|
|
body: form
|
|
});
|
|
|
|
const json = await res.json();
|
|
console.log('Uploaded:', json);
|
|
}
|
|
</script> |