Home  ›  Uploading an Html File to Sharepoint 2016

Uploading an Html File to Sharepoint 2016

Written By Thursday, 14 April 2022 Add Comment Edit
  • Updated date Jun 08, 2016
  • 77.6k
  • 0

In this article, you will larn how to upload files to document library in SharePoint 2016 / Office 365 JavaScript object model.

Document library acts as the primary repository for the document collaboration in SharePoint. Information technology provides the flexibility to version documents, check-out/check-in, implement retentiveness policies and performs other collaboration options. We can upload the documents to the document library easily. Even so, we volition be faced with the requirement to programmatically upload the documents into the SharePoint library besides. Nosotros get the dialog, as shown below, which can be used to scan and upload the documents.

Allow's see how nosotros tin can implement the file upload to the document library, using the JavaScript object model. In club to provide browsing and pick of the documents,  we volition be using HTML 5 input control. Make sure you are using IE version greater than eight, else HTML five support won't be bachelor.

  • Add reference to jQuery file.
    1. <script language= "javascript"  blazon= "text/javascript"  src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.one/jquery.min.js" ></script>
    2. <script language="javascript"  blazon= "text/javascript" >
  • Within a certificate, phone call SP.SOD.executeFunc, and then equally to load script SP.js. Since nosotros are trying to upload a file from the local machine, nosotros will utilize HTML 5 input control to read the file contents and upload it as an attachment.

    Telephone call the primary starting indicate function, say registerClick.

    1. SP.SOD.executeFunc( 'sp.js' , 'SP.ClientContext' , registerClick);
  • Instantiate FileReader object and read the contents of the local file.
    1. varreader = new  FileReader();
    2. reader.onload = function(e)
    3. {
    4.     uploadFile(eastward.target.result, fileName);
    5. }
    6. reader.onerror = office(e)
    7. {
    8.     alarm(e.target.mistake);
    9. }
    10. reader.readAsArrayBuffer(file);
  • Instantiate the client context and get the list case.
    1. varclientContext= new  SP.ClientContext();
    2. varoWeb= clientContext.get_web();
    3. varoList= oWeb.get_lists().getByTitle('Documents' );
  • Catechumen the file contents into base64 information.
    1. varbytes = new  Uint8Array(arrayBuffer);
    2. vari, length,out  = '' ;
    3. for  (i = 0, length = bytes.length; i < length; i += 1)
    4. {
    5. out  += String.fromCharCode(bytes[i]);
    6. }
    7. varbase64 = btoa(out );
  • Create FileCreationInformation object, using the read file data and add the certificate to the library.
    1. varcreateInfo= new  SP.FileCreationInformation();
    2. createInfo.set_content(base64);
    3. createInfo.set_url(fileName);
    6. varuploadedDocument= oList.get_rootFolder().get_files().add(createInfo)
  • Load the client context and execute the batch which will transport the request to the Server and perform the unabridged JavaScript object model operations as a batch.
    1. clientContext.load(uploadedDocument);
    2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    Full Code:
    1. <html>
    3. <head>
    5.     <script language="javascript"  type= "text/javascript"  src= "//ajax.googleapis.com/ajax/libs/jquery/one.8.1/jquery.min.js" ></script>
    6.     <script linguistic communication="javascript"  type= "text/javascript" >
    7.         varfileInput;
    8.         $(document).ready(function()
    9.         {
    10.             fileInput = $("#getFile" );
    11.             SP.SOD.executeFunc('sp.js' , 'SP.ClientContext' , registerClick);
    12.         });
    14.         function registerClick()
    15.         {
    17.             $("#addFileButton" ).click(readFile);
    18.         }
    19.         vararrayBuffer;
    21.         function readFile()
    22.         {
    24.             varelement = document.getElementById("getFile" );
    25.             varfile = element.files[0];
    26.             varparts = element.value.separate("\\" );
    27.             varfileName = parts[parts.length - i];
    29.             varreader =new  FileReader();
    30.             reader.onload = role(e)
    31.             {
    32.                 uploadFile(e.target.outcome, fileName);
    33.             }
    34.             reader.onerror = part(e)
    35.             {
    36.                 alert(e.target.error);
    37.             }
    38.             reader.readAsArrayBuffer(file);
    39.         }
    40.         varattachmentFiles;
    42.         role uploadFile(arrayBuffer, fileName)
    43.         {
    45.             varclientContext =new  SP.ClientContext();
    46.             varoWeb = clientContext.get_web();
    47.             varoList = oWeb.get_lists().getByTitle('Documents' );
    49.             varbytes =new  Uint8Array(arrayBuffer);
    50.             vari, length,out  = '' ;
    51. for  (i = 0, length = bytes.length; i < length; i += 1)
    52.             {
    53. out  += String.fromCharCode(bytes[i]);
    54.             }
    55.             varbase64 = btoa(out );
    57.             varcreateInfo =new  SP.FileCreationInformation();
    58.             createInfo.set_content(base64);
    59.             createInfo.set_url(fileName);
    61.             varuploadedDocument = oList.get_rootFolder().get_files().add together(createInfo)
    63.             clientContext.load(uploadedDocument);
    64.             clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    65.         }
    67.         part QuerySuccess()
    68.         {
    69.             console.log('File Uploaded Successfully.' );
    70.         }
    72.         function QueryFailure(sender, args)
    73.         {
    74.             console.log('Request failed with fault message - '  + args.get_message() + ' . Stack Trace - '  + args.get_stackTrace());
    75.         }
    76.     </script>
    77. </caput>
    79. <body>
    80.     <input id="getFile"  blazon= "file"  /><br />
    81.     <input id="addFileButton"  type= "button"  value= "Upload"  />
    82. </body>
    83. <html>

Nosotros tin test this in SharePoint, by adding it to the content editor Web part, equally shown beneath:

  • Salvage the code, depicted above, to a text file and save it into ane of the SharePoint Libraries, say Site Assets.
  • Go to the edit settings of the SharePoint page and click Spider web part from the Insert tab.

  • Add together content editor Web part.

  • Click on edit Spider web art from content edit Web role. Assign the URL of the script text file and click utilize.

Information technology gives usa a UI, where we can upload the file to the document library.

Once we have browsed the required file, click Upload. It will upload the file to the document library.

Pitfall
Though we can upload the file to the certificate library using JavaScript object model, there is a pitfall that we should exist aware of. JSOM has an inherent limitation that only files of sizes up to 5MB can be uploaded using this method. For bigger file size, we take to employ Rest to upload the file to the document library.

figgssontst.blogspot.com

Source: https://www.c-sharpcorner.com/article/upload-file-to-document-library-in-sharepoint-2016-javascript-object-model/

0 Response to "Uploading an Html File to Sharepoint 2016"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel