mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00
Code Issues Releases Wiki Activity

Drop custom file upload plugin in favor of CSS

Browse Source
This commit is contained in:
Martijn Cuppens
2020-10-22 15:20:53 +02:00
parent 3e2f9ab237
commit f236667483
15 changed files with 115 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
site/content/docs/5.0/forms/file.md
View File

@@ -1,73 +0,0 @@
---
layout: docs
title: File browser
description: Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.
group: forms
toc: true
---
{{< callout info >}}
The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs.
{{< /callout >}}
## Default
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
{{< example >}}
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}
Add the `disabled` attribute to the `<input>` and the custom markup will be updated to appear disabled.
{{< example >}}
<div class="form-file">
<input type="file" class="form-file-input" id="customFileDisabled" disabled>
<label class="form-file-label" for="customFileDisabled">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}
Longer placeholder text is truncated and an ellipsis is added when there's not enough space.
{{< example >}}
<div class="form-file">
<input type="file" class="form-file-input" id="customFileLong">
<label class="form-file-label" for="customFileLong">
<span class="form-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}
We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
## Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
{{< example >}}
<div class="form-file form-file-lg mb-3">
<input type="file" class="form-file-input" id="customFileLg">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-sm">
<input type="file" class="form-file-input" id="customFileSm">
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}

25
site/content/docs/5.0/forms/form-control.md
View File

@@ -81,6 +81,31 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
</form>
{{< /example >}}
## File input
{{< example >}}
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
{{< /example >}}
## Color
{{< example >}}

32
site/content/docs/5.0/forms/input-group.md
View File

@@ -290,45 +290,21 @@ Input groups include support for custom selects and custom file inputs. Browser
{{< example >}}
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="form-file-label" for="inputGroupFile01">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<input type="file" class="form-control" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
</div>
<div class="input-group mb-3">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile02">
<label class="form-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<input type="file" class="form-control" id="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="form-file-label" for="inputGroupFile03">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
</div>
<div class="input-group">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="form-file-label" for="inputGroupFile04">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
{{< /example >}}

2
site/content/docs/5.0/forms/overview.md
View File

@@ -12,8 +12,6 @@ sections:
description: Improve browser default select elements with a custom initial appearance.
- title: Checks & radios
description: Use our custom radio buttons and checkboxes in forms for selecting input options.
- title: File
description: Replace browser default file inputs with our custom version with optional JavaScript.
- title: Range
description: Replace browser default range inputs with our custom version.
- title: Input group

9
site/content/docs/5.0/forms/validation.md
View File

@@ -241,7 +241,6 @@ Validation styles are available for the following form controls and components:
- `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups)
- `<select>`s with `.form-select`
- `.form-check`s
- `.form-file`
{{< example >}}
<form class="was-validated">
@@ -279,12 +278,8 @@ Validation styles are available for the following form controls and components:
<div class="invalid-feedback">Example invalid select feedback</div>
</div>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="validationFormFile" required>
<label class="form-file-label" for="validationFormFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
<div class="mb-3">
<input type="file" class="form-control" aria-label="file example" required>
<div class="invalid-feedback">Example invalid form file feedback</div>
</div>

3
site/content/docs/5.0/migration.md
View File

@@ -25,6 +25,7 @@ toc: true
- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
- Promoted the Floating labels example to fully supported form component. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
- File inputs now use the `.form-control` class and don't require JavaScript, additional HTML, or additional classes. [See #31955](https://github.com/twbs/bootstrap/pull/31955).
### Utilities
@@ -266,7 +267,7 @@ Changes to Reboot, typography, tables, and more.
- Updated file input component with the same overall design, but improved HTML.
- Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
- Dropped native `.form-control-file` and `.form-control-range` components entirely.
- Renamed `.custom-file` to `.form-file` (including variables).
- Renamed `.custom-file` to `.form-file` (including variables). **Watch out:** `.form-file` was later on dropped in `v5.0.0-alpha3`, now you can use `.form-control`.
- Added support for `:focus` and `:disabled` styles.
- Renamed `.custom-range` to `.form-range` (including variables).
- Dropped `.form-group` for margin utilities (we've replaced our docs examples with `.mb-3`).