Awesome
Volt::Upload
File upload support for Volt. Supports storing to the database, local storage and Cloudinary (using the cloudinary gem and cloudinary_js). Based on code by @andrew-carroll
Installation
You must first add the following line to your application's Gemfile:
gem 'volt-upload', github: "alexandred/volt-upload"
And then execute:
$ bundle install
Add this line to your component's dependencies.rb
file:
component 'upload'
Setup
We shall use the following example: a user collection that has a picture, some photos and a PDF file. We shall first create a collection which contains the logic of your storage. In your component, add the following model:
class Attachment < StorageBase
end
By default, volt-upload assumes that the name of this class is Attachment
but you may name it whatever you like and provide the class name in the logic to come.
We can now describe the files on the user collection in the attachment collection as follows:
saves :picture, for: :user, in: :db
saves :photos, for: :user, in: :cloudinary
saves :pdf, for: :user, in: :local
A default container for the storage can be provided as follows:
default_container :db
The supported containers are:
db
- databaselocal
- local storagecloudinary
- in a cloudinary cloud
We now have to complement the storage logic inside the user collection. Insert the following into your component's user collection:
attachment :picture
attachments :photos
attachment :pdf
If you want to provide a custom StorageBase
class, you can just pass the collection name as follows:
attachment :picture, collection: :picture
Usage
Continuing the user example, we will add an input field for the picture attachment for the current user. Add the following to the relevant form:
<:upload:main collection="{{ Volt.current_user }}" attachment="picture"/>
To show the image after a successful upload (attachments stored in the cloudinary container require a refresh to show), you can use the following:
{{ raw Volt.current_user.picture.then {|picture| "#{picture.url}" } }}
This binding will be simplified greatly in future versions.
Local Storage
Attachments that are stored in the local container are saved in the public
folder.
Cloudinary
You must provide a configuration file if you intend to use Cloudinary. volt-upload expects to find it at "config/cloudinary.yml". To download an automatically generated config file, visit this page: https://cloudinary.com/console/cloudinary.yml
volt-upload provides a 'cloudinary_url' (instead of url) helper to generate a URL using Cloudinary transforms. For example:
cloudinary_url(size: "50x50", gravity: "face", crop: "fill")
will generate a URL for an image that is 50x50 pixels^2 with face detection.
Buffers
Using a buffer with volt-upload is easy. Following the user example, create a buffer for your user in the relevant action for the page:
page._user_buffer = store.users.buffer
Then insert the following into the user form:
<:upload:main buffer="{{ page._user_buffer }}" attachment="picture"/>
To access the buffered image (before it has been uploaded), you can use the following binding:
{{ raw page._user_buffer._picture_buffer }}
We can now save the user and persist the images in the form callback:
page._user_buffer.save! do |user|
user.save_buffered_attachments([:picture])
end
Note that buffers are currently only supported on singular attachments for the moment.
Help
If you have any problems with this component, feel free to contact @alexandred at gitter.im/voltrb/volt.
Credits
- Ryan Stout for the fantastic Volt framework
- Andrew Caroll for the base uploading functionality and inspiration
- The rest of the Volt framework contributors