Upload audio file from this.media object to http server

Ionic Framework ionic-v3
1

Hi,

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

this.media.startRecord();
this.media.stopRecord();
this.media.play();
this.media.stop();

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!!

2

use transfer plugin to do so.

3

That completely depends on what the backend server is expecting.

4

Have you found a solution? I am also stuck here

5

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

6

@mike_23 did you find a solution ?

7

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

8

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, {});
 this.mix_uploader.queue.push(fileItem);
 fileItem.upload();
10

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

11

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.setOptions(uploadOptions);

 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.queue.push(fileItem);
    fileItem.upload();

    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) {
        console.log("---ERROR");
        console.log(response_json.error_code);
        console.log(response_json.err_desc);
      } else {
        postUpload(response_json); // do what you want after success
      }

    };
  }
12

which npm you are using for uploading audio ?

13

On the server?
Multer.

14

on front end…side which npm you are using

15

I’m using ng2-file-upload

16

its work fine