Drop custom file upload plugin in favor of CSS

5 files changed, 31 insertions, 110 deletions

diff --git a/site/content/docs/5.0/forms/file.md b/site/content/docs/5.0/forms/file.md
deleted file mode 100644
index 466e7b0950..0000000000
--- a/site/content/docs/5.0/forms/file.md
+++ /dev/null
@@ -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 >}}
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index 0287a90d23..cb86162bea 100644
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -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 >}}
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 83a7f44b9a..138d910e8c 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -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 >}}
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index 7d30db3570..dcd8e8ccd7 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -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
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index a3fa32689a..e01d369b08 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -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>