Sp-dev-fx-controls-react: FilePicker: How to read file content

[mgordic]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [ Latest ]

Expected / Desired Behavior / Question

How can I read file content on save, as array buffer or base64 encoded string?

downloadFileContent does not return anything of those.

Thank you

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[AJIXuMuK]

Hi @mgordic,

If you're not in IE or Edge, you can use Blob API to get ArrayBuffer or Stream (File implements Blob interface).

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/File

[mgordic]

Hi,

Thank you for your reply.

I need to support IE/Edge as well.

Do you maybe have some code example?

[AJIXuMuK]

@hugoabernier do you have any examples of that? I believe, this one was created by you (correct me if I wrong).

[hugoabernier]

@AJIXuMuK as much as I'd like to take the credit for this control, it is based on a code sample I submitted to the WebParts samples repo. It appears that the code for this control is derived from one of my code sample in the https://github.com/SharePoint/sp-dev-fx-webparts repo. (I'd love to know who submitted the PR so that I can thank them directly though!)

If you're using IE or Edge, you should have access to msSaveOrOpenBlob. It will be undefined if not in Edge or IE.

[AJIXuMuK]

@hugoabernier it was Piotr Siatka @siata13

[siata13]

Hey,
The implementation used File constructor which seems to be not supported in IE11.
I have created a bugfix and PR which should solve the issue.

Now, the downloadFileContent method should return a promise with a File object in IE also. After that, you can simply use FileReader, e.g.:

const fileResultContent = await filePickerResult.downloadFileContent();
const reader = new FileReader();
reader.readAsDataURL(fileResultContent);
reader.onload = async () => {
 // TODO: Implement your logic here.
};

[AJIXuMuK]

The PR has been merged and will be available in the next build. Or you can test it in current beta version.

[hugoabernier]

Thanks @siata13 for doing this!