Wednesday 28 December 2016

Upload multiple image and view convert into base 64 in rails



1. step :
 <script type="text/javascript">
window.onload = function(){
       
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");
       
        filesInput.addEventListener("change", function(event){
           
            var files = event.target.files; //FileList object
            var output = document.getElementById("result");
           
            for(var i = 0; i< files.length; i++)
            {
            var sep = '&&&=>'
     document.getElementById('fileDragName').value = document.getElementById('fileDragName').value + sep + files[i].name
     document.getElementById('fileDragSize').value =  document.getElementById('fileDragSize').value + sep + files[i].size
     document.getElementById('fileDragType').value = document.getElementById('fileDragType').value + sep + files[i].type
     // document.getElementById('fileDragData').value =document.getElementById('fileDragData').value + sep + files[i].slice();
         reader = new FileReader();
     reader.onload = function(event) {
       document.getElementById('fileDragData').value =  document.getElementById('fileDragData').value+sep+ event.target.result;}
     reader.readAsDataURL(files[i]);
                var file = files[i];
       
                //Only pics
                if(!file.type.match('image'))
                  continue;
               
                var picReader = new FileReader();
               
                picReader.addEventListener("load",function(event){
                   
                    var picFile = event.target;
                   
                    var div = document.createElement("div");
                   
                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";
                   
                    output.insertBefore(div,null);          
                 
                });
               
                 //Read the image
                picReader.readAsDataURL(file);
            }                              
         
        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
   
</script>
<style type="text/css">
.thumbnail{
       margin: 10px;
    /* margin-top: -95px; */
    margin-left: 4px;
    float: left;
    height: 74px;
    width: 77px;
}
.upload{right: -9px !important; top: -42px !important;}
</style>


<script type="text/javascript">


  function image(image_id){
      $.ajax({
        type:'GET',
        url: '<%= image_path %>',
        dataType: 'script',
        data: $.param({ image_attachment: {image_id: image_id}})
      });
   
    }

</script>
<% if @event.present? %>
<div id="edit_image" style="margin-top:70px;margin-left:150px;z-index:1;position:absolute;">
<% ImageAttachment.where(event_id: @event.id).each do |image| %>
    <img src="<%= image.avatar %>" width="77" height="74" style="vertical-align:bottom;">
    <a href="/events/edit/<%= @event.id%>" onclick="image(<%= image.id %>);" style="">Remove</a>
<%end%>
</div>
<%end%>
 <output id="result"  width="77" height="74"  />

<input type="hidden" name="file_name" value="" id="fileDragName">
<input type="hidden" name="size" value="" id="fileDragSize">
<input type="hidden" name="type" value="" id="fileDragType">
<input type="hidden" name="image_base64" value="" id="fileDragData">
<%= file_field_tag :avatar, name: "image_attachments[avatar][]", :multiple => true, :class => 'uploads user_picture img_file',  :id=>"files" %>

step - 2 : Put two gem in gem file
       1.  gem 'carrierwave' #, '0.11.0'
       2. gem 'carrierwave-base64'
       bundle
  go to model image_attachment or any model write below given line
     mount_base64_uploader :image, ImageUploader

step: 3 go to controller create method

 if params[:file_name] && params[:size] && params[:type] && params[:image_base64]
                       file_names = params[:file_name].split("&&&=>")
                       file_names.shift
                       sizes = params[:size].split("&&&=>")
                       sizes.shift
                       types = params[:type].split("&&&=>")
                       types.shift
                       bases = params[:image_base64].split("&&&=>")
                       bases.shift
                       bases.each_with_index do |base|
                        @event.image_attachments.create(:avatar=> base, :user_id => @event.user_id)
                     
                       end
                     end
Step 4: go to controller event permit parameters
      image_attachments_attributes: [:id, :event_id, :user_id, :avatar]

  image_attachment is third model 

No comments:

Post a Comment

Revert last commit or second last and more....

 Git revert commit_id -m 1 this command willl revert last commit  Git revert commit_id -m 2 this command will revert second commit with same...