diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx index 12665f2920855bc7dd5600f2bd9bce0f3f40f312..3ea4d20fa81f9dfc9ad11b6a1231139664b44796 100644 --- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx +++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx @@ -15,9 +15,7 @@ export default function AdvancedDropzoneDemo() { const [extFiles, setExtFiles] = useState([]); const [imageSrc, setImageSrc] = React.useState(undefined); - const [videoSrc, setVideoSrc] = React.useState( - undefined - ); + const [videoSrc, setVideoSrc] = React.useState(undefined); const updateFiles = (incommingFiles) => { console.log("incomming extFiles", incommingFiles); @@ -35,15 +33,15 @@ export default function AdvancedDropzoneDemo() { const handleFinish = (res) => { console.log("finish", res); }; - const handleWatch = (videoSource) => { + const handleWatch = (videoSource) => { console.log( "handleWatch videoSource", "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4" ); //setVideoSrc(videoSource); - // - setVideoSrc(videoSource); - // setVideoSrc("https://www.w3schools.com/tags/movie.mp4"); + // + setVideoSrc(videoSource); + // setVideoSrc("https://www.w3schools.com/tags/movie.mp4"); }; useEffect(() => { @@ -57,6 +55,16 @@ export default function AdvancedDropzoneDemo() { console.log("checkFiles error", error); } } + const handleAbort = (id) => { + // alert(id); + setExtFiles( + extFiles.map((ef) => { + if (ef.id === id) { + return { ...ef, uploadStatus: undefined }; + } else return { ...ef }; + }) + ); + }; return ( <> <Dropzone @@ -67,7 +75,7 @@ export default function AdvancedDropzoneDemo() { /* maxFiles={3} maxFileSize={2998000 * 20} */ label="Drag'n drop files here or click to browse" - // accept=".png,image/*, video/*" + // accept=".png,image/*, video/*" uploadConfig={{ /* autoUpload: true */ method: "POST", @@ -98,6 +106,7 @@ export default function AdvancedDropzoneDemo() { onDelete={onDelete} onSee={handleSee} onWatch={handleWatch} + onAbort={handleAbort} resultOnTooltip alwaysActive preview