How to Add a Document to a Library from the Page

This article will demonstrate how to add a document to a SharePoint list from the site page. Follow the steps below to get started.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Copy the List= URL
  • Step 2: Decode the copied URL
  • Step 3: Create a Link URL
  • Step 4: Edit the SharePoint Page
  • Step 5: Paste the created Link URL
  • Step 6: Connect a File List to a Document Library
  • Step 7: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have an existing Panel Design Element with a File List Design Element inside.
• You must have an existing Documents Library with files.

Step-by-step Tutorial

Follow the steps to learn how to add a document to a SharePoint list directly from the page:

Step 1: Copy the List= URL

Open the Document Library you would like to add a document to and click the cogwheel icon:

Select Library Settings:

Click More library settings:

From the address line of the browser, copy the part of the URL that goes after List=

Step 2: Decode the copied URL

Use a URL decoding tool and paste the copied URL in the field provided:

Click Decode url:

Copy the decoded URL:

Step 3: Create a Link URL

Replace the {document library id} below with the decoded URL:

    http://sitecollectionurl/_layouts/Upload.aspx?List={document library id}

Then, replace sitecollectionurl with your site address:

    https://sitecollectionurl/_layouts/Upload.aspx?List={3c1c2b6c-4610-492a-b50a-389de83ee36a}

Your Link URL will now look like this:

https://somewhatcompany.sharepoint.com/_layouts/Upload.aspx?List={3c1c2b6c-4610-492a-b50a-389de83ee36a}

NOTETake note of this URL as you will use it on one of the next steps.

Step 4: Edit the SharePoint Page

Go to the SharePoint site you want to use and click Edit:

Click the ShortPoint tag:

Select the pencil icon:

Click the Switch to Grid Mode icon:

Step 5: Paste the created Link URL

NOTEBefore proceeding with the next steps, make sure you already have a Panel Design Element with a File List inside.

Look for the Panel Design Element you want to use and click the cogwheel icon:

Go to the Design tab:

Add a Link Text. This will be the text that will prompt your users to add a document. For this guide, we will use + Add a Document.

Paste the Link URL you created in Step 3 in the Link field:

Under Link Type, select Button:

Under Linking options, select Lightbox:

NOTECheck out Types of Linking Options to learn more about the choices under the Linking Options field.

Then, click Preview to see how your panel will look on your page:

Once satisfied, click Update:

Step 6: Connect a File List to a Document Library

Check out  Connect Basic Tutorial to learn how to connect your File List to a Document Library. Once done, your File List will look like this:

Step 7: Save

Click the eye icon to see how your page will look in real-time:

Once satisfied, click Save:

Congratulations! You can now add documents directly from your page. 

Related articles:

• How to Automatically Open a Lightbox/Popup When the Page Loads Based on Condition
• How to Close Lightbox Popup Using Your Custom Link
• How to Add an Edit Item Button to ShortPoint Elements