CODEWITHSUNDEEP
cordovauploadmediarecord
james
james

Reputation: 171

Upload Recording from Cordova Media Plugin

I am trying to upload an audio file recorded with the Cordova Media Plugin on iOS. The audio files are created and I am able to play them back.

But I can't find a working solution to upload the recording from the file system. My code for the recording is:

 record = new Media(src,
            // success callback
            function () {
                console.log("recordAudio():Audio Success");
            },

            // error callback
            function (err) {
                console.log("recordAudio():Audio Error: " + err.code);
            });

 // Record audio
 record.startRecord();
 //when finished
 record.stopRecord();

Upvotes: 3

Views: 8373

Answers (2)

james
james

Reputation: 171

I found out how to do it:

On iOS you will have to add the Cordova File System Plugin first to create a new Entry. 

cordova plugin add org.apache.cordova.file

To create the record File and set the global variables fileURL and audioRecord:

    //Prepares File System for Audio Recording
    audioRecord = 'record.wav';
    onDeviceReady();

    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile(audioRecord, {
            create: true,
            exclusive: false
        }, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileURL = fileEntry.toURL();
    }

to start and stop the record:

 record = new Media(audioRecord,
            // success callback
            function () {
                console.log("recordAudio():Audio Succes: ");
            },

            // error callback
            function (err) {
                console.log("recordAudio():Audio Error: " + err.code);
            });

        // Record audio
        record.startRecord();
        // Wait
        record.stopRecord();

To upload the file you will first have to add the File Transfer Plugin:

cordova plugin add org.apache.cordova.file-transfer

Then you can call this method to upload the record:

//Method to upload Audio file to server
var uploadAudio = function () {
    var win = function (r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
    }

    var fail = function (error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = "recordupload.wav";
    options.mimeType = "audio/wav";

    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI("http://yoururl.com/uploadaudio.php"), win, fail, options);
}

To receive the file you can use this PHP script:

<?php
// Where the file is going to be placed
$target_path = "records/";

/* Add the original filename to our target path.
Result is "uploads/filename.extension" */
$target_path = $target_path . basename( $_FILES['file']['name']);

if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['file']['name']).
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
    echo "filename: " .  basename( $_FILES['file']['name']);
    echo "target_path: " .$target_path;
}
?>

Upvotes: 14

unobf
unobf

Reputation: 7244

Use the FileTransfer plugin https://github.com/apache/cordova-plugin-file-transfer/blob/master/doc/index.md. To install do:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

then do this

var ft = new FileTransfer();

var success = function (r) {
    // success code here
};
var fail = function (error) {
    // failure code here
    alert('File could not be uploaded');
};

options.fileKey = 'image'; // set the key for the server to know where the cotent is
options.fileName = '/myfile.jpg'; // location of your file
options.mimeType = "image/jpeg"; // mimeType

params.myParam = 'My Value'; // add other parameters if required

options.params = params;
ft.upload(fileURI, encodeURI('/path/to/my/post/handler'), success, fail, options);

Upvotes: 0

Related Questions