amplify-ui icon indicating copy to clipboard operation
amplify-ui copied to clipboard

Published 20 hours ago • verified publisher icon aws-amplify

[Feedback] S3 Image Picker On Completed Upload Trigger?

Open ucjallen opened this issue 5 years ago • 6 comments
trafficstars

Page: /ui/storage/s3-image-picker/q/framework/angular

Feedback:

I have gotten the S3 Image Picker to work and when I click the button, it uploads to my S3 bucket, but then it just sits there. How do I know when the upload has completed and can direct back to another page? I noticed the S3 album has a handleOnLoad, is there something similar for the image picker?

ucjallen avatar Aug 21 '20 07:08 ucjallen

hi @ucjallen - do you get an error message? Can you provide more info about your environment? Version of Amplify, etc... ? Thank you

mauerbac avatar Aug 24 '20 16:08 mauerbac

I had some help from the aws subreddit, so, basically you need to use a Hub.Listen("storage") for the upload success event. That initially wasn't working until I added the "track" param to the image picker as well. Then i finally received the storage events that the image picker was using. This should definitely be mentioned in the documentation, because the storage events do not fire without the track param added!

Unfortunately, there is not enough customization available with the current image picker, no cropper, no dimension restrictions, no resize ability and no file type restrictions, so I ended up writing a custom image picker using a file input, an image cropper library and the Storage.put method

ucjallen avatar Aug 31 '20 03:08 ucjallen

Hi @ucjallen - going to re-open this so we can verify this issue and update the S3 Image Picker Docs

mauerbac avatar Aug 31 '20 14:08 mauerbac

@ucjallen thanks for this tip was wondering how to do it and wanted to stay in the confines of the amplify ecosystem.

there should DEFINTELY be a callback function that monitors upload status and returns the file path / signed url.

b-bot avatar Mar 02 '21 11:03 b-bot

Seriously, amplify-s3-image-picker has ZERO documentation on its API options and how to use it.

beedrill avatar Apr 22 '22 05:04 beedrill

Here is what my solution ended up looking like for a profile page image component in angular. It is mobile friendly as well. Hopefully this helps anyone that finds this.

I also used an image cropping library as well and got that to work with it. It is setup with cognito as well

https://github.com/ucjallen/s3-image-picker/tree/master

ucjallen avatar Apr 25 '22 01:04 ucjallen

Closing out as the S3 Image Picker component has been deprecated.

reesscot avatar Dec 12 '22 23:12 reesscot