File upload on carrierwave S3

gem 'mini_magick'
gem "carrierwave"
gem 'fog'
gem "fog-aws"

==================================

Uploader on:

storage :fog

==================================

For this Storage on AWS With Fog

config/initializers/carrierwave.rb


CarrierWave.configure do |config|
  if Rails.env.development? || Rails.env.test?
    config.storage = :fog
  else   
    config.fog_provider = 'fog/aws'

    config.fog_credentials = {
      :provider               => 'AWS',       # required
      :aws_access_key_id      => ENV['AWS_ACCESS_KEY_ID'], # required
      :aws_secret_access_key  => ENV['AWS_SECRET_ACCESS_KEY'],  # required
      :region                 => ENV['REGION'], # optional, defaults to 'us-east-1'
      :endpoint               => "https://s3-#{ENV['REGION']}.amazonaws.com"
    }
    config.fog_directory  = ENV['AWS_BUCKET_NAME'] # required
    # config.fog_public     = false 
    config.fog_attributes = { :cache_control => 'max-age=315576000', :expires => 1.year.from_now.httpdate }
    # see https://github.com/jnicklas/carrierwave#using-amazon-s3
    # for more optional configuration
  end
end

=============================================================

For Storage on AWS

Add gem: gem 'aws-sdk'

On uploader file: storage :aws

CarrierWave.configure do |config|

  config.storage    = :aws

  config.aws_bucket = ENV['S3_BUCKET_NAME']

  config.aws_acl    = 'public-read'

  config.aws_authenticated_url_expiration = 60 * 60 * 24 * 7

  config.aws_credentials = {

    access_key_id:     ENV['AWS_ACCESS_KEY_ID'],

    secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],

    region:            ENV['AWS_REGION'] # Required

  }

  config.asset_host = ENV['CLOUDFRONT_ENDPOINT']

end

============================================================

development:
 
  AWS_SECRET_ACCESS_KEY: xxxxxxxxxxxxxxxxxxxx
  AWS_ACCESS_KEY_ID: xxxxxxxxxxxxxxxxxxxx
  REGION: xxxxxxxx
  AWS_BUCKET_NAME: xxxxxxx.xxx
production:
  # Database
 
  AWS_SECRET_ACCESS_KEY: xxxxxxxxxxxxxxxxxxxxxxxxxxx
  AWS_ACCESS_KEY_ID: xxxxxxxxxxxxxxxx
  REGION: uxxxxxxx
  AWS_BUCKET_NAME: xxxxxxxx.xxx

Multiple show image preview before Upload for Carrierwave

https://stackoverflow.com/questions/43729171/how-to-show-image-preview-before-upload

gem 'jquery-ui-rails'
gem "jquery-rails"
gem 'carrierwave'


//= require jquery





On controller


def create
   

    if params[:master][:image].present?
      params[:master][:image].each do |img|
        @master = Master.new(image: img)
        @master.save
      end
    end
    redirect_to masters_path, notice: 'Master was successfully created.'
  end















===============================================
ON form

remove title or description







<%= form_with(model: master, local: true) do |form| %>
  <% if master.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(master.errors.count, "error") %> prohibited this master from being saved:</h2>

      <ul>
      <% master.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image, id: "uploadBtn", :multiple => true, style: "display: none !important;" %>
    <input type="button" value="Choose File" onclick="document.getElementById('uploadBtn').click();" />

  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
 

<input id="filename" type="hidden" />
<br>
<div id="upload_prev"></div>
<% end %>




<script type="text/javascript">
  $(document).on('click', '.close', function() {
  $(this).siblings("img").toggle();
})

document.getElementById("uploadBtn").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadBtn')[0].files;
  for (var i = 0; i < files.length; i++) {
    (function(i) {
      $("#upload_prev").append('<div><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></div>');
      $("#upload_prev a:contains(" + files[i].name + ")")
        .on("click", function(e) {
          e.preventDefault();
          var close = $(this).closest("div")
            .next("div")
            .find(".close");
          if (!$(this).closest("div")
            .next("div").find("img").length)
            close
            .after(
              $("<img>", {
                src: URL.createObjectURL(files[i])
              })
            )
          else
            close.siblings("img").toggle()
        })
    })(i);
  }

  document.getElementById('filename').value = filename;
}
</script>

==================================================================

https://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload



<%= form_with(model: master, local: true) do |form| %>
  <% if master.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(master.errors.count, "error") %> prohibited this master from being saved:</h2>

      <ul>
      <% master.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image, id: "fileUpload", :multiple => true %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
  <!-- <input id="fileUpload" type="file" multiple /> -->
  <div id="image-holder"></div>
<% end %>


<script type="text/javascript">
  $("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });
</script>