Как можно сделать такую загрузку файлов?

Question

[wakenbyWork]

Необходимо загружать изображения, вот дизайн:



Необходимо по нажатию на кнопку добавить, выбирать фотографию и выводить ее preview. Т.е нажимая на кнопку открывается выбор файлов, выбираем файл, после чего выводиться его preview.

Как я начал делать:

1) Сверстал preview фотографии и поместил в template:

<template id="template-uploader-item">
  <label class="uploader-item">
    <input class="uploader-item__file" type="file" hidden="" name="file" />
    
    <div class="uploader-item__close">
      <svg class="uploader-item__icon">
        <use href="/assets/sprite/sprite.svg#close"></use>
      </svg>
    </div>
  </label>
</template>

2) Сверстал кнопку загрузки

<label class="uploader-button">
  <input class="uploader-button__file" type="file" name="file-image-buffer" hidden=""/>
  
  <svg class="uploader-button__plus">
    <use href="/assets/sprite/sprite.svg#plus"></use>
  </svg>
  
  <div class="uploader-button__title">Добавить</div>
</label>

Какая задумка:

В кнопку загрузки поместить input(type='file') и обернуть его в label. При клике на кнопку будет выбираться файл, отлавливаем это событие после чего: Берем из template dom элемент превью, выставлять ему background для превью, перемещать файл из кнопки в input который находиться в preview. В конце очищаем кнопку от файла.

Вот пример кода:

$(document).on('input', '.uploader-button__file', function (event) {
  const template = $('#template-uploader-item')
  const clone = template.prop('content').cloneNode(true)

  const input = $(clone).find('.uploader-item__file')
  const uploaderFile = $(clone).find('.uploader-item')

  input.files = $(this).get(0).files
  uploaderFile.css('background-image', `url(${URL.createObjectURL($(this).get(0).files[0])})`)

  console.log(input.files[0]) // Показывает что файл есть в новом input

  $('.uploader__grid').append(clone)

  $(this).val('')
})

Но проблема в том что input files только для чтения работает. И я не понимаю как сделать. Помогите статьей или советом))

Comments

[chelnokov_a]

Что именно у тебя не получается?

Если тебе надо сохранить файл на сервер то читай про ajax (fetch) и посмотри что такое СТРИМ и как с ним работать на сервере. Рекомендую найти либу подходящую для этого

Answer 1

[zkrvndm]

Заведи массив, при выборе нового файла в этот массив сохраняй выбранный файл. Напишу функцию, которая перебирает массив и отрисовывает изображения - эту функцию вызываешь каждый раз после добавления файла. При нажатии на крестик удаляешь из массива файл и вызываешь эту же функцию.

Когда придет время отправлять файлы их легко можно отослать при помощи AJAX и new FormData()

Answer 2

[chelnokov_a]

Какой именно аспект тебя интересует?

Если ты интересуешься как визуально показать изображение при загрузке то что то такое тебе надо:

function changeFileInput(e) {
       const fr = new FileReader()
       fr.onload = () => { this.img = fr.result };
       fr.readAsDataURL(e.target.files[0])
   }