How to upload recorded audio (recorder.js-master) through MVC Controller?

Question

I've been working with a great audio recorder which is recorder.js-master. But I can't make the upload work with MVC Controller.

Here's my javascript function.

function AudioUpload(title, description) {
    Recorder.upload({
        method: "POST",
        url: '@Url.Action("Upload", "Audio")',
        audioParam: "Recording", 
        params: {
            "Title": title,
            "Description": description
        },
        success: function (responseText) {     
            alert(responseText.Success);
        },
        error: function () {                 
            alert("error");
        },
        progress: NULL            
    });
}

Here's my AudioController

    public JsonResult Upload(VoicePassage passage)
    {
        //upload Audio

        return Json(new { Success = true });
    }

I have a breakpoint in Upload just to know that it's going to my Controller but it doesn't. Please help. Here's the reference I follow. http://marc.codewisp.com/2013/05/07/in-browser-audio-recording-recorder-js-asp-net-mvc/?replytocom=12#respond

Regards,

Christian

Answer 1

I'm the author of the original post you linked to.

A few things to try out:

• Add a breakpoint to the JavaScript function: if it doesn't hit, something's wrong with your JavaScript.
• Check your browser's network activity: In Chrome, under Developer Tools, go to the Network tab and attempt the upload. See if it is hitting the right URL.
• Make sure you're using '@Url.Action...' inside a Razor view. It won't work in external JavaScript files.

If you need @Url.Action, you can probably use it in your Razor view, assign it to a temporary global variable and use it in your external JavaScript file.

In your View, add the following before the reference to your external JS:

<script type="text/javascript">
    var audioAction = '@Url.Action("Upload", "Audio")';
</script>

In your JavaScript file, change '@Url.Action("Upload", "Audio")' to audioAction, as in:

function AudioUpload(title, description) {
    Recorder.upload({
        method: "POST",
        url: audioAction,
        audioParam: "Recording", 
        params: {
            "Title": title,
            "Description": description
        },
        success: function (responseText) {     
            alert(responseText.Success);
        },
        error: function () {                 
            alert("error");
        },
        progress: NULL            
    });
}