Figure 1: SharePoint OnPremises - File Input element

SharePoint OnPremises: Client side file upload control and uploading file in SharePoint using rest API

Hi All,

Today new discussion, which we implemented in our one of the SharePoint 2013 project.

Background: In one of our SharePoint OnPremises project, we have requirement to upload the user’s photo, his profile image in SharePoint Image library (PublishingImages). So we have implemented this feature using JavaScript and upload image in SharePoint Image library using rest API.

This become generic component and anybody can use this in any SharePoint project. We have used this control in our couple of Visual WebParts.

In this article I’ll share step by step details how we implemented and how this component works.

Environment: SharePoint on premises 2013, didn’t tested for SharePoint online but I believe it should work for SharePoint online as well.

Details: We have OOB FileUpload control available in .NET but which causes page post back so we decided to implement client side control.

Step 1: Using <input> element with type “file”. This let the user to select one or more files. File input renders the button “Choose File”, on click of this button file picker dialog opens and label which shows the file name as

Figure 1: SharePoint OnPremises – File Input element

On click of “Choose File” button file open dialog box opens as and we can select the one or multiple files from it. Here in case we required only one file and so considering each time that only one file will be selected at a time.

Figure 2: SharePoint OnPremises – Open file dialog box, opens when “Choose File” button is clicked

Step 2: We have added one more button “Upload Profile”, on click of this button we are uploading image in SharePoint Images library as

Figure 3: SharePoint OnPremises – “Upload Profile” button with File Input control

Step 3: On “Upload Profile” button click we will upload the selected file using rest apis, we are calling JavaScript method “UploadFile” as

Here also showing OOB wait dialog box till the image get uploaded in SharePoint.
Following are the detailed steps to upload file using rest API from JavaScript

References:

  1.      <input type=”file”>
  2.      FileReader object
  3.      Rest API to upload the file
  4.      OOB SharePoint Wait dialog box 

Thanks for reading  🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.