Spaces:
Sleeping
Sleeping
File size: 3,795 Bytes
01e1043 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
import { useState,useEffect,useRef } from 'react';
window.addEventListener("click",() => {
const loader = document.querySelector(".loader");
loader.classList.add("loader-hidden");
loader.addEventListener("transitionend",() => {
document.body.removeChild("loader")
})
})
function App() {
const [imageURL, setImageURL] = useState(null);
const imageRef = useRef()
const [imageURL1, setImageURL1] = useState(null);
const [imageURL2, setImageURL2] = useState(null);
const [file_img, setfile_img] = useState(null);
const [file_video, setfile_video] = useState(null);
const imageRef2 = useRef()
const uploadImage = (e) => {
console.log(e)
const{ files } = e.target
const filetype = e.target.files[0].type.slice(0,5)
console.log(filetype)
if (filetype === 'image') {
setfile_img(filetype)
setfile_video(null)
} else if (filetype === 'video') {
setfile_video(filetype)
setfile_img(null)
} else {
setfile_img(null)
setfile_video(null)
}
if (files.length > 0) {
const url = URL.createObjectURL(files[0])
//const a = document.createElement('a');
//a.href = url
//console.log('A', a)
//a.download = 'save01.mp4';
//a.click();
setImageURL(url)
setImageURL1(url)
} else {
setImageURL(null)
setImageURL1(null)
}
}
const uploadName = (e) => {
console.log(e.target.value)
const files = e.target.value
var upath = "/static/"
const url = upath.concat(files)
setImageURL(url)
setImageURL2(url)
setfile_video(url)
setfile_img(null)
}
return (
<div className="App">
<h1 className='header'>PREVIEW</h1>
<div className='inputHolder' >
<form action="/upload" enctype="multipart/form-data" method="post" id='uploadform'>
<div class="mb-3">
<label for="formFile" class="form-label">Upload Image or Video to preview: Max(20mb/file)</label>
<input class="form-control" type='file' id="formFile" accepts='image/*, video/*' capture='camera' name='media'
onChange={uploadImage}/>
{imageURL1 && <button type="submit" class="btn btn-dark" value='SubmiT' >DETECT FALL(Please wait.Might take a while)</button>}
</div>
</form>
<br></br>
<div>
<form action="/upload" enctype="multipart/form-data" method="post" id='uploadselect'>
<select name="options" class="form-select" aria-label="Default select example" onChange={uploadName}>
<option selected>Open this select menu</option>
<option value="skate.mp4">Skate and Fall</option>
<option value="slip.mp4">Run and Fall</option>
<option value="kitchen.mp4">Fall in kitchen</option>
<option value="cafe_fall.mp4">Fall in workplace</option>
<option value="studycam.mp4">Fall experiment</option>
</select>
{imageURL2 && <button type="submit" class="btn btn-dark" value='SubmiT' >DETECT FALL (Please wait. Might take a while )</button>}
</form>
</div>
</div>
<div className='mainWrapper'>
<div className='mainContent'>
<div className='imageholder'>
{file_img && imageURL && <img src={imageURL} height='360' width='360' alt='Preview' crossOrigin='anonymous' ref={imageRef}/>}
{file_video && imageURL && <video controls src={imageURL} height='360' width='360' alt='Preview' crossOrigin='anonymous' ref={imageRef} />}
</div>
</div>
</div>
</div>
);
}
export default App;
|