Загрузка вставляет значения в БД, сохраняет файл в папке, но не воспроизводит файл

Question

Здравствуйте, я сделал скрипт, который загружает файл в папку, сохраняет значение в БД и затем отображает его. Все это в порядке, файл загружен в папку, значение вставлено в БД, и дисплей отображается так, как требуется, но проблема в том, что когда я воспроизводю файл mp3 с не воспроизводимого файла, он говорит, что поврежден файл или неправильное расширение. Файл не поврежден, он воспроизводится до того, как я начну процесс загрузки

ts

   onSubmit() {

let loader = this.loadingCtrl.create({
    spinner: 'crescent',
    dismissOnPageChange: true
});

loader.present();
this.media.audioFile = this.fileData;
this.media.browser = true;
const media = new FormData();
media.append('file', this.fileData);
this.userData.uploadAudio(this.media) 
.map(res => res.json())
.subscribe(data => {
    loader.dismiss(); 


    if (data.success) {
        swal({
            icon: "success",
            text: data.message,
            buttons: {
                visible: false
            }
        });
    }
    else {
        swal({
            icon: "error",
            text: data.error,
            buttons: {
                visible: false
            }
        });
    }
},
err => {
    loader.dismiss();
    alert('An error occurred, please check your internet connection');
});
   }

html

  <div class="container">
<div class="row">
    <div class="col-md-6 offset-md-3">
        <h3>Choose File</h3>
        <form (ngSubmit)="onSubmit()">
            <div class="form-group">
                <input type="file" name="file"  />
            </div>
            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
</div>