Edit in JSFiddle

// How to use:
// 1. Enter the feed id to publish to.
// 2. Enter either the api key or publish key, for non public feeds, an access key is needed to show the live frame if the api key is not used
// 3. Select a jpeg or png file to upload.

var feedId = "";

var apiKey = "";
var publishKey = "";
var accessKey = ""; // not used by this api method, required for 'current live frame' to work for non-public feeds, if apiKey is not used

// the time the frame was recorded, this is optional, current time will be used if not specified
var frameTime = "";

var apiBaseUrl = "//www.teleport.nu/api/v1";

// don't cache ajax or content won't be fresh
$.ajaxSetup({
    cache: false
});


var url = apiBaseUrl + "/frame-set?feedid=" + feedId + "&frametime=" + frameTime + "&apikey=" + apiKey + "&publishkey=" + publishKey;

var liveFrameUrl = apiBaseUrl + "/frame-get?feedid=" + feedId + "&sizecode=480p" + "&apikey=" + apiKey + "&accesskey=" + accessKey;

// load the current live frame
if (feedId) {
    $("#liveFrame").attr('src', liveFrameUrl + '&jsfiddlecb=' + Math.random());
}

$("form").submit(function (evt) {
    evt.preventDefault();

    if (!feedId) {
        alert("*** Specify the feed id. ***");
    }
    if (!apiKey && !publishKey) {
        alert("*** Specify the api or publish key. ***");
    }

    // select the first input element with selected file
    var formData = new FormData($(this)[0]);

    // upload the selected file
    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        enctype: 'multipart/form-data',
        processData: false,
        success: function (data, textStatus, jqXHR) {
            // got the result, just a status code on delete api, http status 200 means upload went ok
            $("#response").html(jqXHR.status);
            // update the live frame image, use the cache bust random parameter to force the browser to hit the server, else the new image may not load
            $("#liveFrame").attr('src', liveFrameUrl + '&jsfiddlecb=' + Math.random());
        },
        error: function (jqxhr, textStatus, error) {
            $("#response").html("Error: " + jqxhr.status + ', ' + textStatus + ', ' + error + ', ' + jqxhr.responseText);
            $("#liveFrame").attr('src', "");
        }
    });

    return false;
});

<b>Teleport frame upload</b>

<form>
    <br/>
    <br/>
    <br/>
    <input id="file" name="file" type="file" />
    <br/>
    <br/>
    <input type="submit" value="Upload" />
</form>
<br/>
<br/>Response:
<div id="response"></div>
<br/>
<br/>Current live frame:
<br/>
<img id="liveFrame" src="" style="max-height: 160px" />