图片文件上传的拖放事件在Aurelia中不起作用

Question

I need help with my image upload function for drag and drop.

I get a nice box saying I can drag and drop images but my console's is saying:

Uncaught ReferenceError: drag is not defined Uncaught ReferenceError: drop is not defined Uncaught ReferenceError: dragNdrop is not defined

When I'm clicking and drag images.

What am I missing?

Here's a sample of my code:

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';
  }

EDIT 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>

my regular button for image upload works to add a new image, but this doesn't seem to do the trick.

Answer 1

• When you use HTML attributes like onChange , ondragover etc without delegate , it will look for a drag function in the global scope. And not in the instance of the aurelia's viewmodel bound to this view. You need to use delegate to let aurelia know that the instance of your class must be used.

• You have two elements with the same id in your HTML. getElementById('imageInputFile') is probably getting the wrong element. Not sure why you have an input with a type file for previewing image, but you can change it to a button.

• You need to add the upload logic to drop as well. I suggest moving the drag and drop to the span since it covers the area where you want to drop. Your input won't trigger any change when drop the file.

• You don't need to add classes and set src attributes manually using the DOM API. For example, you can add a isDragging property to your class. Based on this boolean property, set the draging class to the span . You can add a <img src.bind="imageSrc" /> inside <div id="preview"></div> . And set the imageSrc property inside dragNdrop function.

Class:

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>