HTML + Javascript form

form.html

<div id="customer_photo" data-maxfilesize="{{ max_file_size }}">
  <img id="customer_photo_img" src="{{ photo }}" class="img-fluid">

  <form id="customer_photo_form">
    <input id="customer_photo_input" type="file" name="photo" accept="{{ mime_allowed }}" required>
  </form>

  <div id="customer_photo_callback"
    data-error_validation_by_type="{{ error_validation_by_type }}"
    data-error_validation_by_size="{{ error_validation_by_size }}">
  </div>
</div>

<script>
  document.getElementById('customer_photo_input').addEventListener('change', changePhoto, false);

  function changePhoto(evt) {
    let file = evt.target.files[0];

    if (file.length !== 0) {
      if (!fileValidationByType(file)) {
        let message = document.getElementById('customer_photo_callback').getAttribute('data-error_validation_by_type');

        document.getElementById('customer_photo_callback').innerHTML = message;
      } else if (!fileValidationBySize(file)) {
        let message = document.getElementById('customer_photo_callback').getAttribute('data-error_validation_by_size');

        document.getElementById('customer_photo_callback').innerHTML = message;
      } else {
        fileUpload(file);
      }
    } else {
      console.log('Selected file is empty!');
    }
  }

  function fileValidationByType(file) {
    var fileTypes = [
      {% for mime in mime_allowed_array %}
        '{{ mime }}',
      {% endfor %}
    ]

    for (var i = 0; i < fileTypes.length; i++) {
      if (file.type === fileTypes[i]) {
        return true;
      }
    }

    return false;
  }

  function fileValidationBySize(file) {
    var maxfilesize = document.getElementById('customer_photo').getAttribute('data-maxfilesize');

    if (file.size <= maxfilesize) {
      return true;
    }

    return false;
  }

  function fileUpload(file) {
    var url  = '{{ url }}',
        data = new FormData();

    data.append('photo', file);

    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
      if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200) {
          try {
            var data = JSON.parse(xhr.responseText);
          } catch (e) {
            // console.log(e.message + " in " + xhr.responseText);
            return;
          }

          fileUploadCallback(file, data);
        }
      }
    };

    xhr.open('POST', url, true);
    xhr.send(data);
  }

  function fileUploadCallback(file, data) {
    if (data.error) {
      // responseText
      document.getElementById('customer_photo_callback').innerHTML = data.error;
    } else if (data.success) {
      // responseText
      document.getElementById('customer_photo_callback').innerHTML = data.success;

      // replacePhoto
      var img = document.createElement('img');
      img.id = 'customer_photo_img';
      img.className = 'img-fluid';
      img.src = window.URL.createObjectURL(file);

      document.getElementById('customer_photo_img').replaceWith(img);
    }
  }
</script>