Upload audio file from this.media object to http server


I am using MediaPlugin in ionic2 to record a file and upload it to a server via an http post. Till now I have been successful in recording a file via mic and playing it. Below functions work for me


Now I want to upload this to an http server. Please help. I guess this object this.media needs to be converted to base64? Please help.

Thanks a lot!!

use transfer plugin to do so.

That completely depends on what the backend server is expecting.

Have you found a solution? I am also stuck here

@rapropos I am using firebase and I have to convert it into base64 bro. Could you give some suggestions

@mike_23 did you find a solution ?

@rapropos did you find a solution ? i’m looking for that too

I use ng2-file-upload.

I take the audio Blob and add a date and name:

uploadBlob.lastModifiedDate = new Date();
uploadBlob.name = uploadBlob.lastModifiedDate + ".wav";

Then I add it as a FileItem to the uploader;

 let file = new File();
 let fileItem = new FileItem(this.uploader, uploadBlob, {});

can u share your code for upload an audio file on server.

I use a modal for recording. Here is the uploading section.
I took these bits out from a larger page of code, which is a little old now but should get you going.
You will already need to have ng2-file-upload in place and your uploader on your page.
And you will need to be able to receive it on your server.

const URL = "https://mynodejs_api/api/v1/upload_audio";
this.uploader = new FileUploader({ url: URL, method: 'post' });
const authHeader: Array<{
      name: string;
      value: string;
    }> = [];
    authHeader.push({ name: 'Authorization', value: 'Bearer ' + this.auth.getToken() });
    const uploadOptions = <FileUploadOptions>{ headers: authHeader };

 this.uploader.onBeforeUploadItem = (item: FileItem) => {
      this.uploader.options.additionalParameter = {
        name: item.file.name,
        additional_param: '1234567',
        audiofile: item['audiofile']

uploadAudioFile(uploadBlob, postUpload) {
    uploadBlob.lastModifiedDate = new Date();
    uploadBlob.lastModified = uploadBlob.lastModifiedDate;
    uploadBlob.name = uploadBlob.lastModifiedDate + ".wav";

    const date: number = new Date().getTime();
    const file = new File();
    const fileItem = new FileItem(this.uploader, uploadBlob, {});

    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log(" UPLOADED SUCCESSFULLY");
      const response_json = JSON.parse(response);
      if (response_json.error_code) {
      } else {
        postUpload(response_json); // do what you want after success


which npm you are using for uploading audio ?

On the server?

on front end…side which npm you are using

I’m using ng2-file-upload

its work fine