3

I am trying to follow the answers that I found elsewhere 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.

tkhobbes
  • 368
  • 3
  • 16
  • Can you share what the markup/DOM looks like around the #book_cover element? Seems like maybe it's possible that it's not of `[type="file"]` and so the upload isn't designed to succeed there. Can you also try the third solution here (the one that invokes a click on element)? https://www.rubydoc.info/gems/capybara/Capybara%2FNode%2FActions:attach_file – Phil Aug 31 '22 at 13:30
  • added the markup as requested, as EDIT to bottom of question. It is definitifely type=file? Using the last example, I got an error: Failure/Error: find('#book_cover', visible: false).click Selenium::WebDriver::Error::InvalidArgumentError: invalid argument – tkhobbes Sep 01 '22 at 09:29

2 Answers2

1

If you are working with a newer version of capabraya you can try:

find(".dropzone").drop(Rails.root.join("path/to/image"))
Gino
  • 1,043
  • 16
  • 27
  • 1
    This is super clean and works great. If you are using Rails file fixtures, it can be even cleaner, as in `find(".dropzone").drop(file_fixture("path/to/image"))` – moveson Aug 30 '23 at 15:22
0

I was able to get the upload to complete on dropzone's official website here: https://www.dropzone.dev/js/

image = './spec/fixtures/images/space_sloth.jpg'
page.attach_file(image) do
  page.find('.dropzone').click
end

That works for me on the Dropzone site. Is there something in the DOM that you can click that invokes the Windows Explorer / MacOS Finder file chooser? You should use that element in the code block.

Phil
  • 886
  • 7
  • 20
  • This also works for me: `find('input[type="file"]', visible: false).set(image)` --- Maybe try avoiding using a css ID altogether in locating the element and try something else. – Phil Sep 02 '22 at 13:53
  • thanks - the solution in the comment does not work. Same error as above - nothing seems to get attached. The solution in your main answer leads to a DIFFERENT error: Failure/Error: @book = Book.new(new_params) ActiveSupport::MessageVerifier::InvalidSignature: ActiveSupport::MessageVerifier::InvalidSignature If I check the screenshot - something SEEMS to be happening, at least there is a hint of a progress bar being rendered....? – tkhobbes Sep 05 '22 at 12:00
  • Sorry I couldn't be of more help. I think at this point I'd try to implement some code locally against the `dropzone.dev` site, and if that works, then work with your dev team and get an understanding of whether they are implementing dropzone differently. There isn't anything I'm seeing that would indicate that Dropzone poses any challenge to Capybara. One other thing I'll suggest is to make sure that the Dropzone code isn't sitting in some type of iFrame, because you'll need to set the context for it first. – Phil Sep 07 '22 at 15:02
  • 1
    thanks. I love the "work with your dev team" part of your comment. I am just a hobby programmer trying to program a little database for myself (well and my wife) :) – tkhobbes Sep 07 '22 at 16:01