From 11b2b23bb998eb6e23dce02c25771fb02cd971ac Mon Sep 17 00:00:00 2001
From: min'ryouta <67493493+liwoyadan@users.noreply.github.com>
Date: Fri, 15 Nov 2024 08:07:04 -0800
Subject: [PATCH] fix: make file inputs more mobile-friendly (#1126)

- Uses bs-custom-file-input and existing Bootstrap v4 classes to make file inputs that actually show on mobile devices
---
 public/js/bs-custom-file-input.min.js            |  7 +++++++
 resources/views/account/settings.blade.php       |  8 +++-----
 .../create_edit_character_category.blade.php     |  5 ++++-
 .../currencies/create_edit_currency.blade.php    | 10 ++++++++--
 .../admin/features/create_edit_feature.blade.php |  5 ++++-
 .../create_edit_feature_category.blade.php       |  5 ++++-
 resources/views/admin/files/images.blade.php     | 16 +++++++++++-----
 resources/views/admin/files/index.blade.php      | 11 ++++++++---
 .../views/admin/items/create_edit_item.blade.php |  5 ++++-
 .../items/create_edit_item_category.blade.php    |  5 ++++-
 .../admin/masterlist/create_character.blade.php  | 10 ++++++++--
 .../admin/prompts/create_edit_prompt.blade.php   |  5 ++++-
 .../create_edit_prompt_category.blade.php        |  5 ++++-
 .../admin/rarities/create_edit_rarity.blade.php  |  5 ++++-
 .../views/admin/shops/create_edit_shop.blade.php |  5 ++++-
 .../specieses/create_edit_species.blade.php      |  5 ++++-
 .../specieses/create_edit_subtype.blade.php      |  5 ++++-
 .../admin/_reupload_image_modal.blade.php        | 12 +++++++++---
 .../views/character/admin/upload_image.blade.php | 10 ++++++++--
 resources/views/character/design/image.blade.php | 10 ++++++++--
 .../galleries/create_edit_submission.blade.php   |  5 ++++-
 resources/views/layouts/app.blade.php            |  2 ++
 22 files changed, 120 insertions(+), 36 deletions(-)
 create mode 100644 public/js/bs-custom-file-input.min.js

diff --git a/public/js/bs-custom-file-input.min.js b/public/js/bs-custom-file-input.min.js
new file mode 100644
index 0000000000..0815f3768d
--- /dev/null
+++ b/public/js/bs-custom-file-input.min.js
@@ -0,0 +1,7 @@
+/*!
+ * bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
+ * Copyright 2018 - 2020 Johann-S <johann.servoire@gmail.com>
+ * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var l=t[n];if(3!==l.nodeType)return l}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(s.CUSTOMFILELABEL);n&&(l(n).textContent=t)},n=!!window.File,r=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function d(){var e=this.parentNode.querySelector(s.CUSTOMFILELABEL);if(e){var t=l(e),n=r(this);n.length?t.textContent=n:u(this)}}function v(){for(var e=[].slice.call(this.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var p="bsCustomFileInput",m="reset",h="change";return{init:function(e,t){void 0===e&&(e=s.CUSTOMFILE),void 0===t&&(t=s.FORM);for(var n,l,r=[].slice.call(document.querySelectorAll(e)),i=[].slice.call(document.querySelectorAll(t)),o=0,u=r.length;o<u;o++){var c=r[o];Object.defineProperty(c,p,{value:{defaultText:(n=void 0,n="",(l=c.parentNode.querySelector(s.CUSTOMFILELABEL))&&(n=l.textContent),n)},writable:!0}),d.call(c),c.addEventListener(h,d)}for(var f=0,a=i.length;f<a;f++)i[f].addEventListener(m,v),Object.defineProperty(i[f],p,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(s.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,l=t.length;n<l;n++){var r=t[n];u(r),r[p]=void 0,r.removeEventListener(h,d)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(m,v),e[i][p]=void 0}}});
+//# sourceMappingURL=bs-custom-file-input.min.js.map
diff --git a/resources/views/account/settings.blade.php b/resources/views/account/settings.blade.php
index f4b845ff37..67a05418b8 100644
--- a/resources/views/account/settings.blade.php
+++ b/resources/views/account/settings.blade.php
@@ -17,11 +17,9 @@
             </div>
         @endif
         {!! Form::open(['url' => 'account/avatar', 'files' => true]) !!}
-        <div class="form-group row">
-            {!! Form::label('avatar', 'Update Profile Image', ['class' => 'col-md-2 col-form-label']) !!}
-            <div class="col-md-10">
-                {!! Form::file('avatar', ['class' => 'form-control']) !!}
-            </div>
+        <div class="custom-file mb-1">
+            {!! Form::label('avatar', 'Update Profile Image', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('avatar', ['class' => 'custom-file-input']) !!}
         </div>
         <div class="text-right">
             {!! Form::submit('Edit', ['class' => 'btn btn-primary']) !!}
diff --git a/resources/views/admin/characters/create_edit_character_category.blade.php b/resources/views/admin/characters/create_edit_character_category.blade.php
index 184c6eba9f..10f2958ccb 100644
--- a/resources/views/admin/characters/create_edit_character_category.blade.php
+++ b/resources/views/admin/characters/create_edit_character_category.blade.php
@@ -38,7 +38,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($category->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/currencies/create_edit_currency.blade.php b/resources/views/admin/currencies/create_edit_currency.blade.php
index 26b88dec23..740b1ed872 100644
--- a/resources/views/admin/currencies/create_edit_currency.blade.php
+++ b/resources/views/admin/currencies/create_edit_currency.blade.php
@@ -35,7 +35,10 @@
         <div class="col-md-6">
             <div class="form-group">
                 {!! Form::label('Icon Image (Optional)') !!} {!! add_help('This will be used to denote the currency. If not provided, the abbreviation will be used.') !!}
-                {!! Form::file('icon') !!}
+                <div class="custom-file">
+                    {!! Form::label('icon', 'Choose icon file...', ['class' => 'custom-file-label']) !!}
+                    {!! Form::file('icon', ['class' => 'custom-file-input']) !!}
+                </div>
                 <div class="text-muted">Recommended height: 16px</div>
                 @if ($currency->has_icon)
                     <div class="form-check">
@@ -48,7 +51,10 @@
         <div class="col-md-6">
             <div class="form-group">
                 {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-                {!! Form::file('image') !!}
+                <div class="custom-file">
+                    {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+                    {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+                </div>
                 <div class="text-muted">Recommended size: 200px x 200px</div>
                 @if ($currency->has_image)
                     <div class="form-check">
diff --git a/resources/views/admin/features/create_edit_feature.blade.php b/resources/views/admin/features/create_edit_feature.blade.php
index 5164eb8f96..847a803df3 100644
--- a/resources/views/admin/features/create_edit_feature.blade.php
+++ b/resources/views/admin/features/create_edit_feature.blade.php
@@ -34,7 +34,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($feature->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/features/create_edit_feature_category.blade.php b/resources/views/admin/features/create_edit_feature_category.blade.php
index aa84a6fe23..8ffeb20b2b 100644
--- a/resources/views/admin/features/create_edit_feature_category.blade.php
+++ b/resources/views/admin/features/create_edit_feature_category.blade.php
@@ -28,7 +28,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($category->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/files/images.blade.php b/resources/views/admin/files/images.blade.php
index d31734fc21..0f37a11b38 100644
--- a/resources/views/admin/files/images.blade.php
+++ b/resources/views/admin/files/images.blade.php
@@ -14,15 +14,18 @@
     @foreach ($images as $key => $image)
         <div class="card mb-3">
             <div class="card-body">
-                <div class="d-flex">
+                <div class="d-flex flex-column flex-sm-row">
                     <div class="mr-2" style="width: 200px;"><img src="{{ asset('images/' . $image['filename']) }}" class="mw-100" alt="Site image: {{ $image['name'] }}" /></div>
                     <div style="width: 100%;">
                         <h3 class="card-heading">{{ $image['name'] }} <a href="{{ asset('images/' . $image['filename']) }}" class="btn btn-info btn-sm float-right">View Current</a></h3>
                         <p>{{ $image['description'] }}</p>
                         {!! Form::open(['url' => 'admin/images/upload', 'files' => true]) !!}
                         <div class="d-flex">
-                            {!! Form::file('file', ['class' => 'form-control mr-2']) !!}
-                            {!! Form::submit('Upload', ['class' => 'btn btn-primary']) !!}
+                            <div class="custom-file">
+                                {!! Form::label('file', 'Choose file...', ['class' => 'custom-file-label']) !!}
+                                {!! Form::file('file', ['class' => 'custom-file-input']) !!}
+                            </div>
+                            {!! Form::submit('Upload', ['class' => 'ml-1 btn btn-primary']) !!}
                         </div>
                         {!! Form::hidden('key', $key) !!}
                         {!! Form::close() !!}
@@ -42,8 +45,11 @@
                 <h3 class="card-heading">CSS <a href="{{ asset('css/custom.css') }}" class="btn btn-info btn-sm float-right">View Current</a></h3>
                 {!! Form::open(['url' => 'admin/images/upload/css', 'files' => true]) !!}
                 <div class="d-flex">
-                    {!! Form::file('file', ['class' => 'form-control mr-2']) !!}
-                    {!! Form::submit('Upload', ['class' => 'btn btn-primary']) !!}
+                    <div class="custom-file">
+                        {!! Form::label('file', 'Choose CSS...', ['class' => 'custom-file-label']) !!}
+                        {!! Form::file('file', ['class' => 'custom-file-input']) !!}
+                    </div>
+                    {!! Form::submit('Upload', ['class' => 'ml-1 btn btn-primary']) !!}
                 </div>
                 {!! Form::close() !!}
             </div>
diff --git a/resources/views/admin/files/index.blade.php b/resources/views/admin/files/index.blade.php
index 0c83b15966..1d8e277f18 100644
--- a/resources/views/admin/files/index.blade.php
+++ b/resources/views/admin/files/index.blade.php
@@ -178,7 +178,10 @@
                     <p>Select a file to upload. (Maximum size {{ min(ini_get('upload_max_filesize'), ini_get('post_max_size')) }}B.)</p>
                     <div id="fileList">
                         <div class="d-flex mb-2">
-                            {!! Form::file('files[]', ['class' => 'form-control']) !!}
+                            <div class="custom-file">
+                                {!! Form::label('files[]', 'No file selected.', ['class' => 'custom-file-label']) !!}
+                                {!! Form::file('files[]', ['class' => 'custom-file-input']) !!}
+                            </div>
                         </div>
                     </div>
                     <div class="text-right">
@@ -189,8 +192,9 @@
                         Add File
                     </div>
                     {!! Form::close() !!}
-                    <div class="file-row hide mb-2">
-                        {!! Form::file('files[]', ['class' => 'form-control']) !!}
+                    <div class="file-row custom-file hide mb-2">
+                        {!! Form::label('files[]', 'No file selected.', ['class' => 'custom-file-label']) !!}
+                        {!! Form::file('files[]', ['class' => 'custom-file-input']) !!}
                     </div>
                 </div>
             </div>
@@ -213,6 +217,7 @@ function addFileRow() {
                 $('#fileList').append($clone);
                 $clone.removeClass('hide file-row');
                 $clone.addClass('d-flex');
+                bsCustomFileInput.init();
             }
 
             /////////
diff --git a/resources/views/admin/items/create_edit_item.blade.php b/resources/views/admin/items/create_edit_item.blade.php
index 40ce3b8c6a..fe0b6fd531 100644
--- a/resources/views/admin/items/create_edit_item.blade.php
+++ b/resources/views/admin/items/create_edit_item.blade.php
@@ -24,7 +24,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 100px x 100px</div>
         @if ($item->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/items/create_edit_item_category.blade.php b/resources/views/admin/items/create_edit_item_category.blade.php
index 6e85d589d6..b3ca92923b 100644
--- a/resources/views/admin/items/create_edit_item_category.blade.php
+++ b/resources/views/admin/items/create_edit_item_category.blade.php
@@ -28,7 +28,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($category->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/masterlist/create_character.blade.php b/resources/views/admin/masterlist/create_character.blade.php
index f9777f66c8..956b01d60a 100644
--- a/resources/views/admin/masterlist/create_character.blade.php
+++ b/resources/views/admin/masterlist/create_character.blade.php
@@ -134,7 +134,10 @@
             @else
                 {!! add_help('This is the full masterlist image. Note that the image is not protected in any way, so take precautions to avoid art/design theft.') !!}
             @endif
-            <div>{!! Form::file('image', ['id' => 'mainImage']) !!}</div>
+            <div class="custom-file">
+                {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+                {!! Form::file('image', ['class' => 'custom-file-input', 'id' => 'mainImage']) !!}
+            </div>
         </div>
         @if (config('lorekeeper.settings.masterlist_image_automation') === 1)
             <div class="form-group">
@@ -169,7 +172,10 @@
         <div class="card mb-3" id="thumbnailUpload">
             <div class="card-body">
                 {!! Form::label('Thumbnail Image') !!} {!! add_help('This image is shown on the masterlist page.') !!}
-                <div>{!! Form::file('thumbnail') !!}</div>
+                <div class="custom-file">
+                    {!! Form::label('thumbnail', 'Choose thumbnail...', ['class' => 'custom-file-label']) !!}
+                    {!! Form::file('thumbnail', ['class' => 'custom-file-input']) !!}
+                </div>
                 <div class="text-muted">Recommended size: {{ config('lorekeeper.settings.masterlist_thumbnails.width') }}px x {{ config('lorekeeper.settings.masterlist_thumbnails.height') }}px</div>
             </div>
         </div>
diff --git a/resources/views/admin/prompts/create_edit_prompt.blade.php b/resources/views/admin/prompts/create_edit_prompt.blade.php
index c02c43672f..92edce4be2 100644
--- a/resources/views/admin/prompts/create_edit_prompt.blade.php
+++ b/resources/views/admin/prompts/create_edit_prompt.blade.php
@@ -34,7 +34,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 100px x 100px</div>
         @if ($prompt->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/prompts/create_edit_prompt_category.blade.php b/resources/views/admin/prompts/create_edit_prompt_category.blade.php
index f13c417bfb..6db2e538de 100644
--- a/resources/views/admin/prompts/create_edit_prompt_category.blade.php
+++ b/resources/views/admin/prompts/create_edit_prompt_category.blade.php
@@ -28,7 +28,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($category->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/rarities/create_edit_rarity.blade.php b/resources/views/admin/rarities/create_edit_rarity.blade.php
index c7bde4b474..f312cd9a3d 100644
--- a/resources/views/admin/rarities/create_edit_rarity.blade.php
+++ b/resources/views/admin/rarities/create_edit_rarity.blade.php
@@ -34,7 +34,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($rarity->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/shops/create_edit_shop.blade.php b/resources/views/admin/shops/create_edit_shop.blade.php
index 5bcd734eaa..28cac4e3ed 100644
--- a/resources/views/admin/shops/create_edit_shop.blade.php
+++ b/resources/views/admin/shops/create_edit_shop.blade.php
@@ -25,7 +25,10 @@
 
     <div class="form-group">
         {!! Form::label('Shop Image (Optional)') !!} {!! add_help('This image is used on the shop index and on the shop page as a header.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: None (Choose a standard size for all shop images)</div>
         @if ($shop->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/specieses/create_edit_species.blade.php b/resources/views/admin/specieses/create_edit_species.blade.php
index a6af130942..de027040ba 100644
--- a/resources/views/admin/specieses/create_edit_species.blade.php
+++ b/resources/views/admin/specieses/create_edit_species.blade.php
@@ -29,7 +29,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($species->has_image)
             <div class="form-check">
diff --git a/resources/views/admin/specieses/create_edit_subtype.blade.php b/resources/views/admin/specieses/create_edit_subtype.blade.php
index fabbe3308d..543a710629 100644
--- a/resources/views/admin/specieses/create_edit_subtype.blade.php
+++ b/resources/views/admin/specieses/create_edit_subtype.blade.php
@@ -29,7 +29,10 @@
 
     <div class="form-group">
         {!! Form::label('World Page Image (Optional)') !!} {!! add_help('This image is used only on the world information pages.') !!}
-        <div>{!! Form::file('image') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: 200px x 200px</div>
         @if ($subtype->has_image)
             <div class="form-check">
diff --git a/resources/views/character/admin/_reupload_image_modal.blade.php b/resources/views/character/admin/_reupload_image_modal.blade.php
index 71d0508538..0d4f49aa91 100644
--- a/resources/views/character/admin/_reupload_image_modal.blade.php
+++ b/resources/views/character/admin/_reupload_image_modal.blade.php
@@ -1,7 +1,10 @@
 {!! Form::open(['url' => 'admin/character/image/' . $image->id . '/reupload', 'files' => true]) !!}
 <div class="form-group">
     {!! Form::label('Character Image') !!} {!! add_help('This is the full masterlist image. Note that the image is not protected in any way, so take precautions to avoid art/design theft.') !!}
-    <div>{!! Form::file('image', ['id' => 'mainImage']) !!}</div>
+    <div class="custom-file">
+        {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+        {!! Form::file('image', ['class' => 'custom-file-input', 'id' => 'mainImage']) !!}
+    </div>
 </div>
 @if (config('lorekeeper.settings.masterlist_image_automation') === 1)
     <div class="form-group">
@@ -36,7 +39,10 @@
 <div class="card mb-3" id="thumbnailUpload">
     <div class="card-body">
         {!! Form::label('Thumbnail Image') !!} {!! add_help('This image is shown on the masterlist page.') !!}
-        <div>{!! Form::file('thumbnail') !!}</div>
+        <div class="custom-file">
+            {!! Form::label('thumbnail', 'Choose thumbnail...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('thumbnail', ['class' => 'custom-file-input']) !!}
+        </div>
         <div class="text-muted">Recommended size: {{ config('lorekeeper.settings.masterlist_thumbnails.width') }}px x {{ config('lorekeeper.settings.masterlist_thumbnails.height') }}px</div>
     </div>
 </div>
@@ -49,7 +55,7 @@
 <script>
     $(document).ready(function() {
         //$('#useCropper').bootstrapToggle();
-
+        bsCustomFileInput.init();
         // Cropper ////////////////////////////////////////////////////////////////////////////////////
 
         var $useCropper = $('#useCropper');
diff --git a/resources/views/character/admin/upload_image.blade.php b/resources/views/character/admin/upload_image.blade.php
index 74048d96bb..92bc66c0b0 100644
--- a/resources/views/character/admin/upload_image.blade.php
+++ b/resources/views/character/admin/upload_image.blade.php
@@ -24,7 +24,10 @@
 
     <div class="form-group">
         {!! Form::label('Character Image') !!} {!! add_help('This is the full masterlist image. Note that the image is not protected in any way, so take precautions to avoid art/design theft.') !!}
-        <div>{!! Form::file('image', ['id' => 'mainImage']) !!}</div>
+        <div class="custom-file">
+            {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+            {!! Form::file('image', ['class' => 'custom-file-input', 'id' => 'mainImage']) !!}
+        </div>
     </div>
     @if (config('lorekeeper.settings.masterlist_image_automation') === 1)
         <div class="form-group">
@@ -59,7 +62,10 @@
     <div class="card mb-3" id="thumbnailUpload">
         <div class="card-body">
             {!! Form::label('Thumbnail Image') !!} {!! add_help('This image is shown on the masterlist page.') !!}
-            <div>{!! Form::file('thumbnail') !!}</div>
+            <div class="custom-file">
+                {!! Form::label('thumbnail', 'Choose thumbnail...', ['class' => 'custom-file-label']) !!}
+                {!! Form::file('thumbnail', ['class' => 'custom-file-input']) !!}
+            </div>
             <div class="text-muted">Recommended size: {{ config('lorekeeper.settings.masterlist_thumbnails.width') }}px x {{ config('lorekeeper.settings.masterlist_thumbnails.height') }}px</div>
         </div>
     </div>
diff --git a/resources/views/character/design/image.blade.php b/resources/views/character/design/image.blade.php
index 112b2861e7..9ad5ccfd7d 100644
--- a/resources/views/character/design/image.blade.php
+++ b/resources/views/character/design/image.blade.php
@@ -71,7 +71,10 @@
         @if ($request->status == 'Draft' && $request->user_id == Auth::user()->id)
             <div class="form-group">
                 {!! Form::label('Image') !!} {!! add_help('This is the image that will be used on the masterlist. Note that the image is not protected in any way, so take precautions to avoid art/design theft.') !!}
-                <div>{!! Form::file('image', ['id' => 'mainImage']) !!}</div>
+                <div class="custom-file">
+                    {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+                    {!! Form::file('image', ['class' => 'custom-file-input', 'id' => 'mainImage']) !!}
+                </div>
             </div>
         @else
             <div class="form-group">
@@ -117,7 +120,10 @@
             <div class="card mb-3" id="thumbnailUpload">
                 <div class="card-body">
                     {!! Form::label('Thumbnail Image') !!} {!! add_help('This image is shown on the masterlist page.') !!}
-                    <div>{!! Form::file('thumbnail') !!}</div>
+                    <div class="custom-file">
+                        {!! Form::label('thumbnail', 'Choose thumbnail...', ['class' => 'custom-file-label']) !!}
+                        {!! Form::file('thumbnail', ['class' => 'custom-file-input']) !!}
+                    </div>
                     <div class="text-muted">Recommended size: {{ config('lorekeeper.settings.masterlist_thumbnails.width') }}px x {{ config('lorekeeper.settings.masterlist_thumbnails.height') }}px</div>
                 </div>
             </div>
diff --git a/resources/views/galleries/create_edit_submission.blade.php b/resources/views/galleries/create_edit_submission.blade.php
index dbf676d1b2..487dc79858 100644
--- a/resources/views/galleries/create_edit_submission.blade.php
+++ b/resources/views/galleries/create_edit_submission.blade.php
@@ -52,7 +52,10 @@
                 </div>
             </div>
             <div class="card p-2">
-                {!! Form::file('image', ['class' => 'form-control-file', 'id' => 'mainImage']) !!}
+                <div class="custom-file">
+                    {!! Form::label('image', 'Choose file...', ['class' => 'custom-file-label']) !!}
+                    {!! Form::file('image', ['class' => 'custom-file-input', 'id' => 'mainImage']) !!}
+                </div>
                 <small>Images may be PNG, GIF, JPG, or WebP and up to 3MB in size.</small>
             </div>
         </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 808a88a8f9..9b44b34eb1 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -49,6 +49,7 @@
     <script src="{{ asset('js/jquery.tinymce.min.js') }}"></script>
     <script src="{{ asset('js/lightbox.min.js') }}"></script>
     <script src="{{ asset('js/bootstrap-colorpicker.min.js') }}"></script>
+    <script src="{{ asset('js/bs-custom-file-input.min.js') }}"></script>
     <script src="{{ asset('js/selectize.min.js') }}"></script>
     <script src="{{ asset('js/jquery-ui-timepicker-addon.js') }}"></script>
     <script src="{{ asset('js/croppie.min.js') }}"></script>
@@ -168,6 +169,7 @@
                     spoiler_caption: 'Toggle Spoiler',
                     target_list: false
                 });
+                bsCustomFileInput.init();
                 var $mobileMenuButton = $('#mobileMenuButton');
                 var $sidebar = $('#sidebar');
                 $('#mobileMenuButton').on('click', function(e) {