Skip to content

Commit

Permalink
chore: adding a read into memory example to the Dropzone component te…
Browse files Browse the repository at this point in the history
…mplate (#2661)
  • Loading branch information
alex-sheehan-edx authored Sep 25, 2023
1 parent 7ce9a83 commit 322c80d
Showing 1 changed file with 41 additions and 0 deletions.
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>
</>
)
}
```

0 comments on commit 322c80d

Please sign in to comment.