Admin Panel: Media Manager - Twitter Bootstrap File browser - added.

site/plugins/admin/assets/scss/objects/form-control.scss

@@ -205,6 +205,25 @@ fieldset[disabled] .form-control {
     }
 }
 
+.custom-file-label,
+.custom-file-label::after {
+    font-weight: 400;
+    padding: 8px 16px;
+    border: 1px solid black;
+    color: $btn-text-color;
+    background-color: $btn-background-color;
+    cursor: pointer;
+    margin-bottom: 5px;
+    font-size: .875rem;
+    line-height: 1.42857143;
+}
+
+.custom-file-label::after {
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+}
+
 //
 // Switches for Bootstrap 4.
 //

site/plugins/admin/gulpfile.js

@@ -65,7 +65,8 @@ gulp.task('js', function(){
                    'node_modules/codemirror/mode/yaml/yaml.js',
                    'node_modules/messenger-hubspot/build/js/messenger.min.js',
                    'node_modules/messenger-hubspot/build/js/messenger-theme-flat.js',
-                   'node_modules/clipboard/dist/clipboard.min.js'
+                   'node_modules/clipboard/dist/clipboard.min.js',
+                   'node_modules/bs-custom-file-input/dist/bs-custom-file-input.min.js'
                 ])
     .pipe(sourcemaps.init())
     .pipe(concat('build.min.js'))

site/plugins/admin/package.json

@@ -19,5 +19,8 @@
     "run-sequence": "^2.2.1",
     "trumbowyg": "^2.13.0",
     "clipboard": "^2.0.4"
+  },
+  "dependencies": {
+    "bs-custom-file-input": "^1.3.1"
   }
 }

site/plugins/admin/views/partials/tail.php

@@ -13,6 +13,7 @@ use Flextype\Component\{Http\Http, Event\Event, Registry\Registry, Assets\Assets
 <script>
 
     new ClipboardJS('.js-clipboard-btn');
+    bsCustomFileInput.init();
 
     Messenger.options = {
         extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',

site/plugins/admin/views/templates/content/entries/media.php

@@ -32,8 +32,15 @@ use function Flextype\Component\I18n\__;
 
 <?= Form::open(null, ['enctype' => 'multipart/form-data', 'class' => 'form-inline form-upload']) ?>
 <?= Form::hidden('token', Token::generate()) ?>
-<?= Form::file('file') ?>
-<?= Form::submit('upload_file', __('admin_entries_files_upload'), ['class' => '']) ?>
+<div class="input-group">
+  <div class="custom-file">
+    <input id="file" name="file" type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
+    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
+  </div>
+  <div class="input-group-append">
+    <?= Form::submit('upload_file', __('admin_entries_files_upload'), ['class' => 'btn btn-outline-secondary']) ?>
+  </div>
+</div>
 <?= Form::close() ?>
 
 <br>