javascriptasp.net-coretustus-js-clienttusdotnet

Send custom response back and capture it on the javascript client using tusdotnet


I am using tusdotnet from tus.io in ASP.NET Core Application, I am trying to send back a custom response as I am putting the entries in database and need to send back database Id in the response. On the javascript side, after the file successfully gets uploaded, the response is always null.

onSuccess: function (response) {
    try {
        console.log(response); // this part is always null. even if the json response was received in the final network call.
    } catch (e) {
        console.log('Error onSuccess: ', e);
    }                        
}

Need to get the response back.


https://github.com/tus/tus-js-client/blob/master/docs/api.md


Solution

  • Turns out, tusdotnet by default sends back a response status code as 204 No Content which means my response was being ignored from the library itself.

    I had to change the HttpContext.Response from the Tus configuration to send status code as 200 OK in order to pass the response back from the asp.net core application. For exapmle in my OnFileCompleteAsync event I had to change default status code (204 No Content) to 200 OK:

    ctx.HttpContext.Response.StatusCode = StatusCodes.Status200OK;
    await ctx.HttpContext.Response.WriteAsJsonAsync(new FileUploadResponseModel() { FileName = "Modified File Path", Path = "Extra info regarding the path", FileId = "Database Id" }, ctx.CancellationToken);
    

    In order to capture the response in the onSuccess callback:

    onSuccess: function (response) {
        try {
            console.log(response); // This method should have the response after below changes
        } catch (e) {
            console.log('Error onSuccess: ', e);
        }                        
    }
    

    I had to modify the javascript library in order to properly emit the response as the implementation of 204 No Content was modified to 200 OK. The function responsible for handling this change was _emitSuccess:

    function _emitSuccess() {
        if (this.options.removeFingerprintOnSuccess) {
            // Remove stored fingerprint and corresponding endpoint. This causes
            // new uploads of the same file to be treated as a different file.
            this._removeFromUrlStorage();
        }
        if (typeof this.options.onSuccess === 'function') {
            this.options.onSuccess();
        }
    }
    

    Had to modify the above method to:

    function _emitSuccess(res) {
        if (this.options.removeFingerprintOnSuccess) {
            // Remove stored fingerprint and corresponding endpoint. This causes
            // new uploads of the same file to be treated as a different file.
            this._removeFromUrlStorage();
        }
        if (typeof this.options.onSuccess === 'function') {
            this.options.onSuccess(res);
        }
    }
    

    After this change has been made, I had to modify all the places where this callback was being executed to pass through the response. Such as in _handleUploadResponse callback:

    this._emitSuccess(res); // pass on the response received in the handler.
    

    Similarly, needed to modify all the places it was being consumed.


    CDN: https://cdn.jsdelivr.net/npm/tus-js-client@latest/dist/tus.js