I am trying to follow the answers that I found [elsewhere](https://stackoverflow.com/questions/16722291/how-to-test-dropzone-js-upload-with-rails-cucumber-and-capybara) but for some reason, while there aren't any basic code errors, the following test fails anyway. if I look at the screenshot taken during the test, I can see that there is no "book cover" attached. So it looks like that the actual attachment of the jpg is not happening...? I am not quite sure how to go from here?

Test:

```
# frozen_string_literal: true

require 'rails_helper'

RSpec.describe 'creating a book', type: :system do
  scenario 'displays a cover image if there is one', js: true do
    visit new_book_path
    fill_in 'Book Title', with: 'Catcher in the Rye'
    el = find('#book_cover', visible: false)
    el.attach_file('db/sample/images/cover-1.jpg')
    click_on 'Create Book'
    expect(page).to have_css('div.cover-large img')
  end
end

```

The expected code that I have on my webpage - confirmed in a dev environment is something like

```
<div class="cover-large">
  <img src="...">
</div>

```

(and if there is no real image, the img tag is replaced with an svg tag that renders a dummy image).

EDIT: Here is the HTML source of the form in question around the #book\_cover element:

```
<div
  class="form-col col-wide dropzone dropzone-default dz-clickable"
  data-controller="coverdrop"
  data-coverdrop-max-file-size="3"
  data-coverdrop-max-files="1"
>
  <input data-coverdrop-target="input" data-direct-upload-url="http://127.0.0.1:3000/rails/active_storage/direct_uploads" type="file" name="book[cover]" id="book_cover" />
  <div class="dropzone-msg dz-message">
    <h3 class="dropzone-msg-title heading4 color-primary-dark">Drag cover image here or click to browse</h3>
    <span class="dropzone-msg-desc small color-primary-dark">3 MB file size maximum. Allowed are only image file types.</span>
  </div>
</div>

```

The corresponding CSS sets display=none for the input element with type=file.