Inner Workings (Admin)

Create a Pictorial form

We have a form that does a POST request to our server. From there, the API server takes over and takes us to the next step:

<form id="frmUploader" enctype="multipart/form-data" 
    action="http://128.xxx.83.231/api/Upload" method="POST">
    <input type="file" name="imgUploader" id="imgUploader" multiple />
    <input type="submit" name="submit" id="btnSubmit" value="Upload" />
 </form>

Editing description

For editing description, we first let the user see what's currently in the database. Hence, I first gave a div with id editingSection in order to reserve space to contain the data:

<div id="editingSection">
</div>

the code in updatePictorials.js will inject data into this div.

I use js's fetch function to get all the data from url http://1x8.xxx.8x.2x1/pictorials/ This API endpoint will return all the data that represents our pictorials in the slideshow.

fetch(API_URL).then((resp) => resp.json()) 
    .then(function(data) {
}

We then use a promise to plaster all the received data into our div via the function plasterDataIntoElementID(). We inject the data array into plasterDataIntoElementID so that we can access the data we need.

var dataPlasteredIn = new Promise(
    function (resolve, reject) {
        if (plasterDataIntoElementID(data, EDITING_SECTION_ID)) { resolve("plastered"); }
        else { reject("Error"); }
    }
); //Promise

plasterDataIntoElementID()

We basically use JS to create a UL element. Then use a loop to append LI elements as children under that UL list.

function plasterDataIntoElementID(dataArray, elementID) {
    var containerAttributes = [];
    containerAttributes.push({
        name : "class",
        value : "list-group"
    });

    var container = createElement("ul", containerAttributes);
    container.appendChild(createTitleLabel());

    for (var i = 0; i < dataArray.length; i++) {
        container.appendChild(createSection(i, dataArray));
    }

    if (document.getElementById(elementID).appendChild(container))
        return true;

    return false;
}

Notice the createElement function

The createElement function simply takes in the necessities in order to create an element. Specifically it takes in a tagName so we know what kind of element to create. Then it takes in an attributes array so we know what kind of id, class, etc to assign. Text represents the textual name for this element. Finally, we append an array of other children elements onto our element.

This function is the embodiment of how I first created the UL element, then created additional IL element underneath it. The data I used for text comes from the object data array fetched from the server. i.e. unique ID, file name, description text.

function createElement(tagName, attributesArray, text, childrenToAppend) {
    var element;
    if (typeof tagName !== 'undefined') { element = document.createElement(tagName); }
    if (typeof text !== 'undefined') { element.appendChild(document.createTextNode(text)); }

    if (Array.isArray(attributesArray) && attributesArray.length > 0) {
        for (var i = 0; i < attributesArray.length; i++) {
            var attribute = attributesArray[i];
            element.setAttribute(attribute.name, attribute.value);
        }
    }

    if (Array.isArray(childrenToAppend) && childrenToAppend.length > 0) {
        for (var i = 0; i < childrenToAppend.length; i++) {
            element.appendChild(childrenToAppend[i]);
        }
    }
    return element;
}

Making request to the Server

http://shanghaiseagull.com/index.php/2017/11/21/using-request-object-to-make-web-requests/

The basic idea is that

1. we make a new Request object and send it off to the server 2 inject a dictionary into the Request to specify what kind of request we want to make.

Data appended to the URL appears in the params property on the server's request object. Data appended into the body property "key1=value1&key2=value2" will appear in the body property on the server's request object.

var request = new Request(requestURL, {
    method: 'PUT',
    mode: 'cors',
    body: "description="+newDescription, // 2 mb limit
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    })
});

So on the server side, you cans imply go:

req.body.description 

and you'll get the value that you passed on the client side.