How to block a form to be sent while the pictures are not uploaded using Refile?

Question

Im using refile to upload some images inside my application.

This is my view.

<span class="file-upload">
    <% if current_user.talent.digital_full_length_1.present? %>
        <figure class="uploaded-img" style="background-image: url(  <%= 
        asset_path ix_refile_image_url(current_user.talent, :digital_full_length_1, w: 300, h: 300, fit: 'fill', bg: '0fff') %>);">
            <a href="" title="Remove" class="remove-item">Remove</a>
        </figure>

        <button type="button" class="btn-upload trigger-file-upload hidden"></button>
    <% else %>
        <figure class="uploaded-img hidden" style="background-image: url();">
            <a href="" title="Remove" class="remove-item">Remove</a>
        </figure>

        <button type="button" class="btn-upload trigger-file-upload"></button>
    <% end %>
    <span class="upload-hint">Full Length</span>
    <%= ff.attachment_field :digital_full_length_1, direct: true, presigned: true, class: "user_top_five" %>
</span>

This is my Model.

#talent.rb
  attachment :digital_full_length_1, type: :image

And my configuration:

require "refile/s3"

aws = {
  access_key_id: Rails.application.secrets.S3_ACCESS_KEY_ID,
  secret_access_key: Rails.application.secrets.S3_ACCESS_KEY_SECRET,
  region: Rails.application.secrets.S3_REGION,
  bucket: Rails.application.secrets.S3_BUCKET
}

Refile.cache = Refile::S3.new(prefix: "cache", max_size: 15.megabytes, **aws)
Refile.store = Refile::S3.new(prefix: "store", **aws)

The problem. Sometimes the user put some large files, press submit on the form, and the request is broken (timeout, etc..)

Is there a way to avoid the form to be sent while the file is not uploaded with refile?

Thanks

Answer 1

Reference this section of their documentation https://github.com/refile/refile#5-javascript-library. There is an example of how to do just that with their upload:start and upload:success listeners.