Frontend Uploading

Uploading to the CDN from the frontend is easy!

To get started you'll need a running web server, this may be glitch, repl or anything else

Using Express (JS)

With express you need to know the basics of a express server. Once you have a running server you'll need to add one endpoint:

let authorization = "my_authorization_token";
let realmId = "my_realm_id";
let uploadLimitBytes = 10000000; // 10mb per file

app.post("/api/v1/cdn", async (req, res) => {
    // Make sure to send back a 200 request
    console.log(req.body.files) // these are the files the user is uploading (file_ids)
    
    if(req.body.type === "auth"){
        // you *should* check the auth/realm tokens here, or the cdn does it.
        return res.status(200).json({
            code: 200,
            msg: "OK",
            auth: req.body?.cdnAuth?.auth,
            realm: req.body?.cdnAuth?.realm,
            max_upload_size: uploadLimitBytes,
            security: { // leaving this blank will make it switch to security V1
                version: 2 // adds version 2 security
                origins: "domain-one.com, domaintwo.xyz,domainthree.me"
                // origins can also be set to: "*" to allow uploading from any domain
            }
        })
    } else if(req.body.type === "uploaded"){
        let auth = req.body?.cdnAuth?.auth;
        let realm = req.body?.cdnAuth?.realm;
        if(!auth) return res.fin(400, "No auth found");
        if(!realm) return res.fin(400, "No realm found");
        if(auth !== process.env.cdn_auth) return res.fin(400, "Invalid auth");
        if(realm !== process.env.cdn_realm) return res.fin(400, "Invalid realm");
        // Do something with files
        console.log(req.body) // req.body.files
        return res.fin(200, "OK") // Send 200 sig to server
    } else {
        return res.status(400).json({
            code: 400,
            msg: "Invalid CDN type"
        })
    }
});

This endpoint will contain the CDN-AUTH.

To make the CDN target this endpoint you need to edit it at your dashboard:

"Endpoint"

Changing this to: https://myapi.com/api/v1/cdn/auth will work.

Get to testing?

Want to test this in a developed environment?

Go to https://cdn.numachi.org/nd/client.html to test it

Implementation

The actual frontend implementation is also fast.

First copy the following snippet to your header:

<script src="https://cdn.numachi.org/nd/core.js"></script>
<script>const cdn = new NNDC("PUBLIC_KEY");</script>

Afterwards to use the frontend CDN you'd run:

<div id="app">
    <input type="file" name="" id="file">
    <button id="submit">Submit</button>
</div>

<div id="gallery">

</div>

<script>
    const btn = document.getElementById('submit');
    btn.addEventListener("click", () => {
        btn.disabled = true;

        cdn.uploadFiles(document.getElementById('file').files)
            .then(r=>{
                console.log(r);
                btn.disabled = false;
                if(r.code !== 200) return alert(r.msg);
                const gallery = document.getElementById('gallery');
                for(img_id of r.json.files){
                    const img = document.createElement('img');
                    img.src = `${r.json.path}/${img_id}`;
                    img.onclick = `window.open('${r.json.path}/${img_id}')`;
                    img.width = 200;
                    gallery.appendChild(img);
                }
            })
    });
</script>

This code block is taken from our test.

If you have any questions then please reach out to us!

Seer#3000