Want more GoRails?

GoRails is packed full with over 350 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

#430 ยท January 26, 2022

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



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

  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']"

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

  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];

        name: file.name,
        type: file.type,
        data: file

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.