Add max upload size to image uploader #293
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -127,7 +127,17 @@ export default class ImageUploader extends BaseComponent { | |
| handleInputChange(e) { | ||
| e.preventDefault(); | ||
| const files = e.target.files; | ||
| const tooLargeFileNames = []; | ||
| const filteredFiles = _.filter(files, file => { | ||
| if ((file.size / 1024) > 300) { | ||
| tooLargeFileNames.push(file); | ||
| return false; | ||
| } | ||
| return true; | ||
| }); | ||
|
|
||
| const fileArray = filteredFiles.map(file => ({ file, metaData: { name: file.name } })); | ||
|
|
||
| let newFiles = this.state.files.concat(fileArray); | ||
| newFiles = _.uniqBy(newFiles, fileObject => fileObject.metaData.name); | ||
| this.safeSetState({ | ||
|
|
@@ -138,6 +148,14 @@ export default class ImageUploader extends BaseComponent { | |
| this.addImagePreviewUrl(file); | ||
| }); | ||
|
|
||
| if (tooLargeFileNames.length !== 0) { | ||
| let names = '\n'; | ||
| tooLargeFileNames.forEach((file) => { | ||
| names = names.concat(` ${file.name} (${(file.size / 1024).toFixed(2)} KB)\n`); | ||
| }); | ||
| alert(`The following exceeded the maximum upload size: ${names}`); | ||
|
There was a problem hiding this comment. Maybe just make this Also, it would generally be a lot more natural to add the newline in here instead of as the first part of the string above, so just making it There was a problem hiding this comment. Instead of There was a problem hiding this comment. Yeah you're right, let's keep things pretty! I'll try not to fall into my old habits ;) |
||
| } | ||
|
|
||
| // Reset to "No Files Chosen" in the input element instead of saying "10 files" or so | ||
| e.target.parentNode.parentNode.parentNode.parentNode.parentNode.reset(); | ||
|
There was a problem hiding this comment. There must be a more elegant way to do this. What are all the There was a problem hiding this comment. If I remember correctly, it was just really hard getting a ref to it or something like that, it is without a doubt ugly though |
||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,6 +3,10 @@ | |
| color: black; | ||
| } | ||
|
|
||
| body{ | ||
|
|
||
| font-family: Roboto, sans-serif; | ||
| } | ||
|
|
||
| .toggle-button { | ||
| border: 0; | ||
| padding: 0; | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works, good job! But there's a smoother way we can do it, like this:
See these docs for an explanation of the reduce function