diff --git a/docs/components/file-upload.md b/docs/components/file-upload.md index d346d3f737..734825b497 100644 --- a/docs/components/file-upload.md +++ b/docs/components/file-upload.md @@ -86,9 +86,7 @@ Use the `button` slot to customize the button appearance. ```html preview - - Custom Button - + Custom Button ``` @@ -161,7 +159,7 @@ const App = () => ; ### Form Usage with FormData -The FileUpload component can be used inside a form as a replacement for ``. The files can be accessed using FormData. See [Form Control documentation](../getting-started/form-controls.md) for more details. +The FileUpload component can be used inside a form as a replacement for ``. The files can be accessed using FormData. See [Form Control documentation](../getting-started/form-controls.md) for more details. ```html preview
@@ -175,7 +173,7 @@ The FileUpload component can be used inside a form as a replacement for ` const form = document.querySelector('.file-upload'); - + form.addEventListener('submit', event => { event.preventDefault(); const formData = new FormData(form); @@ -190,7 +188,7 @@ import { SlFileUpload, SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => { const form = useRef(null); - + function handleSubmit(event) { event.preventDefault(); const formData = new FormData(form); @@ -203,8 +201,12 @@ const App = () => {

- Reset - Submit + + Reset + + + Submit +
); }; @@ -212,7 +214,7 @@ const App = () => { ### Form Usage with JSON -The FileUpload component can be used inside a form as a replacement for ``. The files can be serialized using JSON. See [Form Control documentation](../getting-started/form-controls.md) for more details. +The FileUpload component can be used inside a form as a replacement for ``. The files can be serialized using JSON. See [Form Control documentation](../getting-started/form-controls.md) for more details. ```html preview
@@ -228,7 +230,7 @@ The FileUpload component can be used inside a form as a replacement for ` { event.preventDefault(); const data = serialize(form); @@ -257,8 +259,12 @@ const App = () => {

- Reset - Submit + + Reset + + + Submit +
); }; @@ -273,7 +279,7 @@ To upload a file, listen to the `sl-change` event and handle the received file. ``` @@ -364,7 +374,7 @@ const App = () => { setTimeout(() => { fileInfo.loading = false; fileUpload.requestUpdate(); - }, 3000) + }, 3000); } return ( @@ -373,8 +383,12 @@ const App = () => {

- Reset - Submit + + Reset + + + Submit + ); }; @@ -389,21 +403,21 @@ To handle errors in a [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/