Skip to content

Listen for FilePond events

Tap into FilePond events to trigger custom logic when users interact with the Image Hopper field. This example demonstrates listening for the file-added event.

Listen for FilePond events and respond to user interactions:

// Listen for FilePond events and log when a file is added.
gform.addAction('image_hopper_post_filepond_create', function(filePond, $form, currentPage, formId, fieldId, entryId, files, field, filePondObject) {
  var pond = jQuery('#field_' + formId + '_' + fieldId).find('.filepond--root')[0];

  pond.addEventListener('FilePond:addfile', function(e) {
    console.log('New file added', e.detail.file);
  });
});

Note: You can listen to many other FilePond events beyond FilePond:addfile, such as FilePond:processfile, FilePond:removefile, and others.