Drag/drop file upload

[amilo2003]

How would you handle file drag/drop onto a div in Hydro? It is fairly easy to do in JavaScript, see https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop. I managed to do ev.preventDefault in inline code, but I cannot access the dropped file in C# code for processing.

For example:

<div> class="dropzone" hydro-on:drop="@(() => Model.DragDrop(**_<-- need file object here -->_**))" ondragover="return event.preventDefault()" ondrop="return event.preventDefault()" 
</div>

[kjeske]

Hi! It won't be that simple as calling Model.DragDrop because files have to be transferred via binding in order to support streaming. Hydro doesn't have yet built-in support for drag and drop events, but it definitely should, so I would expect some changes soon.

But if you want to experiment now before the changes arrive, I would start with Hydro file binding. You could create a hidden file input that you update from your drop handler. It seems you would need a simple helper written in some global JS file to support this scenario, something like:

function applyFile(sourceDataTransfer, destinationInput) {
  if (sourceDataTransfer.files.length === 1) {
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(sourceDataTransfer.files[0]);
      destinationInput.files = dataTransfer.files;
      destinationInput.dispatchEvent(new Event('change'));
  }
}

And then use it in your view utilising built-in AlpineJs bindings:

<div>
  <input
    asp-for="DocumentFile"
    type="file"
    x-ref="file"
    style="display: none"
    hydro-bind />

  <div
    class="dropzone"
    x-on:drop.prevent="applyFile($event.dataTransfer, $refs.file)"
    x-on:dragover.prevent="0"
    x-on:drop.prevent="0">
  </div>
</div>

Didn't have chance yet to test it, but I think it's a good starting point.

[kjeske]

I will close it since there are no new messages, but feel free to reopen if have more questions. I will also address the drag and drop functionality in the coming releases, to make it to work without defining custom JS function, like in this case applyFile.

[amilo2003]

Great thanks, appreciated