Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sync: master to alpha #2662

Merged
merged 1 commit into from
Sep 25, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions src/Dropzone/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -277,3 +277,44 @@ This example validates that only `400x479` images can be uploaded.
);
}
```

## Reading file contents into memory

Accepts only .xml files up to a size of 20MB. You can read in the contents of the `File` object into memory. The ``onProcessUpload`` prop should retrieve the file Blob from the passed ``fileData`` param and pass it into a file reader.

Note that `Dropzone` does not handle unexpected errors that might happen in your function, they should be handled by the ``handleProcessUpload`` method.

```jsx live
() => {
const [text, setText] = useState("");

async function handleProcessUpload({
fileData, requestConfig, handleError
}) {
const blob = fileData.get('file');
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
const base64data = reader.result.split(',')[1];
console.log(atob(base64data));
setText(atob(base64data));
}
};

return (
<>
<Dropzone
onProcessUpload={handleProcessUpload}
onUploadProgress={(percent) => console.log(percent)}
onUploadCancel={() => console.log('UPLOAD CANCEL')}
progressVariant="bar"
maxSize={20 * 1048576}
accept={{
"application/xml": ['.xml']
}}
/>
<p>{text}</p>
</>
)
}
```
Loading