Send a file (type audio) without input type="file" in ajax

Question

I create a file at the client (record) and then I'd send it on my remote server. However I can not find how to do it without using an input file, I have the file path but when I need to send it by ajax is not detected in $ _FILES side PHP. If I create a blob it works but the file does not match the recording.

Is it possible?

[UPDATE 1]

The file is a audio/mpeg, this file is created after an audio recording, where I get the location and I can play it again. I need to recover without the user clicks on a file input

HTML

    <form   enctype="multipart/form-data" id="form_message" method="POST">
       <textarea name="message" id="message" value="" placeholder="Ecris quelque chose"></textarea>
       <input type="submit" style="display:none;" value="Valider"/>
   </form>

JS

fd = new FormData();
    fd.append('audiofile', 'filepath.mp3');
    // other data
function submit_form_message(fd){
        $.ajax({
            type: 'POST',
            url: "url",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data){}
        });
}

PHP

if($_FILES['audiofile']['size'] !=0){
            if ($_FILES['audiofile']['error'] == 0){
                $extensions_valides = array('mp3' , 'wav');
                if(in_array($_POST['extension'],$extensions_valides)){
                    $tmp_name = $_FILES["audiofile"]["tmp_name"];
                    $name_file = $notId.".".$_POST['extension'];
                    move_uploaded_file($tmp_name, $_SERVER['DOCUMENT_ROOT']."/Bell/sound/".$name_file);
                }
            }
        }

That does not make a lot of sense. Is the file on the server already? `$_FILES[]` is only populated by files submitted via the form post. — Twisty, Jan 27 '16 at 22:40
http://zacvineyard.com/blog/2011/03/upload-a-file-to-a-remote-server-with-phonegap Here you can see what I want to achieve but with ajax — Xwalk company, Jan 27 '16 at 23:05
Interesting! Reading the article now. I have a Fiddle that I think will work, but still testing. — Twisty, Jan 27 '16 at 23:20
I am looking forward to testing it, I searched unsuccessfully all day — Xwalk company, Jan 27 '16 at 23:23
So that article discussion a method that is using PhoneGap. This mobile library allows a few connections to devices on the mobile device, and the user is aware of these actions happening. For security, browsers do not let you set the path value manually. See this: http://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html — Twisty, Jan 27 '16 at 23:33
That being said, if the content you are creating is created within the browser, you may be able to feed the content to the form. This is done with images pretty commonly, where HTML Canvas is used. I have not seen anything similar for Audio. Could you expand upon how the content is being created? — Twisty, Jan 27 '16 at 23:35
Also this explains everything in GREAT detail: http://stackoverflow.com/questions/20537696/remember-and-repopulate-file-input/20537822#20537822 — Twisty, Jan 27 '16 at 23:38
This was the example I was working on, but it just won't work as is: https://jsfiddle.net/Twisty/eq4fpdt0/ Cannot set the value of file, and without that, the FormData will not contain the right type of data to send, the browser will not read all the content of the MP3, and it will not be uploaded. — Twisty, Jan 27 '16 at 23:47
Found another similar case: http://stackoverflow.com/questions/14074833/using-local-file-for-web-audio-api-in-javascript The 2nd answer, suggests: *The solution was to store my sound files as a Base64 encoded string. The sound files are relatively small (less than 30kb) so I'm hoping performance won't be too much of an issue. Note that I put 'xxx' in front of some of the hyperlinks as my n00b status means I can't post more than two links.* — Twisty, Jan 27 '16 at 23:55

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Found this here, which I think may be your best bet: Using local file for Web Audio API in Javascript

Step 1: create Base 64 sound font

First I need to convert my mp3 to a Base64 encoded string and store it as JSON. I found a website that does this conversion for me here - http://www.mobilefish.com/services/base64/base64.php You may need to remove return characters using a text editor but for anyone that needs an example I found some piano tones here - https://raw.github.com/mudcube/MIDI.js/master/soundfont/acoustic_grand_piano-mp3.js Note that in order to work with my example you're need to remove the header part data:audio/mpeg;base64,

Step 2: decode sound font to ArrayBuffer

You could implement this yourself but I found an API that does this perfectly (why re-invent the wheel, right?) - https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js Resource taken from - here

Step 3: Adding the rest of the code Fairly straightforward
var cNote  = acoustic_grand_piano.C2;
var byteArray = Base64Binary.decodeArrayBuffer(cNote); 
var context = new webkitAudioContext();

context.decodeAudioData(byteArray, function(buffer) {
    var source = context.createBufferSource(); // creates a sound source
    source.buffer = buffer;    
    source.connect(context.destination); // connect the source to the context's destination (the speakers)
    source.noteOn(0); 
}, function(err) { console.log("err(decodeAudioData): "+err); });

Since you're passing a String of Base64 content, you are not sending a raw file, and thus do not need to select a file. You can then decode the Base64 in PHP and write it to a new Audio file on the server.

Send a file (type audio) without input type="file" in ajax

1 Answers1