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();

});

the implicit global `event` object is obsolete. I'd say use `addEventListener` but you're using jQuery, so there's absolutely no excuse for using `on*` event attributes. — zzzzBov, Jul 12 '16 at 18:25
As I noted, my javascript is a bit rusty, so just so I understand what you are saying, I should remove onclick and onchange from the `` tag? Would I trigger the onclick and onchange with something like this? `$( "input[type=filepicker]" ).click(function() {}` and `$( "input[type=filepicker]" ).change(function() {}` — brianfidler, Jul 12 '16 at 18:36
Either use jQuery's built in event handling functions, or use addEventListener() on your input element instead, binding to a function that takes an event object as its argument. Then, you can use that event object inside the function. — ManoDestra, Jul 12 '16 at 18:37
@brianfidler, you're asking me. Why aren't you asking yourself and giving that code a try? To be blunt, I think you need to spend a little more time reviewing the jQuery API and maybe looking over tutorials before asking on Stack Overflow. — zzzzBov, Jul 12 '16 at 18:39
@zzzzBov I have tried it and it isn't triggering after my media has upload. This wasn't my first attempt, I've been trying to solve this for a number of hours. — brianfidler, Jul 12 '16 at 19:26

score 0 · Answer 1 · answered Jul 12 '16 at 18:31

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();

});

Thanks Jacques, there were a few syntax issues with this code but it is similar to what i've been testing. However when the media completes uploading the change is never triggered so this function never runs. I've tried with the syntax above and also with `.change(function(event))`. — brianfidler, Jul 12 '16 at 19:26
@brianfidler Glad to help! If this answer worked for you please accept it as the correct answer. — Jacques Marais, Jul 12 '16 at 19:27

JavaScript event handling and Firefox

1 Answers1