mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code 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
site/content/docs/5.0/forms/file.md
-73
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 >}}
site/content/docs/5.0/forms/form-control.md
+25
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 >}}
site/content/docs/5.0/forms/input-group.md
+4 -28
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 >}}
site/content/docs/5.0/forms/overview.md
-2
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
site/content/docs/5.0/forms/validation.md
+2 -7
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>