Hi Team
I want to be able to upload multiple files. My knowledge in react is lacking but I seen many react packages that handle multiple files upload such as react-dropzone react-dropzone-uploader etc…
I’m struggling to implement them with Streamlit. Ideally, I want to upload a bunch of files directly to s3 and then just use st.image to preview them or get the list of images as output of react component and then us st.image image to preview them without having to upload to cloud.
If anyone can point me in the right direction it will be nice.
So far I can log the accepted files but not sure what to do with them. They only contain filename without absolute path.
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'
const App = () => {
const maxSize = 1048576;
const onDrop = useCallback(acceptedFiles => {
console.log(acceptedFiles);
}, []);
const { isDragActive, getRootProps, getInputProps, isDragReject, acceptedFiles, rejectedFiles } = useDropzone({
onDrop,
accept: 'image/png, image/jpeg',
minSize: 0,
maxSize,
});
const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
return (
<div className="container text-center mt-5">
<div {...getRootProps()}>
<input {...getInputProps()} />
{!isDragActive && 'Click here or drop a file to upload!'}
{isDragActive && !isDragReject && "Drop it like it's hot!"}
{isDragReject && "File type not accepted, sorry!"}
{isFileTooLarge && (
<div className="text-danger mt-2">
File is too large.
</div>
)}
</div>
</div>
);
};
export default App;