S3Image component ignores preview="hidden" if path prop specified

[russelltaga]

When using the S3Image component, if you include the path prop like so, the component seems to ignore suppressing the preview via preview="hidden".

<S3Image level="private" preview="hidden" path="test/" fileToKey={this.fileToKey} onLoad={this.handleLoad} picker />

Here are screenshots showing how this renders:

and in the JS console:

If you select an image with the picker, it'll render it vs. suppressing the preview as well.

[powerful23]

@russelltaga I think that preview props is only for PhotoPicker. I will make a pr to hide images in S3Image.

[russelltaga]

Ugh, my bad, but thank you so much!

[powerful23]

@russelltaga this issue has been fixed in the latest release. Please feel free to reopen the issue if neccessary.

[russelltaga]

@powerful23 Thank you much!

[russelltaga]

@powerful23 Sorry to bother you about this, but one side effect with the hidden image, is that I'm not seeing a way to know when the file has been uploaded. The onLoad event understandably doesn't fire since you're no longer loading the image to preview it. Are there any other hooks that I overlooked by chance when using S3Image?

[powerful23]

@russelltaga we will look into that.

[hernangarcia]

Hello @russelltaga , can you please share a sample about using the component? I am getting weird display when using it.

This is my code:
<S3Image imgKey={username + '_profile_img'} picker />

And you can see in the image what I get.

[russelltaga]

@hernangarcia Over time some of the requirements we had at the time shifted and I ended up implementing a custom UI and using the Storage APIs directly. It's been many months and a little tied up right now, but will try to whip up an example next week.

[russelltaga]

@hernangarcia Here's a sample component. I'm not seeing anything funky with a bare bones component.

With preview

import React, { Component } from 'react';
import { S3Image } from 'aws-amplify-react';
import { Container, Header } from 'semantic-ui-react';

class Sample extends Component {

    render() {
        const key = 'test';
        return (
            <Container textAlign="center">
                <Header as="h1" content="Sample S3Image component" />
                <S3Image imgKey={key} picker />
            </Container>
        );
    }

}

export default Sample;

With preview suppressed

import React, { Component } from 'react';
import { S3Image } from 'aws-amplify-react';
import { Container, Header } from 'semantic-ui-react';

class Sample extends Component {

    render() {
        const key = 'test';
        return (
            <Container textAlign="center">
                <Header as="h1" content="Sample S3Image component" />
                <S3Image imgKey={key} picker hidden />
            </Container>
        );
    }

}

export default Sample;

[ceich]

@russelltaga are you looking at the 2.1.x version of aws-amplify-react? I just upgraded today and see what @hernangarcia is seeing.

[russelltaga]

@ceich My bad, I'm definitely on an older version (completely forgot to upgrade to the latest for the test). Will try to verify soon.

[russelltaga]

With aws-amplify-react 2.1.1 I get this when using the picker (<S3Image imgKey={key} picker />).

and get a blank component if the hidden prop is added (<S3Image imgKey={key} picker hidden />).

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[sammartinez]

Looking at responses from @russelltaga I do see that he was able to resolve this other ways and there are other FRs open for similar things, as referenced above. I am going to resolve this feature request. Please feel free to make comments on the RFC if there are further callouts.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.