Want more GoRails?

GoRails is packed full with 688 lessons just like this one.

Sign up to get full access or log in to your account and sit back.

System Testing File Uploads in Rails with Uppy and Dropzone Drag & Drop

January 26, 2022

Track your progress

Sign in to track your progress and access subscription-only lessons.

Log In

Your Teacher

Hi, I'm Chris. I'm the creator of GoRails, Hatchbox.io and Jumpstart. I spend my time creating tutorials and tools to help Ruby on Rails developers build apps better and faster.

About This Episode

Learn how to use system tests for file uploads with file input fields and drag & drop with Uppy and Dropzone

Notes

Resources

attach_file can be used to attach a file to a file input field.
drop can simulate a DragEvent dropping a file on an element
You can also execute Javascript to fake uploads with Uppy and other libraries as needed.

require "application_system_test_case"

class AccountImageTest < ApplicationSystemTestCase
  setup do
    @user = users(:one)
    login_as @user, scope: :user
  end

  test "user can upload new avatar" do
    visit edit_user_registration_path
    attach_file "user[avatar]", file_fixture("avatar.jpg")
    click_button "Update"
    assert_selector "img[src*='avatar.jpg']"
  end

  test "dropzone" do
    visit edit_user_registration_path
    find(".dropzone").drop File.join(file_fixture_path, "avatar.jpg")
  end

  test "uppy" do
    visit edit_user_registration_path
    input = page.driver.evaluate_script Capybara::Selenium::Node::Html5Drag::ATTACH_FILE
    input.set_file file_fixture("avatar.jpg")
    page.driver.execute_script <<~JS, find("#uppy"), input
      var el = arguments[0],
        input = arguments[1],
        file = input.files[0];

      window.uppy.addFile({
        name: file.name,
        type: file.type,
        data: file
      })
    JS
  end

Want to stay up-to-date with Ruby on Rails?

Join 82,464+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.