Opening SP Document library upload Form on a button click using JS/JQ

Question

I am working with SharePoint 2019 on prem. On one of the pages, I have content search web part added which shows documents results from a library as a search solution. On the same page, I am looking to add a button/link on the click of which, I would like to open up Document library upload form like below.

So basically just want to make sure that user can upload the files from the same page using this, not sure if its doable from JS perspective.

Can someone help please.

Thanks in advance.

Answer 1

What you are seeing is an iframe, so go check the url that is being displayed. Most probably it is something along the lines of https://my.sharepoint.com/path/to/site/_layouts/15/Upload.aspx?List=%7B[id-of.list]%7D&RootFolder=%2Fsome%2Fpath then you know "what" to show.

As to how: Use SP.UI.ModalDialog.showModalDialog

So, most probably you need to execute something like (warning! untested!)

SP.SOD.executeFunc('sp.ui.js', 'SP.UI.ModalDialog', function(){
  var url = _spPageContextInfo.webServerRelativeUrl.replace(/\/?$/, '/'+_spPageContextInfo.layoutsUrl) + '/Upload.aspx?List=%7B[id-of-the-list]%7D';
  SP.UI.ModalDialog.showModalDialog({
    title: "do upload",
    width: 800,
    height: 400,
    url: url
  });
});