Edit Form Popup – Drag And Drop

By default, the edit form does not pop up when you drag and drop documents into a library. This piece of JavaScript will force an edit form to pop up for as many documents you drag and drop. For example, if you drag 5 documents at the same time, 5 individual edit forms will pop up in succession.

1. Make sure that the Metadata Navigation and Filtering site feature is enabled.

2. Navigate to and edit the page you are adding this to.

3. Insert a Script Editor web part and embed the following code (no changes need to be made, just copy/paste):


<script type="text/javascript">
 
(function (_window) {
 
    var maxTimeForReplaceUploadProgressFunc = 10000;
 
    function replaceUploadProgressFunc() {
 
        if (typeof _window.UploadProgressFunc != 'undefined') {
 
            _window.Base_UploadProgressFunc = _window.UploadProgressFunc;
 
            _window.UploadProgressFunc = Custom_UploadProgressFunc;
 
            console.log('replaced dialog');
 
        } else if (maxTimeForReplaceUploadProgressFunc > 0) {
 
            maxTimeForReplaceUploadProgressFunc -= 100;
 
            setTimeout(replaceUploadProgressFunc, 100);
 
        }
 
    }
 
    setTimeout(replaceUploadProgressFunc, 100);
 
 
    function Custom_UploadProgressFunc(percentDone, timeElapsed, state) {
 
        _window.Base_UploadProgressFunc(percentDone, timeElapsed, state);
 
        var messageType = ProgressMessage.EMPTY;
 
        switch (state.status) {
 
            case 1:
 
                messageType = ProgressMessage.VALIDATION;
 
                break;
 
            case 3:
 
                messageType = ProgressMessage.UPLOADING;
 
                break;
 
            case 4:
 
                messageType = ProgressMessage.UPLOADED;
 
                OpenEditFormForLastItem(state);
 
                break;
 
            case 5:
 
                messageType = ProgressMessage.CANCELLED;
 
                break;
 
        }
 
 
 
        function OpenEditFormForLastItem(state) {
 
            var caml = '';
 
            //caml += "<View>";
            caml += "<ViewScope='RecursiveAll'>";
 
            caml += "<Query>";
 
            caml += "<Where>";
 
 
 
            if (state.files.length > 1) {
 
                caml += "<In>";
 
                caml += "<FieldRef Name='FileLeafRef'/>";
 
                caml += "<Values>";
 
            } else {
 
                caml += "<Eq>";
 
                caml += "<FieldRef Name='FileLeafRef'/>";
 
            }
 
 
 
            state.files.forEach(function (file) {
 
                //only succesfull uploaded files that arent overwrites
 
                console.log(file);
 
                if (file.status === 5 /*&& !file.overwrite*/) {
 
                    caml += "<Value Type='File'>" + file.fileName + "</Value>";
 
                }
 
            }, this);
 
 
            if (state.files.length > 1) {
 
                caml += "</Values>";
 
                caml += "</In>";
 
            } else {
 
                caml += "</Eq>";
 
            }
 
 
            caml += "</Where>";
 
            caml += "<OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy>";
 
            caml += "</Query>";
 
            caml += "<ViewFields><FieldRef Name='ID' /></ViewFields>";
 
            caml += "<RowLimit>500</RowLimit>";
 
            caml += "</View>";
 
            console.log(caml);
 
 
 
            var cntxt = SP.ClientContext.get_current();
 
            var web = cntxt.get_web();
 
            var list = web.get_lists().getByTitle(window.ctx.ListTitle);
 
            var query = new SP.CamlQuery();
 
            query.set_viewXml(caml);
 
            var items = list.getItems(query);
 
            cntxt.load(list, 'DefaultEditFormUrl');
 
            cntxt.load(items);
 
            cntxt.executeQueryAsync(function () {
 
                var listEnumerator = items.getEnumerator();
 
                function openEditForItem() {
 
                    if (listEnumerator.moveNext()) {
 
                        var item = listEnumerator.get_current();
 
                        var id = item.get_id();
 
 
 
                        var options = SP.UI.$create_DialogOptions();
 
                        options.title = "Add File Metadata";
 
                        options.url = list.get_defaultEditFormUrl() + '?ID=' + id;
 
                        options.autoSize = true;
 
                        options.dialogReturnValueCallback = openEditForItem;
 
                        SP.UI.ModalDialog.showModalDialog(options);
 
                    } else {
 
                        location.reload();
 
                    }
 
                }
 
                openEditForItem();
 
            }, function (error, args) {
 
                    console.log("failed to get new uploaded items");
 
                    console.log(error);
 
                    console.log(args);
 
                });
 
        }
 
    }
 
})(window);
 
</script>

4. Click OK and save the page.

5. Confirm that the edit form pops up when you drag and drop documents.

 

FIXED (line 73): Thank you for pointing this out Alison N!

23 thoughts on “Edit Form Popup – Drag And Drop

    • Hm. This works in folders for me. Couple of questions: What version of SharePoint are you on? Which page are you adding the js to? The pop up happens at the root level but not when you click into a folder and drag and drop there? Do you have the Managed Metadata site feature enabled?

      I’ll keep trying to replicate and will update you if I find anything!

      • I used the code in sharepoint 2013, first i enabled the managed metadata feature in site level, then I added the js code in master page and when i saw the problem with folders, i tried using the code in snippet webpart , but i got the same result . the code works when i drag and drop files in the root of the libraray but when i create a folder and drag&drop files in the folder, the page is just reloded and nothing happens.

      • I’ll follow the same steps to see if I can replicate.

        I’ve always just added the js to a script editor web part on the page with the library web part. I haven’t tried adding it directly to the master page.

        I’ll update with results soon!

      • Dear friend
        I could find out why the code didn’t work in folders. It was because of view scope in the caml query that was defined in the code. you can simply replace caml += “” line with caml += “” and the code runs in all folders

  1. Can someone please give the correct example of how to make this work in folders? I note Eli above mentions replacing a caml line, but the comment does not contain enough detail to work out what s/he means. And again Eli answers “just set view scope to recursive”, but how do we do this? Can someone step me through it please

  2. Hello,

    I’m in Sharepoint Online and it’s not working for me. Any advice?

    When I drag and drop the status bar comes up but no metadata window.

    Thank you!

  3. Is it a problem if there are several of the same library’s app part, with different views, on the page where this script is placed? I just tried this, following each step exactly, and the edit form did not pop up. This is in SharePoint 2013 on prem.

  4. Please disregard my previous comment – I created a new page with only one library app part and it still did not work. Now I wonder if it’s because we use Nintex Forms, not the default SharePoint forms. Do I need to change ‘DefaultEditFormUrl’ in line 155 to something else?

    cntxt.load(list, ‘DefaultEditFormUrl’);

    Thank you!

  5. Can someone please help. I am using SharePoint 2016. I added the script in Script editor and activated the feature but i drag and drop, nothing happens, the pop up doesn’t come up.

    can you please advise?

  6. I have added the script and activated the feature but when i drag and drop, the pop up doesnt open, the document is uploaded with being checkout to me.

    can you please advise?

  7. Mine did not work at first either, but I debugged it and the line 73 should read:

    caml += “”;

    The change is putting single quotes around Recursive All rather than the double quotes.

    Thanks for this code snippet, very useful!

  8. This is ridiculous… I typed it out and did not copy paste and for some reason the site is not allowing me to enter the change…. hopefully you can fix that.

Leave a Reply to Mel Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s