ActiveAdmin jQuery File Upload

An ActiveAdmin 2.x plugin to use jQuery-File-Upload for file uploads in forms.

Features:

• AJAX uploads;
• chunked file uploads for large files;
• works with ActiveStorage.

The file is uploaded when selected, not when the form is submitted, that's why a record must exist for uploads.

Install

• Update your Gemfile: gem 'activeadmin_jfu_upload' (and execute bundle)
• Add at the end of your ActiveAdmin styles (app/assets/stylesheets/active_admin.scss):

@import'activeadmin/jfu_upload_input';

• Add at the end of your ActiveAdmin javascripts (app/assets/javascripts/active_admin.js):

//= require activeadmin/jfu_upload/jquery.fileupload//= require activeadmin/jfu_upload_input

• Use the input with as: :jfu_upload in Active Admin model conf

Why 2 separated scripts? In this way you can include a different version of jQuery-File-Upload if you like.

Options

data-options: permits to set jQuery-File-Upload options directly - see options list

Examples

# ActiveAdmin article form conf:# (optional) Upload action - an helper method is providedmember_action:jfu_upload,method: [:patch]dorenderjson: ActiveAdmin::JfuUpload::Engine::upload_file(request,params[:article][:cover],resource,:cover)end# Form setupformdo |f|
f.inputs'Article'dof.input:title# Field setup - hint with file presence check using ActiveStoragef.input:cover,as: :jfu_upload,hint: (object.avatar.attached? ? "Current: #{object.avatar.filename}" : nil)unlessobject.new_record?f.input:publishedendf.actionsend# Show setup (optional)showdoattributes_tabledo# ...row:coverdo |record|
image_tagurl_for(record.cover)ifrecord.cover.attached?endendactive_admin_commentsend

# Chuncked upload (chunk size: 100 Kb) - checking presence with CarrierWavef.input:cover,as: :jfu_upload,hint: f.object.cover? ? image_tag(f.object.cover.url) : '',input_html: {data: {url: jfu_upload_admin_article_path(resource.id),options: {maxChunkSize: 100000}}}unlessf.object.new_record?

More example in spec dummy app.

Notes

• The string field for the upload is used to store temp data, so it could be necessary to make it bigger
• If you want to customize the upload action take a look here
• Tested with CarrierWave uploader gem and with ActiveStorage
• To use this plugins with ActiveAdmin 1.x please use the version 0.1.8

Do you like it? Star it!

If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other Active Admin components.

Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.

Contributors

• Mattia Roccoberton - creator, maintainer

License

MIT