search

bcgov / aries-oca-bundles

aries-oca-bundles
Apache License 2.0
8 stars 20 forks source link

feat: added support for uploading images #66

Closed Gavinok closed 1 year ago

Gavinok commented 1 year ago

This pull request resolves #36 by adding support for uploading images and converting them to a base64 encoded data url.

Overview

How OCAExplorer now looks with an example of a default url, an uploaded image, and it looks like when a pdf uploaded rather than an image. image

Changes

When viewing an OCA bundle the inputs that accept an image will now display an upload icon. image

When clicked an image can be uploaded and converted to a base 64 encoded data url. image

NOTE: The number of characters used in the data url is added to the description as requested in #36

If a non image file is uploaded the following error is given and the encoded version of that file is not input. image

And finally all of these changes are reflected when the final branding.json is downloaded

image

swcurran commented 1 year ago

Should we have a (configurable) size limit, with a message that says, “We recommend not using an image larger than XXX” — perhaps with an “Are you sure?” message?

The current oca-parser tools blow up on things too large at the very least. We can increase the size later if that issue gets resolved. Not sure what the default should be.

amanji commented 1 year ago

I think the error message(s) should just be a toast that appears at the bottom corner of the screen rather than alerts that appear below the input. If we want to indicate which input is incorrect, we could outline it with an error-like color.

Can take a look at snackbar in Material UI

amanji commented 1 year ago

I also agree with @swcurran about placing a size limit on images. @swcurran Do we know what the upper limit is in the oca-parser?

Gavinok commented 1 year ago

I have added the requested changes. I went with a based on my testing safe default on the number of supported characters as well as supporting the option to override the value (clicking Proceed Anyway). In addition, the error messages have now been relocated as recommended by @amanji

image

All inputs are now counted rather than just file uploads. Tracking the character count at all times seems to be a fine user experience as well as removing added complexity.