JavaScript event handling and Firefox

Question

I have a form on my site that allows visitors to upload media using the Filestack/filepicker.io API (filestack.com). After the upload is successful, Filestack returns a JSON object that provides details on the upload.

It works in Chrome, Safari, iOS, however is not working in Firefox. In Firefox it generates this error: ReferenceError: event is not defined

My understanding is that Firefox handles events differently than browsers using Webkit (see this article: ReferenceError: event is not defined error in Firefox ), however my javascript skills aren't developed enough to help me troubleshoot this without some help.

I'm using an onchange event that triggers the function setVideoUrl(); Can anybody help me understand how to update this code so that it declares event handlers correctly and will work in Firefox?

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" onchange="return setvideourl();">

function setVideoUrl(){
    var myvideourl = event.fpfile.url;
    var myvideofilename = event.fpfile.filename;

    jQuery("#input_1_14").val(myvideourl);
    jQuery("#input_1_11").val(myvideofilename);

    jQuery("#input_1_11").attr("readonly", true);
    jQuery("#input_1_11").show();
    jQuery("#videochoice").hide();
    jQuery("p.required-field").hide();
    jQuery("#choosedifferentvideo").show();
}

Update: I am now using the code below however when the media is uploaded to Filestack and it returns the JSON the function never triggers in any browser.

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()">


jQuery( 'input[type="filepicker"]' ).on( "change", function(event){
  alert('function triggered');

  var myvideourl = event.fpfile.url;
  var myvideofilename = event.fpfile.filename;

  jQuery( "#input_1_14" ).val( myvideourl );
  jQuery( "#input_1_11" ).val( myvideofilename );

  jQuery( "#input_1_11" ).attr("readonly", true);
  jQuery( "#input_1_11" ).show();
  jQuery( "#videochoice" ).hide();
  jQuery( "p.required-field" ).hide();
  jQuery( "#choosedifferentvideo" ).show();

});

Answer 1

Use the jQuery on method instead of using in-HTML event attributes:

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" />

jQuery( 'input[type="filepicker"' ).on("change", function(event){
    var myvideourl = event.fpfile.url;
    var myvideofilename = event.fpfile.filename;

    jQuery( "#input_1_14" ).val( myvideourl );
    jQuery( "#input_1_11" ).val( myvideofilename );

    jQuery( "#input_1_11" ).attr("readonly", true);
    jQuery( "#input_1_11" ).show();
    jQuery( "#videochoice" ).hide();
    jQuery( "p.required-field" ).hide();
    jQuery( "#choosedifferentvideo" ).show();

});