Upload to File column on create of record using the Portal Web API

{% include 'Portal Web API Wrapper' %}
<div id="upload-Audio">
    <h1>Create Track</h1>
    <form id="track-content">
        <label for="track-name">Track Name</label>
        <input id="track-name" type="text">
        <input id="file-upload" accept="audio/mpeg,audio/mpeg3,audio/x-mpeg-3,audio/ogg" type="file">
        <a class="btn btn-default" id="submitFile" style="display:none">Upload</a>
    </form>
    <!-- This div and audio player is hidden by default but will be shown if the upload succeeds -->
    <div class="showOnSuccess" role="alert" style="display:none; margin-top: 1em;">
        <audio id="upload-player" controls>
            <source type="audio/mpeg">Your browser does not support the audio element.
        </audio>
    </div>
</div>

<script>
var trackName;

// on change to the file upload form field, check we have the required inputs and run the createFile function
$( "#file-upload" ).on( "change", function() {
    trackName = document.getElementById('track-name').value;
    //selectedFile = $( "#file-upload" ).val();
    var fileMimeType = document.getElementById('file-upload').files[0].type;
    alert(fileMimeType);
    if(trackName != '') {
    // Check this is an audio file
        if(fileMimeType.startsWith("audio/")) {
            createFile();
        } else {
            alert("This doesn't appear to be an audio file");
        }
    }
});


function createFile() {
    var record = {};
    // Get the name from the form field and escape any special characters
    record.musdyn_name = encodeURIComponent(trackName);
    $('#upload-Audio h1').text('Uploading...');
        webapi.safeAjax({
            type: "POST",
            url: "/_api/musdyn_tracks",
            contentType:"application/json",
            data: JSON.stringify(record),
            success: function (data, textStatus, xhr) {
                // If record creation succeeds, get the GUID of the newly created record and store in a varibale for easy reuse
                var entityID = xhr.getResponseHeader("entityid");
                // Provide some visual feedback re success of this stage
                $('#upload-Audio h1').text('Track created, uploading audio file');
                // Run the getFileContentsAndMetadata function, passing the GUID of the newly created record
                getFileContentsAndMetadata(entityID);
            },
            error: function (xhr, textStatus, errorThrown) {
                // If the creation fails, provide some visual feedback
                $('#upload-Audio h1').text('Uh oh, error creating the track');
            }
        });
}

function getFileContentsAndMetadata(entityID) {
    // Get the name of the selected file
    var fileName = encodeURIComponent(document.getElementById('file-upload').files[0].name);
    // Get the content of the selected file
    var file = document.getElementById('file-upload').files[0];
    // If the user has selected a file
    if (file) {
        // Read the file as a byte array
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        // The browser has finished reading the file, we can now do something with it...
        reader.onload = function(e) {
            // The browser has finished reading the file, we can now do something with it...
            var fileContent = e.target.result;
            // Run the function to upload to the Portal Web API, passing the GUID of the newly created record and the file's contents and name as inputs
            uploadFile(fileContent,fileName,entityID);
        };
    }
}

// Upload the file to
function uploadFile(fileContent,fileName,entityID) {
    var record = {};
    record.musdyn_name = fileName;

    webapi.safeAjax({
        type: "PUT", // NOTE: right now Portals requires PUT instead of PATCH for the upload
        url: "/_api/musdyn_tracks(" + entityID + ")/musdyn_audiotrack?x-ms-file-name=" + fileName,
        contentType: "application/octet-stream",
        data: fileContent,
        processData: false,
        success: function (data, textStatus, xhr) {
            // Provide some visual feedback re successful upload
            $('#upload-Audio h1').html('<span style="color: #1ed760;" class="glyphicon glyphicon-ok"></span> Here\'s your audio');
            // Set the source of the hidden audio player
            audioPlayerSrcURL = '/File/download.aspx?Entity=musdyn_track' + '&Attribute=musdyn_audiotrack&Id=' + entityID;
            $('#upload-player').attr('src',audioPlayerSrcURL)
            // Show the audio player
            $('.showOnSuccess').slideDown(200);
            // Hide the form
            $('#track-content').slideUp(200);
        },
        error: function (xhr, textStatus, errorThrown) {
            // If error occurs uploading the file, provide visual feedback
            $('#upload-Audio h1').text('Uh oh, uploading file the track');
        }
    });
}
</script>