files knob

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     sourceType: 'module',
   },
   env: {
+    browser: true,
     es6: true,
     node: true,
     'jest/globals': true,

addons/knobs/README.md

@@ -247,6 +247,21 @@ const value = select(label, options, defaultValue);
 
 > You can also provide options as an array like this: `['red', 'blue', 'yellow']`
 
+### files
+
+Allows you to get a value from a file input from the user.
+
+```js
+import { files } from '@storybook/addon-knobs/react';
+
+const label = 'Images';
+const defaultValue = [];
+
+const value = files(label, defaultValue);
+```
+
+> Multiple files can be selected, and will be returned as an array of [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+
 ### date
 
 Allow you to get date (and time) from the user.

addons/knobs/example/stories/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import moment from 'moment';
-import { withKnobs, number, object, boolean, text, select, date, array, color } from '../../src';
+import { withKnobs, number, object, boolean, text, select, date, array, color, files } from '../../src';
 
 const stories = storiesOf('Example of Knobs', module);
 
@@ -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=']);
+
   const customStyle = object('Style', {
     fontFamily: 'Arial',
     padding: 20,
@@ -38,6 +40,7 @@ stories.add('with all knobs', () => {
       I like: <ul>{passions.map((p, i) => <li key={i}>{p}</li>)}</ul>
       <p>My favorite number is {favoriteNumber}.</p>
       <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
+      <p>When I am happy I look like this: <img src={images[0]} /></p>
     </div>
   );
 });

addons/knobs/src/base.js

@@ -61,3 +61,7 @@ export function date(name, value = new Date()) {
 export function button(name, callback) {
   return manager.knob(name, { type: 'button', callback, hideLabel: true });
 }
+
+export function files(name, value = []) {
+  return manager.knob(name, { type: 'files', value });
+}

addons/knobs/src/components/types/Files.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function fileReaderPromise(file) {
+  return new Promise(resolve => {
+    const fileReader = new FileReader();
+    fileReader.onload = e => resolve(e.currentTarget.result);
+    fileReader.readAsDataURL(file);
+  });
+}
+
+const FilesType = ({ knob, onChange }) => (
+  <input
+    id={knob.name}
+    type="file"
+    multiple
+    onChange={e => Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)}
+  />
+);
+
+FilesType.defaultProps = {
+  knob: {},
+  onChange: value => value,
+};
+
+FilesType.propTypes = {
+  knob: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onChange: PropTypes.func,
+};
+
+FilesType.serialize = () => undefined;
+FilesType.deserialize = () => undefined;
+
+export default FilesType;

addons/knobs/src/components/types/index.js

@@ -7,6 +7,7 @@ import SelectType from './Select';
 import ArrayType from './Array';
 import DateType from './Date';
 import ButtonType from './Button';
+import FilesType from './Files';
 
 export default {
   text: TextType,
@@ -18,4 +19,5 @@ export default {
   array: ArrayType,
   date: DateType,
   button: ButtonType,
+  files: FilesType,
 };

addons/knobs/src/index.js

@@ -9,6 +9,7 @@ import {
   array,
   boolean,
   button,
+  files,
   color,
   date,
   knob,
@@ -19,7 +20,7 @@ import {
   text,
 } from './base';
 
-export { knob, text, boolean, number, color, object, array, date, button, select };
+export { knob, text, boolean, number, color, object, array, date, button, files, select };
 
 deprecate(() => {},
 'Using @storybook/addon-knobs directly is discouraged, please use @storybook/addon-knobs/{{framework}}');

addons/knobs/src/react/index.js

@@ -14,10 +14,11 @@ import {
   date,
   select,
   button,
+  files,
   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 };
 
 export const reactHandler = (channel, knobStore) => getStory => context => {
   const initialContent = getStory(context);

addons/knobs/src/vue/index.js

@@ -11,10 +11,11 @@ import {
   date,
   select,
   button,
+  files,
   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 };
 
 export const vueHandler = (channel, knobStore) => getStory => context => ({
   data() {