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

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

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

Discussion

Loading...
logo Created with Sketch.

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

© 2022 GoRails, LLC. All rights reserved.