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.

Sign up for GitHub

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

better fileSizeError custom message, updated readme #17

Open
wants to merge 2 commits into
base: release/v0.3.0
Choose a base branch
from
Open

better fileSizeError custom message, updated readme #17

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
794eef6
better fileSizeError custom message, updated readme
dmmcinty Apr 9, 2018
427a97f
Un-prettier things
dmmcinty Apr 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ customMessage: PropTypes.shape({
instructions: PropTypes.string, // default: 'Drag-n-drop a file or click to add an image'
acceptedFileTypes: PropTypes.string, // default: 'Accepted file types: '
maxFileSize: PropTypes.string, // default: 'Max file size: '
fileTypeErrorMessage: PropTypes.string, // default: `File size must be less than $BYTES`
fileTypeErrorMessage: PropTypes.string, // default: 'File size must be less than $BYTES'. maxFileSize value can be referenced with '$BYTES'
fileSizeErrorMessage: PropTypes.string, // default: 'Invalid file type'
})
```
Expand Down
120 changes: 63 additions & 57 deletions src/DropNCrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@ class DropNCrop extends Component {
};

onCrop = () => {
const {
value,
onChange,
} = this.props;
const { value, onChange } = this.props;

if (typeof this.cropperRef.getCroppedCanvas() !== 'undefined') {
onChange({
Expand All @@ -73,11 +70,20 @@ class DropNCrop extends Component {
allowedFileTypes,
customMessage,
} = this.props;
const fileSizeErrorMessage = customMessage.fileSizeErrorMessage
? customMessage.fileSizeErrorMessage + bytesToSize(maxFileSize)
const fileSizeErrorMessage = customMessage.fileSizeErrorMessage
? customMessage.fileSizeErrorMessage.replace(
'$BYTES',
bytesToSize(maxFileSize)
)
: null;
const fileSizeValidation = fileSizeLessThan(maxFileSize, fileSizeErrorMessage)(files);
const fileTypeValidation = fileType(allowedFileTypes, customMessage.fileTypeErrorMessage)(files);
const fileSizeValidation = fileSizeLessThan(
maxFileSize,
fileSizeErrorMessage
)(files);
const fileTypeValidation = fileType(
allowedFileTypes,
customMessage.fileTypeErrorMessage
)(files);

if (fileSizeValidation.isValid && fileTypeValidation.isValid) {
const reader = new FileReader();
Expand Down Expand Up @@ -120,56 +126,56 @@ class DropNCrop extends Component {

return (
<div className={classNames(dropNCropClasses)}>
{value && value.src
? <Cropper
ref={input => {
this.cropperRef = input;
}}
src={value && value.src}
style={{
height: canvasHeight,
width: canvasWidth,
}}
cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
{...cropperOptions}
/>
: <Dropzone
className="dropzone"
activeClassName="dropzone--active"
onDrop={this.onDrop}
style={{
height: canvasHeight,
width: canvasWidth,
}}
>
<div key="dropzone-instructions">
{!instructions
? <div className="dropzone-instructions">
<div className="dropzone-instructions--main">
{customMessage.instructions}
</div>
<div className="dropzone-instructions--sub">
{customMessage.acceptedFileTypes}
{' '}
{allowedFileTypes
.map(mimeType => `.${mimeType.split('/')[1]}`)
.join(', ')}
</div>
<div className="dropzone-instructions--sub">
{customMessage.maxFileSize} {bytesToSize(maxFileSize)}
</div>
</div>
: instructions}
</div>
{value && value.error
? <div
key="dropzone-validation"
className="dropzone-validation"
>
{value && value.error}
{value && value.src ? (
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you explain these changes? Did you run prettier on this or something?

When I'm reviewing a PR having large blocks of formatting changes to unrelated code makes it harder for me to understand 100% of what's going on.

Copy link
Author

Choose a reason for hiding this comment

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

prettier ran automatically, so i'd assumed it was intended that way. let me recommit but without prettier

<Cropper
ref={input => {
this.cropperRef = input;
}}
src={value && value.src}
style={{
height: canvasHeight,
width: canvasWidth,
}}
cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
{...cropperOptions}
/>
) : (
<Dropzone
className="dropzone"
activeClassName="dropzone--active"
onDrop={this.onDrop}
style={{
height: canvasHeight,
width: canvasWidth,
}}
>
<div key="dropzone-instructions">
{!instructions ? (
<div className="dropzone-instructions">
<div className="dropzone-instructions--main">
{customMessage.instructions}
</div>
<div className="dropzone-instructions--sub">
{customMessage.acceptedFileTypes}{' '}
{allowedFileTypes
.map(mimeType => `.${mimeType.split('/')[1]}`)
.join(', ')}
</div>
: null}
</Dropzone>}
<div className="dropzone-instructions--sub">
{customMessage.maxFileSize} {bytesToSize(maxFileSize)}
</div>
</div>
) : (
instructions
)}
</div>
{value && value.error ? (
<div key="dropzone-validation" className="dropzone-validation">
{value && value.error}
</div>
) : null}
</Dropzone>
)}
</div>
);
}
Expand Down