5

I am trying to write a JSLink file that hooks to the event "ondrop" (or whatever it is called) from a document library. The reason behind this is, we want a jquery dialog to open when someone drags a document into the document library where you have to enter some meta information.

Is this possible? If yes is there any documentation available on this? I found that especially javascript and JSLink stuff is very poorly documented on MSDN. Also all tutorials about JSLink I could find only explain how to use it to change the rendering of a field...

3

Alright, so after hours and days of digging thorugh thousends of lines of sharpeoint javascript code I finally managed to hook into the document drop event.

Setting JSLink

First you have to assign a Javascript file as JSLink to the document library view.

Javascript code

In that javascript file I then used the following code

// Load base script file
if (!document.Share2013BaseScriptFileIncluded) {
    document.write("<script src='/_layouts/15/Eis.Share2013.Base/Scripts/Eis.Share2013.Base.js'" + "></script>");
    document.Share2013BaseScriptFileIncluded = true;
}

// Register namespace
Type.registerNamespace("Eis.Share2013.CatchDrop");

setTimeout(function () {

    Eis.Share2013.EnsureJQueryLoaded(function () {

        window.eisCatchDropInterval = setInterval(function () {
            if ($("#ms-dnd-dropbox").length > 0) {

                $("#ms-dnd-dropbox")[0].removeEventListener("drop", DropBoxDrop, false);
                $("#ms-dnd-dropbox")[0].removeEventListener("drop", Eis.Share2013.CatchDrop.Catch, false);
                $("#ms-dnd-dropbox")[0].addEventListener("drop", Eis.Share2013.CatchDrop.Catch, false);

            }
        }, 10);
    });
}, 100);

Eis.Share2013.CatchDrop.Catch = function (event) {
    console.log("Drop event catched by EIS");
    cancelDefault(event);
    HideDropBox();
    if (!UserHasPermission()) {
        return false;
    }
    var dt = event.dataTransfer;
    var droppedFiles = dt.files;

    if (!fIsNullOrUndefined(droppedFiles) && droppedFiles.length > 0) {
        g_currentControl.status = ControlStatus.DROPPED;
        PrepareFileList(droppedFiles);
        var files = g_currentControl.files;

        if (!fIsNullOrUndefined(files)) {
            StartTask(files);
        }
    }
    else {
        ShowErrorDialogCore(Strings.STS.L_DragDropNotWorkingErrorTitle, Strings.STS.L_DragDropInvalidFile, null);
    }
    return false;
}

The base file I included here loads jquery and the function Eis.Share2013.EnsureJQueryLoaded makes sure that for the code inside the callback function jQuery is loaded.

I had to create an interval function, that removes the default events on the dropbox and attach my event. This is because the droppox gets created and setup everytime you drag a new item into the page. This was the only way I could find to make sure that my event is registered all the time.

My custom event is simply the copied code from the original sharepoint event (except for the console.log). You can now add your custom logic into the Eis.Share2013.EnsureJQueryLoaded function.

  • Hi RononDex, Thanks for your amazing workaround. It works absolutely perfect. I am facing an issue when I have more than 1 listview web parts in a page then above script is only applies on first web part. Do you know how to tackle this? – Dhaval Kariya Oct 25 '18 at 13:59
0

Long time reader first time poster. For an entirely client side solution I have found this to be effective with Document Libraries in SharePoint 2013.

The sleep serves to make sure the ms-dnd-dropbox exists before adding the event listener to it. On older, slow clients removing this has been known to cause an error, 50ms has been working as a reasonable time long enough for the computer but to fast for a human to release (at least it hasn't happened yet).

None to quick with the JS - if someone has a better way to deal with this.

$(document).ready(function() {
    //Need to wait for page to load (else can error)
    $("#WebPartWPQ2")[0].addEventListener("dragleave",function() {
        //sleep real quick
        setTimeout(function() {
            //Zzzzz
        },50);  

        //Need to wait for the event to occur before the div exists (else errors)
        $("#ms-dnd-dropbox")[0].addEventListener("drop",function() {
            console.log("Hey boss!");
        });
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.