Как правильно загрузить фото с помощью Dropzone JS и Active Storage?

Question

Я просмотрел всю необходимую документацию и несколько учебных пособий, но все еще не могу заставить его работать.

Когда я помещаю изображение в коробку, оно не работает. Он ведет себя так же, как при перетаскивании изображения в любом браузере.

Ниже показано изображение области перетаскивания;

Редактировать: Хорошо, поэтому я проверил на своей консоли js ошибок на странице и нашел это;

Я удалил jquery_u js, и, похоже, DropZone частично теперь работает с описанием

"Перетащите файлы сюда, чтобы загрузить", показывая

. Но когда я помещаю изображение в DropZone, оно загружается, а затем исчезает. Изображение едва сохраняется даже в течение 2 секунд.

Я снова проверил страницу на наличие ошибок js, и это все, что есть;

Мой routes.rb

Rails.application.routes.draw do
root 'pages#home'

  devise_for :users,
              path: '',
              path_names: {sign_in: 'login', sign_out: 'logout', edit: 'profile', sign_up: 'registration'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks'}

  resources :users, only: [:show]
  resources :cars, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'features'
      get 'location'
      delete :delete_photo
      post :upload_photo
    end
    resources :reservations, only: [:create]
  end
end

В моем контроллере

class CarsController < ApplicationController
  before_action :set_car, except: [:index, :new, :create]
  before_action :authenticate_user!, except: [:show]
  before_action :is_authorised, only: [:listing, :pricing, :description, :upload_photo, :delete_photo, :features, :location, :update]

def upload_photo
    @car.photos.attach(params[:file])
    render json: { success: true }
  end

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to upload_photo_car_path(@car)
  end

Это это то, что у меня есть в моем коде

<div class="row">
    <div class="col-lg-3">
        <%= render 'car_menu' %>
    </div>
    <div class="col-lg-9">
        <div class="card">

            <div class="card-header">
                Photos
            </div>

            <div class="card-body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-offset-1 col-lg-12">
                            <form action="/cars/<%= @car.id %>/upload_photo" class="dropzone" id="myDropzone"></form>
                        </div>

                        <div class="col-lg-3">
                            <% @car.photos.each do |photo| %>
                                <div class="card">
                                    <div class="card-image">
                                        <%= link_to 'Remove', delete_photo_car_url(photo_id: photo.id, id: @car.id), 
                                                method: :delete,
                                                data: { confirm: "Are you sure?" },
                                                class: "delete delete-file is-pulled-right",
                                                style: "z-index: 100" %>

                                        <figure class="figure">
                                            <%= image_tag url(photo) %>
                                        </figure>
                                    </div>
                                </div>
                            <% end %>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    Dropzone.options.myDropzone = {
        paramName: "file",
        maxFilesize: 2,
        acceptedFiles: "image/*",
        init: function() {
            this.on('complete', function (file) {
                location.reload();
            })
        }
    }
</script>

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
#gem 'pg'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  #Provides better error page for Rails and other Rack apss.
  gem 'better_errors', '~> 2.5', '>= 2.5.1'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'bootstrap', '~> 4.4.1'

gem 'devise', '~> 4.7', '>= 4.7.1'
gem 'jquery-rails'

gem 'omniauth', '~> 1.9'

gem 'omniauth-facebook', '~> 5.0'

#new gems
group :development, :production do
  gem 'capistrano', '~> 3.11', require: false
  gem 'capistrano-bundler', require: false
  gem 'capistrano-rails', '~> 1.4', require: false
  gem 'capistrano-passenger', '~> 0.2.0'
  gem 'capistrano-rbenv', '~> 2.1', '>= 2.1.4', github: 'capistrano/rbenv', require: false
end
#gem 'capistrano', '~> 3.11'
#gem 'capistrano-rails', '~> 1.4'
#gem 'capistrano-passenger', '~> 0.2.0'
#gem 'capistrano-rbenv', '~> 2.1', '>= 2.1.4'

gem 'jquery-ui-rails', '~> 5.0'

Пожалуйста, я что-то пропустил?

Есть ли ошибка в моей маршрутизации?

Нужно ли создавать модель для фотографий?

Буду признателен за помощь!

Бег

Rails 6.0.2.1
Ruby 2.6.5