files knob #2860
files knob #2860
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2860 +/- ##
=========================================
- Coverage 36.21% 36.12% -0.1%
=========================================
Files 444 445 +1
Lines 9736 9775 +39
Branches 893 909 +16
=========================================
+ Hits 3526 3531 +5
- Misses 5670 5672 +2
- Partials 540 572 +32
Continue to review full report at Codecov.
|
Please use |
| @@ -20,6 +20,8 @@ stories.add('with all knobs', () => { | |||
|
|
|||
| const passions = array('Passions', ['Fishing', 'Skiing']); | |||
|
|
|||
| const images = files('Happy Picture', ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=']); | |||
There was a problem hiding this comment.
Please add this example to examples/offisial-storybook instead. addons/*/examples are outdated and probably will be removed. Sorry for the confusion
| const FilesType = ({ knob, onChange }) => ( | ||
| <input | ||
| id={knob.name} | ||
| type="file" |
There was a problem hiding this comment.
It would be handy to be able to pass accept atribute here
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Limiting_accepted_file_types
addons/knobs/src/vue/index.js
Outdated
| manager, | ||
| } from '../base'; | ||
|
|
||
| export { knob, text, boolean, number, color, object, array, date, select, button }; | ||
| export { knob, text, boolean, number, color, object, array, date, select, button, files }; |
There was a problem hiding this comment.
Can it be supported in angular and polymer as well?
|
@kn0ll are you still interested in finishing that? It's OK if you aren't, I'll just pick it up then |
|
@kn0ll This is really useful, let's get this finished and merged! |
|
sorry i fell out of the loop all. other priorities came up... @Hypnosphi if you've not started i will take it over the finish line today. |
|
No I haven't |
|
Please resolve conflicts |
kn0ll
requested review from
alexandrebodin,
alterx,
danielduan,
leonrodenburg,
theinterned and
usulpro
as code owners
|
Released as |
Issue: my component can accept file input but i can't create a knob for it.
What I did
created a knob for file input.
How to test
i added the knob to the
all knobsstory. let me know if this is insufficient.notes: some of these changes break from the pattern of other knobs... with reason...
i added
browser: trueto.eslintrc.js. this is so it lintsFileReader, a global object of window. not trying to impose anything here though. if you'd prefer i lint this another way, like disable linting for those lines, i can do that...files are passed as Data URLs. i ran into security and serialization issues passing input files between iframes and the only in-scope solution i could come up with... was only parsing files as Data URLs. if the component requires other types, it would have to manage that itself (which kind of sucks-- but at least keeps the knob robust). here is an example wrapper component that could manage this type of deserialization
i set serialize and deserialize to undefined. this is because:
A. certain files, when serialized to the URL, break on reload (404 or something).
B. you cannot actually set the value of input type file, and so it serves no purpose anyway.
i was unable to pass tests locally because of master tests not passing #2859... and i am unsure how to clean up the failing checks for this PR... sorry...
thank you all...