Drag and Drop image from browser to WPF Application

Question

I'm trying to implement functionality in my WPF application to drag an image out of a browser and into a window in my WPF app.

The code works fine with Firefox and Windows Explorer, but issues arise with Chrome and IE (haven't tried any other browsers just yet).

Here's a code snippet:

private void Drag_Enter(object sender, DragEventArgs e)
{
    foreach (string format in e.Data.GetFormats())
        Console.WriteLine(format);
    Console.WriteLine("Effects:" + e.AllowedEffects);
}

private void Drag_Drop(object sender, DragEventArgs e)
{
    string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
    ImageSourceConverter converter = new ImageSourceConverter();
    foreach (string file in files)
    {
        if (converter.IsValid(file))
        {
            // Do something with the image
        }
    }
 }

Looking at the output, it seems that Firefox actually saves the image to the clipboard, whereas Chrome is just grabbing the html of the image, while IE doesn't do anything with it.

Anyone have some insight as to how I may get cross-browser functionality?

---

Update: A couple of workarounds I've found are to parse the html (Chrome/Firefox) for an image source, then download from the source using something like the WebClient object. Would prefer a method, though, that has stronger checking for file type.

IE9 and Firefox both have a DeviceIndependentBitmap file format that is available when dragging an non-hyperlink image. This seems to be a safer alternative, though Chrome does not seem to support it. It is also not so useful with hyperlink images.

---

With Firefox, the output is (Drag_Enter for some reason gets fired twice):

text/x-moz-url
FileGroupDescriptor
FileGroupDescriptorW
FileContents
UniformResourceLocator
UniformResourceLocatorW
text/x-moz-url-data
text/x-moz-url-desc
text/uri-list
text/_moz_htmlcontext
text/_moz_htmlinfo
text/html
HTML Format
Text
UnicodeText
System.String
application/x-moz-nativeimage
DeviceIndependentBitmap
FileDrop
FileNameW
FileName
Preferred DropEffect
application/x-moz-file-promise-url
application/x-moz-file-promise-dest-filename
DragImageBits
DragContext
Effects: Link, All

Chrome (drag_enter also gets fired twice):

DragContext
DragImageBits
FileGroupDescriptorW
FileContents
HTML Format
text/html
text/x-moz-url
UniformResourceLocatorW
UniformResourceLocator
Text
UnicodeText
System.String
Effects: Copy, Move, Link

Internet Explorer (again, drag_enter fired twice):

UntrustedDragDrop
msSourceUrl
FileGroupDescriptor
FileGroupDescriptorW
FileContents
UniformResourceLocator
Effects: Link

Answer 1

You can use the FileGroupDescriptorW and FileContent formats to get your data.

• FileGroupDescriptorW is an array of FileDescriptors' that describe your data (e.g.: name, size, modified-time, ...)
• FileContent contains your file contents.

If you don't care about the filename and just need the binary content you could use

var filestream = (MemoryStream[])dataObject.GetData("FileContents");

If you want a more in-dept-tutorial on how to use the FileGroupDescriptor(W) I can recommend this tutorial on codeproject.com. It talks about drag&drop from MS Outlook, but it uses the same IDataObject formats.