javascript / PHP file upload

Question

I'm using an audio recorder from this place

http://webaudiodemos.appspot.com/AudioRecorder/index.html ,

but I instead of saving the file locally I would like to upload it back to the server. My best shot was to try to modify the Recorder.setupDownload function in recording.js script to pass the blob it creates to a simple upload PHP script I found here :

<?php
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['recording']['name'];
    $file_size =$_FILES['recording']['size'];
    $file_tmp =$_FILES['recording']['tmp_name'];
    $file_type=$_FILES['recording']['type'];   
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
    $extensions = array("wav");         
    if(in_array($file_ext,$extensions )=== false){
     $errors[]="extension not allowed, please choose wav file."
    }
    if($file_size > 2097152){
    $errors[]='File size under 20MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo "Success";
    }else{
        print_r($errors);
    }
}
?>

And I'm tring it using a jquery call,

    $.ajax({
            type: "POST",
            url: "../scripts/Single-File-Upload-With-PHP.php",
            data: blob
    });

But I'm obviously doing something wrong. The original PHP script has a form in it used for input, which I commented out trying to call the php code directly.

So my questions would be;

• how to modify the Recorder.setupDownload to upload the file to a designated folder?
• how to report back when something goes wrong?

Or alternatively, is there a more elegant solution?

Edit: Regarding what's in the blob

This is how the blob is being defined in recorder.js:

worker.onmessage = function(e){
      var blob = e.data;
      currCallback(blob);
}

As to my understanding it is created with methods listed in recorderWorker.js (link in comments), and it should contain simply a wav file.

Answer 1

I dont think you should create the blob in the worker, but I had a similar setup (actually based on the same example) where I retrieved the samplebuffers from the worker and save them into the m_data fields of an AudioMixer class that did some stuff to the recording, then:

//! create a wav file as blob
WTS.AudioMixer.prototype.createAudioBlob = function( compress ){
    // the m_data fields are simple arrays with the sampledata
    var dataview = WTS.AudioMixer.createDataView( this.m_data[ 0 ], this.m_data[ 1 ], this.m_sampleRate );
    return( new Blob( [ dataview ], { type:'audio/wav' } ) );
}

WTS.AudioMixer.createDataView = function( buffer1, buffer2, sampleRate ){
    var interleaved = WTS.AudioMixer.interleave( buffer1, buffer2 );
    // here I create a Wav from the samplebuffers and return a dataview on it
    // the encodeWAV is not provided..
    return( WTS.AudioMixer.encodeWAV( interleaved, false, sampleRate ) );
}

then to send it to the server

var blob = this.m_projectView.getAudioEditView().getAudioMixer().createAudioBlob();
if( blob ){
    //! create formdata (as we don't have an input in a DOM form)
    var fd = new FormData();
    fd.append( 'data', blob );

    //! and post the whole thing @TODO open progress bar
    $.ajax({
        type: 'POST',
        url: WTS.getBaseURI() + 'mixMovie',
        data: fd,
        processData: false,
        contentType: false
    } );
}

and I had a node server running where the blob was sent to and could be picked up directly as a wav file, using the express node module:

var express = require( 'express' );

// we use express as app framework
var app = express();

/** mixMovie expects a post with the following parameters:
  * @param 'data' the wav file to mux together with the movie 
  */
app.post( '/mixMovie', function( request, response ){

    var audioFile = request.files.data.path;
    ....

} );

hope this helps..

Jonathan

Answer 2

In the end this worked nicely for me:

recorder.js:

$.ajax(
      {
       url: "./scripts/upload.php?id=" + Math.random(),
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(data){
                    alert('Your message has been saved. \n Thank you :-)');
                } 
       });

And the upload script itself:

<?php
if(isset($_FILES['data']))
{   
    echo $_FILES['data']["size"];
    echo $_FILES['data']["type"];
    echo $_FILES['data']["tmp_name"];

    $name = date(YmdHis) . '.wav';

    move_uploaded_file($_FILES['data']["tmp_name"],"../DEST_FOLDER/" . $name);

}
?>