13

I need to preview an image prior to submitting a form. I work with Rails 3 and needs something that is browser compatible. Any ideas how I can achieve that?

Henri
  • 983
  • 3
  • 11
  • 29
  • 1
    You should take a look at: http://blueimp.github.io/jQuery-File-Upload/ . I know... it's a JQuery tool and not a Gem or a special form feature. But! It's really easy to use and it integrates very well in RoR... Plus, it will enhence your User Experience! If you're not interested in using this plugin, I could still post an answer and explain how you could achieve what you want to do as I've already done it for a project. :) – Kulgar Aug 12 '13 at 15:10
  • Thanks for the answer Kulgar. I already checked the gem but it really doesn't fit my needs. I actually just want to show one image uploaded prior to the user pressing the submit button. I didn't find a solution that works on safari yet. – Henri Aug 12 '13 at 15:50
  • Ok then, I'll post my answer. :) – Kulgar Aug 12 '13 at 16:47
  • Same without Rails: http://stackoverflow.com/questions/14069421/in-html5-how-to-show-preview-of-image-before-upload – Ciro Santilli OurBigBook.com Nov 07 '14 at 21:19
  • Similar but more focus on IE: http://stackoverflow.com/questions/5593866/railsjavascript-image-preview-before-upload – Ciro Santilli OurBigBook.com Nov 07 '14 at 21:20

2 Answers2

32

So! :) The main idea is to use the FileReader Javascript Class, which is really handy for what you need to do.

You just have to listen to the "change" event on your file input and then call a method that will use the "readAsDataURL()" method of the FileReader class. Then you just have to fill the source of a "preview img tag" with the returned result of the method...

I've wrote you a simple jsFiddle that achieves what you want. You can see my code below: 

<!-- HTML Code -->
<div class="upload-preview">
    <img />
</div>
<input class="file" name="logo" type="file">    

//JS File
$(document).ready(function(){
    var preview = $(".upload-preview img");

    $(".file").change(function(event){
       var input = $(event.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);
    });
});

And in the Mozilla Documentation, you have another example (surely more robust). This solution should work with Safari (version 6.0+).

This is the only way I know to preview an image prior to submitting a form, but I think it is quite a common way. Of course it has nothing to do with Ruby On Rails as we only use Javascript here... It would be impossible to do it using Rails only as you would have to upload the image before rendering it. (As Rails is server side, I think you perfectly understand why. :) )

jjj
  • 4,822
  • 1
  • 16
  • 39
Kulgar
  • 1,855
  • 19
  • 26
  • Many thanks for your answer. I will try to implement it today :) – Henri Aug 12 '13 at 18:12
  • Hi Kulgar, do I need to install anything(like jquery) to use the above code? – learner Feb 14 '15 at 03:38
  • Also please tell me where I have to write these code. I mean in which file I have to write javascript **(under assets/javascript/controller_name.js?)** and in which file I have to write html code **(inside app/views?)** in rails? Sorry may be its too basic but I'm pretty new to rails. – learner Feb 14 '15 at 03:57
  • @learner: Yeah you need to install JQuery to use the above code, but as the question was about Rails 3, JQuery-rails is normally one of the default gems in a Rails project and thus JQuery is already installed when you create a new app (with Rails 3.1+). You would rather put this code in the controller_name.js file associated to the view you're rendering, or in a more generic js file (but not in application.js). All you have to do is to be one hundred percent sure that the file where you put this code is loaded when you access the webpage where you want to show a preview of the uploaded image. – Kulgar Feb 16 '15 at 12:56
  • Please note that Mozilla Documentation gives you examples where you don't need JQuery: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications – Kulgar Feb 16 '15 at 13:02
1

HTML:

<input type="file">
<div id="image_preview"></div>

JS (require jquery): 

$(document).ready(function(){
   $('input[type="file"]').change(function(){
     var image = window.URL.createObjectURL(this.files[0]);
     $("#image_preview").css("background-image", "url(" + image + ")");
   });
});
Abel
  • 3,989
  • 32
  • 31