Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomInput FileBrowser does not display selected file. #1460

Closed
deAtog opened this issue Apr 12, 2019 · 0 comments · Fixed by #1461 · May be fixed by largerock/largerock.com#5
Closed

CustomInput FileBrowser does not display selected file. #1460

deAtog opened this issue Apr 12, 2019 · 0 comments · Fixed by #1461 · May be fixed by largerock/largerock.com#5

Comments

@deAtog
Copy link
Contributor

deAtog commented Apr 12, 2019

  • components: <CustomInput type="file">
  • reactstrap version 7.1.0+
  • import method es6
  • react version 16.7.0 & 16.8.6
  • bootstrap version 4.2.1 & 4.3.1

What is happening?

Upon selecting a file using the as shown here: https://reactstrap.github.io/components/form/#exampleCustomFileBrowser The associated label does not update with the name of the selected file as shown here: https://getbootstrap.com/docs/4.3/components/forms/#file-browser

What should be happening?

After selecting a file, the label for the should reflect the file selected.

Bind the onChange method of the input to update the state of the label. This onChange method should then call any user-provided onChange method.

Steps to reproduce issue

  1. Render component
  2. Click on file input or Browse
  3. Select a file and click Open/OK.
  4. Notice input has not updated.

Error message in console

No errors in console

Code

// In component section render method add:

<CustomInput type="file" id="fileBrowserExample"/>
deAtog pushed a commit to deAtog/reactstrap that referenced this issue Apr 15, 2019
Fix failing tests due to conversion from a React
functional component to a React Class component.

This fixes reactstrap#1460.
deAtog pushed a commit to deAtog/reactstrap that referenced this issue Apr 15, 2019
to store state of selected file(s) to display in the label.

This fixes reactstrap#1460.
deAtog pushed a commit to deAtog/reactstrap that referenced this issue Apr 15, 2019
to display the selected files in the label.

This fixes reactstrap#1460.
deAtog pushed a commit to deAtog/reactstrap that referenced this issue Aug 22, 2019
to display the selected files in the label.

This fixes reactstrap#1460.
TheSharpieOne pushed a commit that referenced this issue Aug 22, 2019
* fix(CustomInput[type=file]): add CustomFileInput component
to display the selected files in the label.

This fixes #1460.

* fix(CustomFileInput): Remove bsSize class as it does not apply

* test(CustomFileInput): ensure onChange calls prop.onChange if it exists

* test(CustomFileInput): removes fakepath from file name

* test(CustomFileInput): lists multiple files when supported

* fix(CustomFileInput): include children in render
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant