Перетаскивание событий для загрузки файла изображения не работает в Aurelia

Question

Мне нужна помощь с функцией загрузки изображений для перетаскивания.

Я получаю красивое окно, в котором я могу перетаскивать изображения, но моя консоль говорит:

UncaughtReferenceError: перетаскивание не определено Uncaught ReferenceError: перетаскивание не определено Uncaught ReferenceError: перетаскивание не определено

Когда я нажимаю и перетаскиваю изображения.

Что мне не хватает?

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

html

<div class="form-group">
    <label for="imageInputFile">Ladda upp bild</label>
    <input ref="fileInput" type="file" id="imageInputFile" 
                click.delegate="previewImage()">
</div>
<strong>OR</strong>

<span class="dragBox">
    Drag and Drop image here
    <input type="file" onChange="dragNdrop(event)" ondragover="drag()" ondrop="drop()" id="imageInputFile" />
</span>

<div id="preview"></div>

js

  dragNdrop(event) {
    let fileName = URL.createObjectURL(event.target.files[0]);
    let preview = document.getElementById("preview");
    let previewImg = document.createElement("img");
    previewImg.setAttribute("src", fileName);
    preview.innerHTML = "";
    preview.appendChild(previewImg);
  }
  drag() {
    document.getElementById('imageInputFile').parentNode.className = 'draging dragBox';
  }
  drop() {
    document.getElementById('imageInputFile').parentNode.className = 'dragBox';
  }

РЕДАКТИРОВАТЬ HTML

<span class="dragBox">
    Click here or drag images here
    <input ref="fileInput" type="file" change.trigger="dragNdrop($event)" 
                dragover.delegate="drag()" drop.delegate="drop()" 
                id="imageInputFile" />
</span>

<div id="preview"></div>

Моя обычная кнопка для загрузки изображений работает для добавления нового изображения, но, похоже, это не сработает.

Answer 1

• Когда вы используете атрибуты HTML, такие как onChange, ondragover и т. Д. Без delegate, он будет искать функцию drag в глобальной области видимости.И не в случае модели представления Аурелии, связанной с этой точкой зрения.Вам нужно использовать delegate, чтобы сообщить aurelia, что должен использоваться экземпляр вашего класса.

• В вашем HTML есть два элемента с одинаковым id.getElementById('imageInputFile'), вероятно, получает неправильный элемент.Не уверен, почему у вас есть input с типом file для предварительного просмотра изображения, но вы можете изменить его на кнопку.

• Вам необходимо также добавить логику загрузки в drop.Я предлагаю переместить перетаскивание на span, поскольку оно охватывает область, где вы хотите отбросить.Ваш ввод не будет вызывать change, когда drop файл.

• Вам не нужно добавлять классы и устанавливать атрибуты src вручную, используя DOM API.Например, вы можете добавить свойство isDragging в ваш класс.На основе этого логического свойства установите класс draging на span.Вы можете добавить <img src.bind="imageSrc" /> внутри <div id="preview"></div>.И установите свойство imageSrc внутри функции dragNdrop.

Класс:

dragNdrop(event) {
   const self = this;
   let fileName = URL.createObjectURL(event.target.files[0]);
   self.imageSrc = fileName; // that's it
}

drag() {
  const self = this;
  self.isDragging = true;
}

drop(event) {
  const self = this;
  self.isDragging = false;
  self.dragNdrop(event);
}

HTML:

<button type="button" click.delegate="previewImage()">Preview</button>
<span class="dragBox ${isDragging ? 'draging' : ''}" 
      dragover.delegate="drag()" 
      drop.delegate="drop($event)">

    Click here or drag images here
    <input id="imageInputFile" type="file" change.trigger="dragNdrop($event)" />
</span>

<div id="preview">
   <img show.bind="imageSrc" src.bind="imageSrc" />
</div>