Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File: Image previews like for CloudinaryImage #4198

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

outluch
Copy link

@outluch outluch commented Apr 8, 2017

Description of changes

Added image preview in File field, like CloudinaryImage field

Related issues (if any)

Testing

eslint passed, data tests failed cause of timeouts etc.
Please maybe not approve pullrequest, but make such changes yourself in your dev env?

  • Please confirm npm run test-all ran successfully.

Copy link
Contributor

@wmertens wmertens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I didn't test but I assume it works :)

Would be good if you can address my comments.

target="__blank"
style={{ float: 'left', marginRight: '1em' }}
>
<img src={this.getImageSource()} style={{ height: 90 }} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be cleaner to do const src = this.getImageSource() and then use that in both places

@@ -201,12 +223,19 @@ module.exports = Field.create({
</div>
);

const imageContainer = (
<div style={this.isImage() ? { marginBottom: '1em' } : null}>
{this.isImage() && this.renderImagePreview()}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with isImage

@@ -65,6 +66,13 @@ module.exports = Field.create({
hasFile () {
return this.hasExisting() || !!this.state.userSelectedFile;
},
isImage() {
const href = this.props.value ? this.props.value.url : undefined;
return href && href.match(/\.(jpeg|jpg|gif|png)$/i) != null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can add a svg in there as well…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants