Force download mp3 from an url on all browers. Javascript/jQuery/reactJS

Question

I'm working for a project where I have to implement a functionality : mp3 download. I only got the hosted file url on Amazon S3 and when I click on a button it should trigger the download. I tried the download attribute for HTML5 but it doesn't work on mozilla, and its not possible for me.

<a href="www.myurl.cloudfront.net/mymp3.mp3" download> Download </a>

Do you guys have any solution to make it works on every browsers ? Or any other solutions..

Thanks !

Nael

score 0 · Answer 1 · answered Jun 07 '17 at 14:25

0

jQuery and React don't really work well together, at least not manipulating DOM nodes.

If you are using jQuery to do AJAX calls and React as your view layer, you could hook up an onClick handler to your tag so that when the user clicks, you get an AJAX request to wherever you want:

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(evt) {
    const { currentTarget } = evt;
    // currentTarget holds information of where you clicked, you can get your url from here
    $.ajax({
      //Your ajax call here
    }).then(data => //Handle your data, setState, etc.)
  }
  render() {
    <div>
      //Everything else
      <a onClick={this.handleClick} url='...'> Download</a>
    </div>
  }
};

answered Jun 07 '17 at 14:25

BravoZulu

1,140
11
24

Ok but how can I download the hosted mp3 even in AJAX ? – Nael Abou Chahine Jun 07 '17 at 14:34
I believe you can use `window.open(url)` and that should trigger a download – BravoZulu Jun 07 '17 at 14:38
No, the problem with mp3 files it that window.open() or other things like href, etc.. just open an html5 player – Nael Abou Chahine Jun 07 '17 at 14:40
check out this link https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link/19328891#19328891 – BravoZulu Jun 07 '17 at 14:42

Force download mp3 from an url on all browers. Javascript/jQuery/reactJS

1 Answers1