Can't upload .wav file from safari browser, chrome worked using angular 7

Question

I'm using angular 7 as frontend and node js as backend, and I need to upload audio file to s3. When I upload .wav audio files from safari browser its showing internal server error, and when I look on the formdata which I have sent with post URL having an error like I have attached. The issue is only when try to upload .wav file from safari browser and works when trying with .mp3 files. And all type of files worked in chrome.

Here is the code, upload-file.component.html

upload-file.component.ts

uploadTracks(event) {
var re = /(?:\.([^.]+))?$/;

if (re.exec(event.target.files[0].name)[1] != 'mp3' && re.exec(event.target.files[0].name)[1] != 'wav') {
  this._snackBar.open('Please add mp3 files', '', {
    duration: 2000,
  });
} else {
  var files = event.srcElement.files;
  this.loadingbar = true;

  var video = document.createElement('audio');
  video.preload = 'metadata';
  let duration;
  video.addEventListener('loadedmetadata', (res,) => {
    window.URL.revokeObjectURL(video.src);
    duration = video.duration;
    this.addNewSongService.trackUpload(
      event,
      this.uploadurl,
      duration
    );
  });
  video.src = URL.createObjectURL(files[0]);

  this.fileName = event.target.files;
  this._addNewSongService.trackArraySubscribed.subscribe((res) => {
    this.fileUrl = res;
  });

  this._addNewSongService.listingArrayTracks.subscribe((track) => {
    this._addNewAlbum.getLoggedInDetails.emit(track);
    this.fileUrl === '' || this.fileUrl === undefined
      ? (this.fileUrl = track)
      : console.log('track already set', this.fileUrl);
    if (track != '' && track != undefined) {
      this.uploadedUrl = event.target.files[0].name;
    }
  });
}

}

addNewSongService.ts

trackUpload(event, url, duration): Observable {
var s = true;
const fileList: FileList = event.target.files;
this.tracks = '';
if (fileList.length > 0) {
  const file: File = fileList[0];
  if (
    file.type != 'image/gif' &&
    file.type != 'image/tiff' &&
    file.type != 'image/jpeg' &&
    file.type != 'image/png'
  ) {
    const file_ext = file.name.substr(file.name.lastIndexOf('.') + 1);
    const fileName = file.name.split('.').slice(0, -1).join('.');
    
    this.new_file_name =
      'Single_tracks/' + new Date().getTime() / 1000 + '.' + file_ext;

    const formData: FormData = new FormData();

    formData.append('uploadFile', file, this.new_file_name);
    console.log("formData==", formData)
    this.http
      .post(url, formData)
      .pipe()
      .subscribe(
        (data) => {
          this.tracks = {
            trackName: data['result'].files.uploadFile[0].name,
            trackLength: duration,
            fileName:fileName
          };
          this.trackList.next(this.tracks);
          this.uploadUrl.next(this.tracks);
        },
        (error) => {
          console.log("trackUpload error==", error)
        },
      );
  } else {
    return observableThrowError('This file type not supported');
  }
}

}

Please help

Can't upload .wav file from safari browser, chrome worked using angular 7

0 Answers