I have article form which contains title and content. I want to add an file uploader in the form and I want this file uploader can upload an image or multiple images without the need to submit the article form.
I mean,when I create a new article and before I click submit the articel form, I would like to add a picture and I can upload pictures via file uploader and when I have selected a picture to be uploaded, the images will be sent directly to cloud storage and then the thumbnail will appear below the browse button. then when I click on the thumbnail, the image url will appear in the text area.
How to make file uploader like that? I've been browsing but didn't find a way, I just found how to display a thumbnail before upload to storage.
I use Carrierwave for image uploader and cloudinary for cloud storage.
and I have two table and a controller
Articles table
def change
create_table :articles do |t|
t.string :title
t.text :content
t.string :cover
end
Article_images table
def change
create_table :article_images do |t|
t.string :image
t.integer :article_id
t.timestamps
end
Article model
class Article < ApplicationRecord
mount_uploader :cover, ImageUploader
has_many :article_images, dependent: :destroy
accepts_nested_attributes_for :article_images, :reject_if => :all_blank, :allow_destroy => true
validates :title, :cover, :content, presence: true
validates :title, uniqueness: true
end
Article_image model
class ArticleImage < ApplicationRecord
mount_uploader :image, ImageUploader
belongs_to :article
end
Articles controller
class ArticlesController < ApplicationController
before_action :authenticate_admin!, only: [:edit, :update, :destroy]
before_action :set_article, only: [:show, :edit, :update, :destroy]
def index
@articles = Article.all
end
def show
end
def new
@article = Article.new
end
def edit
end
def delete_image
images = ArticleImage.find(params[:id])
article_id = images.article.id
images.destroy
respond_to do |format|
format.html { redirect_to article_show_url(article_id), notice: 'Image was successfully deleted.' }
format.json { head :no_content }
end
end
def create
@article = Article.new(article_params)
respond_to do |format|
if @article.save
format.html { redirect_to @article, notice: 'Article was successfully created.' }
format.json { render :show, status: :created, location: @article }
else
format.html { render :new }
format.json { render json: @article.errors, status: :unprocessable_entity }
end
end
end
def update
respond_to do |format|
if @article.update(article_params)
format.html { redirect_to @article, notice: 'Article was successfully updated.' }
format.json { render :show, status: :ok, location: @article }
else
format.html { render :edit }
format.json { render json: @article.errors, status: :unprocessable_entity }
end
end
end
def destroy
@article.destroy
respond_to do |format|
format.html { redirect_to articles_url, notice: 'Article was successfully destroyed.' }
format.json { head :no_content }
end
end
private
def set_article
@article = Article.find(params[:id])
end
def article_params
params.require(:article).permit(:title, :content, :cover, :cover_cache, article_images_attributes: [:id, :image, :image_cache, :_destroy])
end
end
EDIT :
here's my _form
<div class="form-grup">
<p>
<%= f.label :title %>:<br/>
<%= f.text_field :title %>
</p>
</div>
<div class="form-grup">
<p>
<%= f.label :cover %>:<br/>
<%= f.file_field :cover %>
<%= f.hidden_field :cover_cache, :value => f.object.cover_cache %>
</p>
</div>
<div class="form-grup">
<p>
<%= f.label :content %>:<br/>
<%= f.cktext_area :content, :ckeditor => {:customConfig => asset_path('ckeditor/config.js')} %>
</p>
</div>
<div class="form-grup">
<p>
<%= f.label :image, "Upload images:" %>
<%= f.fields_for :article_images do |image| %>
<%= render 'article_image_fields', f: image %><br/>
<% end %>
<%= link_to_add_association 'add image', f, :article_images %>
</p>
</div>
<div class="form-grup actions">
<%= f.submit %>
</div>
here's _article_image_fields
<% if f.object.image.present? %>
<div class="field">
<%= image_tag(f.object.image_url, size: "100x100") %>
</div> <br/>
<div class="field">
<%= f.file_field :image, type: :file %>
<%= f.hidden_field :image_cache, :value => f.object.image_cache %>
</div>
<div class="field">
<%= link_to_remove_association "remove image", f %>
</div>
<% else %>
<div class="field">
<%= f.file_field :image, type: :file %>
<%= f.hidden_field :image_cache, :value => f.object.image_cache %>
</div>
<div class="field">
<%= link_to_remove_association "remove image", f %>
</div>
<% end %>
in my form when I create a new article, in the file upload when I click browse and I've selected a picture, the picture is not directly uploaded to cloudinary but it took the wait submitted on a articles form. when I submit the article, the pictures will be uploaded
what I want is when I select a picture, the picture instantly uploaded to cloudinary without having to click on the submit button in my article form so that I can get url image to put in the text area.
