How to create upload page in SharePoint Online?

Question

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

Img1

Img 2

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>  
 <script>  
var fileInput;  
$(document)  
    .ready(function () {  
        fileInput = $("#getFile");  
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);  
    });  

function registerClick() {  
    //Register File Upload Click Event   
    $("#addFileButton").click(readFile);  
}  
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) {  
        alert(e.target.error);  
    }  
    reader.readAsArrayBuffer(file);  
}  
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();  
    createInfo.set_content(base64);  
    createInfo.set_url(fileName);  

    //Add the file to the library  
    var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
    //Load client context and execcute the batch  
    clientContext.load(uploadedDocument);  
    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());  
}  

    </script>  

    <table>
        <tr>
            <td>
                <img src="https://i.sstatic.net/3WpN6.jpg" alt="uploadFile" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="getFile" type="file" /> <input id="addFileButton" type="button" value="Upload" />  
            </td>
        </tr>

    </table>

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 :)