Upload .TXT file to SharePoint from custom ASPX/HTML webpage using JavaScript

Question

I have a custom ASPX/HTML webpage hosted within a SharePoint site and need to upload a generated txt to a specific folder within the SharePoint site using JavaScript.

Processes: User clicks button on webpage -> JavaScript generated text file -> JavaScript uploads text file to SharePoint site folder

I'm not sure about SharePoint approach to file upload as there's no custom backend to work with. Would this be the correct process to use?

https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/complete-basic-operations-using-javascript-library-code-in-sharepoint#create-a-file-in-a-document-library

Answer 1

Here is a sample code for your reference, you can create a SharePoint site page and use Script Editor Web Part to embed it:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">

function uploadDocument() {
    if (!window.FileReader) {
        alert("This browser does not support the HTML5 File APIs");
        return;
    }

    var element = document.getElementById("uploadInput");
    var file = element.files[0];
    var parts = element.value.split("\\");
    var fileName = parts[parts.length - 1];

    var reader = new FileReader();
    reader.onload = function (e) {
        addItem(e.target.result, fileName);
    }
    reader.onerror = function (e) {
        alert(e.target.error);
    }
    reader.readAsArrayBuffer(file);

    function addItem(buffer, fileName) {
        var call = uploadDocument(buffer, fileName);
        call.done(function (data, textStatus, jqXHR) {
            console.log(data);
            alert("File Upload Successfully");
        });
        call.fail(function (jqXHR, textStatus, errorThrown) {
            failHandler(jqXHR, textStatus, errorThrown);
        });
    }

    function uploadDocument(buffer, fileName) {
        var url = String.format(
            "{0}/_api/Web/Lists/getByTitle('Documents')/RootFolder/Files/Add(url='{1}', overwrite=true)",
            _spPageContextInfo.webAbsoluteUrl, fileName);
        var call = jQuery.ajax({
            url: url,
            type: "POST",
            data: buffer,
            processData: false,
            headers: {
                Accept: "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()            
                }
        });

        return call;
    }


    function failHandler(jqXHR, textStatus, errorThrown) {
        var response = JSON.parse(jqXHR.responseText);
        var message = response ? response.error.message.value : textStatus;
        alert("Call failed. Error: " + message);
    }
}
</script>

<input type="file" id="uploadInput"/>
<input type="button" id="Upload" value="Upload" onclick="uploadDocument()"/>