Skip to content

Commit

Permalink
Fix(web): FileUploader isRequired prop only marks label
Browse files Browse the repository at this point in the history
 * the FileUploaderInput input element should never have the `required` attribute
   cause it is use only for calling the dialog window
 * the files are then stored in the queue
 * for required validation is responsible the developer who is using this component
  • Loading branch information
literat committed May 24, 2024
1 parent 7a940b3 commit 76ccd52
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 15 deletions.
2 changes: 1 addition & 1 deletion packages/web-react/src/components/FileUploader/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ and [escape hatches][readme-escape-hatches].

> ⚠️ We don't use the `required` attribute on the input element. This is because it triggers the browser's default validation, which can block form submission.
> Instead, the `FileUploaderInput` component is used to open the system file dialog, and the component itself manages the file(s).
> Please note, the validation for required files is not automatically handled. Developers need to implement this validation independently, using our JS plugin. This approach provides more flexibility and customization to meet specific validation requirements.
> Please note, the validation for required files is not automatically handled. Developers need to implement this validation independently. This approach provides more flexibility and customization to meet specific validation requirements.
## FileUploaderList Props

Expand Down
16 changes: 6 additions & 10 deletions packages/web/src/scss/components/FileUploader/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,26 +160,22 @@ Microsoft Word documents:

### Required Input

To mark the input as required, simply add the `required` attribute to the native
`input` element and the `FileUploaderInput__label--required` to the label:
To mark the input as required, simply add the `FileUploaderInput__label--required` to the label:

```html
<div class="FileUploaderInput" data-spirit-element="wrapper">
<label for="fileUploader" class="FileUploaderInput__label FileUploaderInput__label--required">Label</label>
<input
type="file"
id="fileUploader"
name="attachment"
class="FileUploaderInput__input"
data-spirit-element="input"
required
/>
<input type="file" id="fileUploader" name="attachment" class="FileUploaderInput__input" data-spirit-element="input" />
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
<!---->
</div>
</div>
```

> ⚠️ We don't use the `required` attribute on the input element. This is because it triggers the browser's default validation, which can block form submission.
> Instead, the `FileUploaderInput` component is used to open the system file dialog, and our [JS plugin](#javascript-plugin) manages the file(s).
> Please note, the validation for required files is not automatically handled. Developers need to implement this validation independently, using our JS plugin. This approach provides more flexibility and customization to meet specific validation requirements.
### Validation States

Just like any other form component in Spirit, FileUploader implements the
Expand Down
4 changes: 0 additions & 4 deletions packages/web/src/scss/components/FileUploader/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,6 @@ <h2 class="docs-Heading">Input Validation States</h2>
id="fileUploaderSuccess"
name="attachment3"
class="FileUploaderInput__input"
required
data-spirit-element="input"
/>
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
Expand Down Expand Up @@ -334,7 +333,6 @@ <h3 id="attachments-fileUploadSuccess" hidden>Attachments</h3>
id="fileUploaderWarning"
name="attachment4"
class="FileUploaderInput__input"
required
data-spirit-element="input"
/>
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
Expand Down Expand Up @@ -389,7 +387,6 @@ <h3 id="attachments-fileUploadWarning" hidden>Attachments</h3>
id="fileUploaderDanger"
name="attachment5"
class="FileUploaderInput__input"
required
data-spirit-element="input"
/>
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
Expand Down Expand Up @@ -452,7 +449,6 @@ <h2 class="docs-Heading">Input Disabled</h2>
id="fileUploaderDisabled"
name="attachment4"
class="FileUploaderInput__input"
required
disabled
data-spirit-element="input"
/>
Expand Down

0 comments on commit 76ccd52

Please sign in to comment.