I created a scaffold with the name "property", I need to add images next to it preferably in a different model referencing (1 property can have many images), where the user can select more than an image.
The idea would be to create a button to add more images and have a preview before saving them, with a remove button and a radiobutton to define which will be the cover image in every preview.
Is it possible?
You can use the FileReader function of javascript for the previews, as follows:
JSFiddle with the code below working: link
<!-- No seu HTML -->
<div class="upload">
<img>
<input type="file" name="files[]">
</div>
<a href="javascript:;">Adicionar imagem</a>
// No seu arquivo js
$(document).ready(function(){
var uploadClone = $('.upload:first').clone();
$('a').on('click', function(e) {
e.preventDefault();
$('.upload:last').after(uploadClone.clone());
});
$(document).on('change', "input", function(e){
var preview = $(this).siblings('img');
var input = $(e.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.attr("src", image_base64);
};
reader.readAsDataURL(file);
});
});
To actually deploy, server-side, you can use the CarrierWave
There's even a page on the wiki that you can base yourself on how to do: link
Sources: link