If I drag an image from any browser onto the Desktop, Windows Explorer (not IE) is able to save the file.
To do this within a C# application, you would get the System.Windows.Forms.IDataObject
and a little bit of reflection to retrieve the underlying data stream.
More info on this here (Drag-drop data like windows explorer)
However, The Dragevent from JS does not seem to include simular information about the underlying data stream.
It is still possible to retrieve the dropped uri from the JS dragevent, and upload the image. More info on this drag-drop from other browser and uploading drag-drop images
This however requires fiddeling with the cross-origin
and does not work with things like CloudFlare
which protect the domain from not secure access.
html
<div id="dropbox">DropZone => you could drop any image from any page here</div>
JS
var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var image = // Get data stream;
}
As I am using Blazor, Any JS or Blazor supported C# solution is appreciated.
I do not mind going a more dirty approach, like using Reflection
to retrieve the underlying data structure.
Any ideas on how to retrieve the underlying data stream?
Thanks in advance!