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