import {NextPage} from 'next'; import * as React from 'react'; import * as BlobReact from '@tesseract-design/web-blob-react'; import {DefaultLayout} from '@/components/DefaultLayout'; import {Section, Subsection} from '@/components/Section'; import {addDataUrl} from '@/utils/blob'; const BlobPage: NextPage = () => { const [imageFile, setImageFile] = React.useState>(); React.useEffect(() => { fetch('/image.png').then((response) => { response.blob().then(async (blob) => { const imageFile = new File([blob], 'image.png', { type: 'image/png', }); const theFile = await addDataUrl(imageFile); setImageFile(theFile); }); }); }, []); const [videoFile, setVideoFile] = React.useState(); React.useEffect(() => { fetch('/video.mp4').then((response) => { response.blob().then((blob) => { setVideoFile(new File([blob], 'video.mp4', { type: 'video/mp4', })); }); }); }, []); const [audioFile, setAudioFile] = React.useState(); React.useEffect(() => { fetch('/audio.wav').then((response) => { response.blob().then((blob) => { setAudioFile(new File([blob], 'audio.wav', { type: 'audio/wav', })); }); }); }, []); const [binaryFile, setBinaryFile] = React.useState(); React.useEffect(() => { fetch('/binary.bin').then((response) => { response.blob().then((blob) => { setBinaryFile(new File([blob], 'binary.bin', { type: 'application/octet-stream', })); }); }); }, []); const [plaintextFile, setPlaintextFile] = React.useState(); React.useEffect(() => { fetch('/plaintext.txt').then((response) => { response.blob().then((blob) => { setPlaintextFile(new File([blob], 'plaintext.txt', { type: 'text/plain', })); }); }); }, []); const [codeFile, setCodeFile] = React.useState(); React.useEffect(() => { fetch('/code.py').then((response) => { response.blob().then((blob) => { setCodeFile(new File([blob], 'code.py', { type: 'text/x-python', })); }); }); }, []); return (
} className="sm:h-64" />
} className="sm:h-64" enhanced />
} className="sm:h-64" enhanced />
} className="sm:h-64" />
} className="sm:h-64" /> } className="sm:h-64" />
console.log(e.currentTarget.files)} />
) } export default BlobPage;