Question

I have been trying to figure out a reliable solution in provide a drag-drop-upload section on web application utilizing .NET. I’ve experimented with Silverlight 4, but it’s not possible to use this feature in this manner if not using out of browser.

I have read these articles

file upload via drag and drop

file upload using drag drop

but they both reference http://www.plupload.com/ which is cool, but I would like to develop my own solution.

Does anyone have advice on an approach? do you have to use a client side technology to do most of the work, and then send data to the server, or… well, I’m just not sure. I realize most people would just opt for using someone else’s solution, or a toolkit… but hey, what’s the fun in that? : )

Answer 1

The best approach is using Silverlight.. at least that’s what I found. Go to this guys example, and just analyze how he’s utilizing a web service. I took this, replaced all his web service stuff with WCF RIA services, and bam!.. works like a charm. IF you mess around with it for a while, you’ll find there’s a ton of way to throw the FileSteam or Byte() around to save it to disk if you want to… any who, that’s my answer to my own question. Note: to get SL drag drop to work on Mac browsers, there is additional coding needed (drop events need to be handled in the JS, not in SL).

If HTML5 is an option, using the new JS ‘drop’ event works pretty sweet too. One key point when using this is to prevent default on ‘dragover’, ‘dragenter’, & ‘drop’

function ConfigDropElement() {

    document.getElementById('dragarea').addEventListener("dragover", handleDragOver, false);

    document.getElementById('dragarea').addEventListener("dragenter", function (e) { e.preventDefault(); }, false);

    document.getElementById('dragarea').addEventListener("drop", function (event) {

        event.preventDefault();
        event.stopPropagation();

        for (var i = 0; i < event.dataTransfer.files.length; i++) {

            var file = event.dataTransfer.files[i];

            var fi = new FileInfoElement();
            fi.WriteInfo(file.name);

            var reader = new FileReader();
            reader.readAsDataURL(file);

            var fi = new FileInfoElement();
            fi.WriteInfo(file.name);


        }



    }, false);

}