Hello I would like to how can I create this in SharePoint Online ?


enter image description here

Img 2

enter image description here

1 Answer 1


yes its possible.

You need to look into client side method without going into in-depth development like a hosted app. I would suggest html/css for the form and javascript/jsom for the logic with rest.

someone has kindly done it for you.

create a page in sharepoint (pages library) edit the page and add a script editor webpart to the page...

copy the code below and past into your favorite editor like notepad++ or notepad and look for "MY DOCUMENT LIBRARY". You need to change that to the actual document library name where you want to store the files to. then copy and past the code into the script editor by clicking on the "edit snippet" link.

code below is mainly javascript and jsom. The end part is html.

     <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
var fileInput;  
    .ready(function () {  
        fileInput = $("#getFile");  
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);  

function registerClick() {  
    //Register File Upload Click Event   
var arrayBuffer;  

function readFile() {  

    //Get File Input Control and read th file name  
    var element = document.getElementById("getFile");  
    var file = element.files[0];  
    var parts = element.value.split("\\");  
    var fileName = parts[parts.length - 1];  

    //Read File contents using file reader  
    var reader = new FileReader();  
    reader.onload = function (e) {  
        uploadFile(e.target.result, fileName);  
    reader.onerror = function (e) {  
var attachmentFiles;  

function uploadFile(arrayBuffer, fileName) {  
    //Get Client Context,Web and List object.  
    var clientContext = new SP.ClientContext();  
    var oWeb = clientContext.get_web();  
    var oList = oWeb.get_lists().getByTitle('MY DOCUMENT LIBRARY');  

    //Convert the file contents into base64 data  
 var bytes = new Uint8Array(arrayBuffer);  
    var i, length, out = '';  
    for (i = 0, length = bytes.length; i < length; i += 1) {  
        out += String.fromCharCode(bytes[i]);  
    var base64 = btoa(out);  
    //Create FileCreationInformation object using the read file data  
    var createInfo = new SP.FileCreationInformation();  

    //Add the file to the library  
    var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
    //Load client context and execcute the batch  
    clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  

function QuerySuccess() {  
    console.log('File Uploaded Successfully.');  
    alert("File Uploaded Successfully.").  

function QueryFailure(sender, args) {  
    console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());  
alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());  


                <img src="https://i.stack.imgur.com/3WpN6.jpg" alt="uploadFile" />
                <input id="getFile" type="file" /> <input id="addFileButton" type="button" value="Upload" />  


credit goes to http://www.c-sharpcorner.com/blogs/how-to-uploads-document-in-document-library-using-jsom-in-sharepoint-2013-o365 but edited for online :)

  • /research/ESRC/Baltimore/_layouts/Upload.aspx?List={2cae3572-0221-4a33-ba40-6d6364eec84b}&RootFolder= /research/ESRC/Baltimore/_layouts/Upload.aspx?List={7dae791e-ebaa-4159-a797-f52b3fa7d467}&RootFolder=
    – AY_91
    Jun 12, 2017 at 14:19
  • look at my comment above somebody done it like that,
    – AY_91
    Jun 12, 2017 at 14:20
  • yes you could use the default upload form and just add in the list id. I gave you the solution above because you show that you want a custom interface, atleast that is what i assumed lol.
    – Ali Jafer
    Jun 14, 2017 at 7:24
  • ANY Solution for SharePoint Online Modern page, this is for Classic page? Jul 7, 2020 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.