Drop custom file upload plugin in favor of CSS

3 files changed, 79 insertions, 110 deletions

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 6686ecfb80..9fa9cbae45 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -23,6 +23,14 @@
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
 
+  &[type="file"] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
+    }
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
     color: $input-focus-color;
@@ -56,6 +64,49 @@
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
+
+  // File input buttons theming
+  // stylelint-disable-next-line selector-pseudo-element-no-unknown
+  &::file-selector-button {
+    padding: $input-padding-y $input-padding-x;
+    margin: (-$input-padding-y) (-$input-padding-x);
+    margin-inline-end: $input-padding-x;
+    line-height: inherit;
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: $input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    @include transition($btn-transition);
+  }
+
+  // stylelint-disable-next-line selector-pseudo-element-no-unknown
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
+  }
+
+  &::-webkit-file-upload-button {
+    padding: $input-padding-y $input-padding-x;
+    margin: (-$input-padding-y) (-$input-padding-x);
+    margin-inline-end: $input-padding-x;
+    line-height: inherit;
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: $input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    @include transition($btn-transition);
+  }
+
+  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+    background-color: $form-file-button-hover-bg;
+  }
 }
 
 // Readonly controls as plain text
@@ -93,6 +144,19 @@
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
+
+  // stylelint-disable-next-line selector-pseudo-element-no-unknown
+  &::file-selector-button {
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+    margin-inline-end: $input-padding-x-sm;
+  }
+
+  &::-webkit-file-upload-button {
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+    margin-inline-end: $input-padding-x-sm;
+  }
 }
 
 .form-control-lg {
@@ -100,6 +164,19 @@
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
+
+  // stylelint-disable-next-line selector-pseudo-element-no-unknown
+  &::file-selector-button {
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+    margin-inline-end: $input-padding-x-lg;
+  }
+
+  &::-webkit-file-upload-button {
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+    margin-inline-end: $input-padding-x-lg;
+  }
 }
 
 .form-control-color {
diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
deleted file mode 100644
index 228d9adf39..0000000000
--- a/scss/forms/_form-file.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.form-file {
-  --#{$variable-prefix}form-file-height: #{$form-file-height};
-  position: relative;
-}
-
-.form-file-input {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  height: var(--#{$variable-prefix}form-file-height);
-  margin: 0;
-  opacity: 0;
-
-  &:focus-within ~ .form-file-label {
-    border-color: $form-file-focus-border-color;
-    box-shadow: $form-file-focus-box-shadow;
-  }
-
-  // Use disabled attribute in addition of :disabled pseudo-class
-  // See: https://github.com/twbs/bootstrap/issues/28247
-  &[disabled] ~ .form-file-label .form-file-text,
-  &:disabled ~ .form-file-label .form-file-text {
-    background-color: $form-file-disabled-bg;
-    border-color: $form-file-disabled-border-color;
-  }
-}
-
-.form-file-label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  display: flex;
-  height: var(--#{$variable-prefix}form-file-height);
-  border-color: $form-file-border-color;
-  @include border-radius($form-file-border-radius);
-  @include box-shadow($form-file-box-shadow);
-}
-
-.form-file-text {
-  display: block;
-  flex-grow: 1;
-  padding: $form-file-padding-y $form-file-padding-x;
-  overflow: hidden;
-  font-family: $form-file-font-family;
-  font-weight: $form-file-font-weight;
-  line-height: $form-file-line-height;
-  color: $form-file-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: $form-file-bg;
-  border-color: inherit;
-  border-style: solid;
-  border-width: $form-file-border-width;
-  @include border-left-radius(inherit);
-}
-
-.form-file-button {
-  display: block;
-  flex-shrink: 0;
-  padding: $form-file-padding-y $form-file-padding-x;
-  margin-left: -$form-file-border-width;
-  line-height: $form-file-line-height;
-  color: $form-file-button-color;
-  @include gradient-bg($form-file-button-bg);
-  border-color: inherit;
-  border-style: solid;
-  border-width: $form-file-border-width;
-  @include border-right-radius(inherit);
-}
-
-.form-file-sm {
-  --#{$variable-prefix}form-file-height: #{$form-file-height-sm};
-  @include font-size($form-file-font-size-sm);
-
-  .form-file-text,
-  .form-file-button {
-    padding: $form-file-padding-y-sm $form-file-padding-x-sm;
-  }
-}
-
-.form-file-lg {
-  --#{$variable-prefix}form-file-height: #{$form-file-height-lg};
-  @include font-size($form-file-font-size-lg);
-
-  .form-file-text,
-  .form-file-button {
-    padding: $form-file-padding-y-lg $form-file-padding-x-lg;
-  }
-}
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 5611f85c5b..938a4185b3 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -10,8 +10,7 @@
   width: 100%;
 
   > .form-control,
-  > .form-select,
-  > .form-file {
+  > .form-select {
     position: relative; // For focus state's z-index
     flex: 1 1 auto;
     width: 1%;
@@ -20,26 +19,10 @@
 
   // Bring the "active" form control to the top of surrounding elements
   > .form-control:focus,
-  > .form-select:focus,
-  > .form-file .form-file-input:focus ~ .form-file-label {
+  > .form-select:focus {
     z-index: 3;
   }
 
-  // Bring the custom file input above the label
-  > .form-file {
-    > .form-file-input:focus {
-      z-index: 4;
-    }
-
-    &:not(:last-child) > .form-file-label {
-      @include border-right-radius(0);
-    }
-
-    &:not(:first-child) > .form-file-label {
-      @include border-left-radius(0);
-    }
-  }
-
   // Ensure buttons are always above inputs for more visually pleasing borders.
   // This isn't needed for `.input-group-text` since it shares the same border-color
   // as our inputs.