Вот несколько способов создания формы загрузки изображений с помощью Bootstrap 4:

Метод 1: использование HTML-элемента input с типом file:

<form>
  <div class="form-group">
    <label for="imageUpload">Select an image:</label>
    <input type="file" class="form-control-file" id="imageUpload">
  </div>
  <button type="submit" class="btn btn-primary">Upload</button>
</form>

Метод 2: использование пользовательского ввода файла Bootstrap:

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="imageUpload">
    <label class="custom-file-label" for="imageUpload">Choose an image</label>
  </div>
  <button type="submit" class="btn btn-primary">Upload</button>
</form>

Метод 3. Улучшение ввода файла с помощью JavaScript и проверки формы Bootstrap:

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="imageUpload" required>
    <label class="custom-file-label" for="imageUpload">Choose an image</label>
    <div class="invalid-feedback">Please choose an image.</div>
  </div>
  <button type="submit" class="btn btn-primary">Upload</button>
</form>
<script>
  // Add Bootstrap's form validation behavior
  (function () {
    'use strict';
    window.addEventListener('load', function () {
      var forms = document.getElementsByClassName('needs-validation');
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>