fix(all): enable input type file #458

Hyperkid123 · 2020-04-27T15:14:07Z

closes #307

this will have to be backported to V1

To Do

tests
docs
- validation example

skateman · 2020-04-27T17:58:18Z

Can't really say anything useful without an example usage piece of code 🤔

Hyperkid123 · 2020-04-28T09:12:20Z

@skateman I added examples to the docs. Source starts from here: https://github.com/data-driven-forms/react-forms/pull/458/files#diff-63eddbe3b4330a752e2fa0ffad9dba2fR1

codecov · 2020-04-28T09:24:59Z

Codecov Report

Merging #458 into master will increase coverage by 0.00%.
The diff coverage is 92.30%.

@@           Coverage Diff           @@
##           master     #458   +/-   ##
=======================================
  Coverage   89.70%   89.71%           
=======================================
  Files         138      138           
  Lines        2342     2354   +12     
  Branches      766      770    +4     
=======================================
+ Hits         2101     2112   +11     
- Misses        241      242    +1

Impacted Files	Coverage Δ
...pf4-component-mapper/src/files/dual-list-select.js	`100.00% <ø> (ø)`
...ges/react-form-renderer/src/files/use-field-api.js	`91.42% <80.00%> (-0.88%)`	⬇️
...ges/react-form-renderer/src/files/form-renderer.js	`100.00% <100.00%> (ø)`
.../react-form-renderer/src/files/renderer-context.js	`100.00% <100.00%> (ø)`
...m-renderer/src/form-renderer/enhanced-on-change.js	`96.42% <100.00%> (+0.27%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cb848f0...f654c4d. Read the comment docs.

rvsia · 2020-04-28T09:28:18Z

packages/react-renderer-demo/src/app/pages/renderer/file-input.md

+
+# File input
+
+Files cannot be easilly uploaded in JSON payload. In order to upload files usigng the input type *file* you can follow these steps.


easilly > easily

usigng > using

rvsia · 2020-04-28T09:29:07Z

packages/react-renderer-demo/src/app/pages/renderer/file-input.md

+
+## File onChange payload
+
+In order to successfully store the file reference, you have either use an input of type file or use an object with the following shape in your on change function ([visit MDN docs for more info on file upload](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)). 


maybe: 'use an input of "file" type'

rvsia · 2020-04-28T09:30:11Z

packages/react-renderer-demo/src/app/pages/renderer/file-input.md

+
+## Getting file from state.
+
+When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file avaiable in the submit function arguments.


avaiable > available

rvsia · 2020-04-28T09:30:34Z

packages/react-renderer-demo/src/app/pages/renderer/file-input.md

+
+When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file avaiable in the submit function arguments.
+
+The `formApi.fileInputs` is an array of field names with `type: file`. Be aware that if your filed name is in nested, you have to use the lodash like method of getting the value from state.


filed > field

rvsia · 2020-04-28T09:45:34Z

packages/react-form-renderer/src/files/use-field-api.js

@@ -76,6 +76,9 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
  };

  const fieldProps = useField(name, enhancedProps);
+  if (fieldProps.input.type === 'file' && typeof fieldProps.input.value === 'object') {


I think this modification should be moved to the return statement of this hook.

With this the input object is basically being modified at two different places. I would keep it at one place - it would be more consistent and readable.

its not going to be pretty. But ok

rvsia · 2020-04-28T12:18:25Z

packages/react-form-renderer/src/files/use-field-api.js

@@ -170,6 +177,8 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
    ...(arrayValidator ? { arrayValidator } : {}),
    input: {
      ...fieldProps.input,
+      value:


What about?
...(fieldProps.input.type === 'file' && typeof fieldProps.input.value === 'object' && {value: fieldProps.input.value.inputValue})

that's how I originally wrote it but linter wanted it this way

🤦‍♂️

rvsia

Looks good to me 👍

davellx · 2020-05-01T12:31:56Z

I was trying to make my own component for file inputs but couldn't go past the enhancedOnChange at the moment so I'm glad this PR exists, thank you !
Maybe It should be a good thing to plug some of the basic validation (required, length ?) or to explain in the docs that validation mut be done manually for future users.

Hyperkid123 · 2020-05-01T17:15:10Z

I was trying to make my own component for file inputs but couldn't go past the enhancedOnChange at the moment so I'm glad this PR exists, thank you !
Maybe It should be a good thing to plug some of the basic validation (required, length ?) or to explain in the docs that validation mut be done manually for future users.

@davellx The validation of input files is a bit tricky compared to other components. I think adding an example with a custom validator is a good idea. 👍

Hyperkid123 · 2020-05-04T10:04:00Z

@davellx @rvsia I have added validation to the docs example. We can think about proper file validator in different PR. There are enough tools available to make the file upload work as it is and I don't want to block it too much.

Hyperkid123 · 2020-05-04T11:42:32Z

🎉 This PR is included in version 2.2.0 🎉

The release is available on

Demo can be found here!

Hyperkid123 requested review from skateman and rvsia April 27, 2020 15:14

Hyperkid123 changed the title ~~[WIP] fix(all): enable input type file~~ fix(all): enable input type file Apr 28, 2020

Hyperkid123 force-pushed the file-input branch from 06a264b to dbf5926 Compare April 28, 2020 09:20

rvsia reviewed Apr 28, 2020

View reviewed changes

Hyperkid123 force-pushed the file-input branch from dbf5926 to 2a9af2b Compare April 28, 2020 09:29

rvsia reviewed Apr 28, 2020

View reviewed changes

Hyperkid123 force-pushed the file-input branch from 2a9af2b to e55bac5 Compare April 28, 2020 09:32

rvsia reviewed Apr 28, 2020

View reviewed changes

Hyperkid123 force-pushed the file-input branch from e55bac5 to 62bda6d Compare April 28, 2020 12:15

rvsia reviewed Apr 28, 2020

View reviewed changes

Hyperkid123 force-pushed the file-input branch from 62bda6d to 486bd2a Compare April 28, 2020 12:26

rvsia approved these changes Apr 28, 2020

View reviewed changes

Hyperkid123 changed the title ~~fix(all): enable input type file~~ [WIP] fix(all): enable input type file May 1, 2020

Hyperkid123 added 6 commits May 4, 2020 11:49

feat(all): enable input type file

c20d89e

fix(pf4): dual-list, removed isEqual from div attributes.

4cb356e

fix(renderer): fixed submitting being stuck when enhancing onSubmit.

1b58598

Added docs for file input.

f19938e

Added tests for file input handlers.

4c7b480

Added validation to the file input example.

b468d38

Hyperkid123 force-pushed the file-input branch from 486bd2a to b468d38 Compare May 4, 2020 10:02

Hyperkid123 changed the title ~~[WIP] fix(all): enable input type file~~ fix(all): enable input type file May 4, 2020

github-actions bot added docs docs pull requests PF3 labels May 4, 2020

github-actions bot added PF4 PF4 pull request renderer React form renderer PR labels May 4, 2020

Merge branch 'master' into file-input

f654c4d

Hyperkid123 force-pushed the file-input branch from ad5b8ef to f654c4d Compare May 4, 2020 11:25

rvsia approved these changes May 4, 2020

View reviewed changes

rvsia merged commit d705b19 into master May 4, 2020

Hyperkid123 added the released label May 4, 2020

Hyperkid123 deleted the file-input branch May 15, 2020 08:46


		# File input

		Files cannot be easilly uploaded in JSON payload. In order to upload files usigng the input type file you can follow these steps.


		## File onChange payload

		In order to successfully store the file reference, you have either use an input of type file or use an object with the following shape in your on change function ([visit MDN docs for more info on file upload](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)).


		## Getting file from state.

		When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file avaiable in the submit function arguments.


		When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file avaiable in the submit function arguments.

		The `formApi.fileInputs` is an array of field names with `type: file`. Be aware that if your filed name is in nested, you have to use the lodash like method of getting the value from state.

fix(all): enable input type file #458

fix(all): enable input type file #458

Uh oh!

Conversation

Hyperkid123 commented Apr 27, 2020 • edited by rvsia Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

To Do

Uh oh!

skateman commented Apr 27, 2020

Uh oh!

Hyperkid123 commented Apr 28, 2020

Uh oh!

codecov bot commented Apr 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hyperkid123 Apr 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rvsia left a comment

Choose a reason for hiding this comment

Uh oh!

davellx commented May 1, 2020

Uh oh!

Hyperkid123 commented May 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hyperkid123 commented May 4, 2020

Uh oh!

Hyperkid123 commented May 4, 2020

Uh oh!

Uh oh!

Hyperkid123 commented Apr 27, 2020 •

edited by rvsia

Loading

codecov bot commented Apr 28, 2020 •

edited

Loading

Hyperkid123 Apr 28, 2020 •

edited

Loading

Hyperkid123 commented May 1, 2020 •

edited

Loading