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 unselectable="on">

(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 += "<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.

7 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

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s