Могу ли я использовать загрузку пользовательского изображения в качестве приведенного ниже кода?

Question

Я пытаюсь написать собственный загрузчик файлов изображений и предварительный просмотр, используя HTML, CSS, javascript. Есть путаница. Я искал примеры кода в Google, и эти примеры кода намного сложнее и содержат много строк кода. Итак, я думаю, что мой подход к этой проблеме не защищен для конечного пользователя? Пожалуйста, проверьте мой внешний код js. Бэкэнд-код почти совпадает с nodejs и express.

Html (используя E JS) код здесь!

      <div class="form-group">
        <label for="image">Image</label>
        <div class="file-container">
          <div class="file-wrapper">
            <input
              type="file"
              class="file-input"
              id="image"
              name="image"
              accept="image/*"
              required
            />
            <div class="file-content">
              <div class="file-infos">
                <p class="file-icon">
                  <i class="fas fa-file-upload fa-7x"></i>
                  <span>Click to browse or drop file here.</span>
                </p>
              </div>
              <p id="js-file-name" class="file-name">No file selected.</p>
            </div>
          </div>
        </div>
      </div>

CSS код здесь!

:root {
  --overlay-color: rgba(0, 0, 0, 0.7);
  --dialog-color: #e9ecef;
  --dialog-border-radius: 5px;
  --icon-color: rgba(73, 80, 87, 0.6);
  --dialog-padding: 20px;
  --drag-over-background: #e3e5e8;
}

.file-container {
  font-family: sans-serif;
  font-size: 13pt;
  color: #4d4d4d;
  text-align: center;
}

.file-wrapper {
  height: auto;
  margin: auto;
  border: 1px solid #cacdd0;
  border-radius: var(--dialog-border-radius);
  padding: var(--dialog-padding);
  position: relative;
}

.file-wrapper:hover {
  border: 4px solid #00abff54;
}

.file-input {
  width: 100%;
  height: 100%;
  background-color: #000;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 0px;
}

.file-content {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  transition: 0.2s;
}

.file-icon > span {
  display: block;
}

.has-drag {
  display: inline;
}

.file-name {
  font-weight: bold;
  font-size: 15pt;
}

JS здесь код!

let image = document.querySelector('#image');
let fileName = document.querySelector('#js-file-name');
let imageCont = document.querySelector('.file-icon');
image.addEventListener('change', () => {
  if (image.files[0]) {
    let url = URL.createObjectURL(image.files[0]);
    fileName.innerHTML = image.files[0].name;
    imageCont.innerHTML = `<img src="${url}" class="preview" />`;
  } else {
    fileName.innerHTML = `No file selected.`;
    imageCont.innerHTML = `<i class="fas fa-file-upload fa-7x"></i>
      <span
        >Click to browse
        <span class="has-drag">or drop file here</span></span
      >`;
  }
});