[RFR] FileInput #684
Merged
[RFR] FileInput #684
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jpetitcolas
suggested changes
May 24, 2017
docs/Fields.md
Outdated
|
|
||
| ## `<FileField>` | ||
|
|
||
| If you need to display an file provided by your API, you can use the `<FileField />` component: |
docs/Inputs.md
Outdated
| This component accepts all [react-dropzone properties](https://github.com/okonet/react-dropzone#features), in addition to those of admin-on-rest. For instance, if you need to upload several images at once, just add the `multiple` DropZone attribute to your `<ImageInput />` field. | ||
| Writing a custom field component for displaying the current value(s) is easy: it's a standard [field](./Fields.html#writing_your_own_field_component). | ||
|
|
||
| When receiving **new** files, `ImageInput` will add a `rawFile` property to the object passed as the `record` prop of children. This `rawFile` will the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) instance of the newly added file. This can be useful to display informations about size or mimetype inside a custom field. |
There was a problem hiding this comment.
s/will the [File]/is the [File]/
src/i18n/messages.js
Outdated
| file: { | ||
| upload_several: 'Drop some files to upload, or click to select one.', | ||
| upload_single: 'Drop a file to upload, or click to select it.', | ||
| }, | ||
| image: { | ||
| upload_several: 'Drop some files to upload, or click to select one.', |
There was a problem hiding this comment.
Perhaps can we rename files to pictures here?
src/i18n/messages.js
Outdated
| @@ -25,6 +25,10 @@ export default { | |||
| dashboard: 'Dashboard', | |||
| }, | |||
| input: { | |||
| file: { | |||
| upload_several: 'Drop some files to upload, or click to select one.', | |||
There was a problem hiding this comment.
Don't forget to add it to https://github.com/marmelab/aor-language-french
src/mui/field/FileField.js
Outdated
| import PropTypes from 'prop-types'; | ||
| import get from 'lodash.get'; | ||
|
|
||
| export const FileField = ({ elStyle = { display: 'inline-block' }, record, source, title, src }) => { |
There was a problem hiding this comment.
Use defaultProps instead of default values.
src/mui/input/FileInput.js
Outdated
|
|
||
| constructor(props) { | ||
| super(props); | ||
| console.log({ props }); |
src/mui/input/FileInputPreview.js
Outdated
| componentWillUnmount() { | ||
| const { file } = this.props; | ||
|
|
||
| if (file && file.preview && window && window.URL && window.URL.revokeObjectURL) { |
There was a problem hiding this comment.
I think we can prevent of all these checks as support seems quite nice: https://developer.mozilla.org/fr/docs/Web/API/URL/revokeObjectURL
sedy-bot
referenced
this pull request
May 24, 2017
As requested by jpetitcolas at https://github.com/marmelab/admin-on-rest/pull/684#discussion_r118178147
sedy-bot
referenced
this pull request
May 24, 2017
As requested by jpetitcolas at https://github.com/marmelab/admin-on-rest/pull/684#discussion_r118178881
|
Is the |
|
@djhi: we didn't encourage it in the documentation, yet some devs may use it. So, let's deprecate it the soft way for now. :) |
|
Ok, I'll try to keep it as I did for the ImageInput then |
djhi
referenced
this pull request
May 24, 2017
As requested by jpetitcolas at https://github.com/marmelab/admin-on-rest/pull/684#discussion_r118178147
djhi
referenced
this pull request
May 24, 2017
As requested by jpetitcolas at https://github.com/marmelab/admin-on-rest/pull/684#discussion_r118178881
- [x] Refactored the existing ImageInput into FileInput (but kept an exported ImageInput component in order to not break backward compatibilty) - [x] Added a new `FileField` component (similar to `ImageField` but displays a link instead of an image) - [x] `FileField` and `ImageField` can handle array sources now - [x] `FileField` and `ImageField` now have access to the raw [File](https://developer.mozilla.org/en/docs/Web/API/File) object for newly dropped files (Fix #680) - [x] Cleans up URLs generated for preview (Fixes #681) - [x] Tests
Closed
fzaninotto
approved these changes
May 30, 2017
docs/Inputs.md
Outdated
|
|
||
| Writing a custom field component for displaying the current value(s) is easy: it's a standard [field](./Fields.html#writing_your_own_field_component). | ||
|
|
||
| When receiving **new** files, `FileInput` will add a `rawFile` property to the object passed as the `record` prop of children. This `rawFile` will the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) instance of the newly added file. This can be useful to display informations about size or mimetype inside a custom field. |
There was a problem hiding this comment.
s/This rawFile will the/This rawFile is the/
docs/Inputs.md
Outdated
|
|
||
| The `FileInput` component accepts all [react-dropzone properties](https://github.com/okonet/react-dropzone#features), in addition to those of admin-on-rest. For instance, if you need to upload several files at once, just add the `multiple` DropZone attribute to your `<FileInput />` field. | ||
|
|
||
| If the default Dropzone label don't fit with your need, you can pass a `placeholder` attribute to overwrite it. The attribute can be anything React can render (`PropTypes.node`): |
There was a problem hiding this comment.
s/the default Dropzone label don't fit/the default Dropzone label doesn't fit/
fzaninotto
approved these changes
May 30, 2017
This was referenced Jun 1, 2017
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
FileFieldcomponent (similar toImageFieldbut displays a link instead of an image)FileFieldandImageFieldcan handle array sources nowFileFieldandImageFieldnow have access to the raw File object for newly dropped files (Fix ImageInput doesn't pass useful properties to children #680)