Browser compatibility Issue : Upload and Preview using Paperclip

[Mathew Vivek]

Hi,

I am using uploading(img) process in my app using paperclip. My new
requirement is to preview before submitting.

My new requirement works only in FIREFOX not in IE,CHROME,SAFARI. My
code looks this.

<%= form.file_field :image, :onchange=> "setImage(this);" %>

function setImage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src =
file.files.item(0).getAsDataURL();

if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display =
'block';
}

Thanks in Advance
Mathew

--
Posted via http://www.ruby-forum.com/.

[Tim Shaffer]

You basically need to preview an <input type="file"> before it has been submitted? This sounds more like a JavaScript question than a Rails question. 

[Mathew Vivek]

Tim Shaffer wrote in post #1022142:

> You basically need to preview an <input type="file"> before it has been
> submitted? This sounds more like a JavaScript question than a Rails
> question.

This issue corresponds to javascript+css concept only.

[Colin Law]

On 15 September 2011 14:58, Mathew Vivek <li...@ruby-forum.com> wrote:
> Tim Shaffer wrote in post #1022142:
>> You basically need to preview an <input type="file"> before it has been
>> submitted? This sounds more like a JavaScript question than a Rails
>> question.
>
>  This issue corresponds to javascript+css concept only.

In that case a Ruby on Rails mailing list may not be the best place to get help.

But in your situation the first thing I would try is to run it in
firebug in firefox to check for errors. Also paste the complete page
html into the w3c html validator to check for valid html. Differences
between browsers is often caused by invalid html.

Colin

--
gplus.to/clanlaw

[Mathew Vivek]

Colin Law wrote in post #1022182:

Thanks Colin for your idea..
I have checked my HTML that has some errors.
But now i changed. It is valid now but the issue remains the same.

[Colin Law]

And running it with firebug in firefox?

Colin

--
gplus.to/clanlaw

[Mathew Vivek]

Colin Law wrote in post #1022271:

> On 16 September 2011 07:39, Mathew Vivek <li...@ruby-forum.com> wrote:

>>> get help.

>
> And running it with firebug in firefox?
>

I didnt see any errors in firebug.
I have tried another script right now. it is working in
ubuntu(firefox,chrome)..
I have to check the windows os and will update it.

thanks once again.

[Matt Jones]

On Sep 15, 6:38 am, Mathew Vivek <li...@ruby-forum.com> wrote:
> Hi,
>
>  I am using uploading(img) process in my app using paperclip. My new
> requirement is to preview before submitting.
>
>  My new requirement works only in FIREFOX not in IE,CHROME,SAFARI. My
> code looks this.
>
>   <%= form.file_field :image,  :onchange=> "setImage(this);" %>
>
>    function setImage(file) {
>         if(document.all)
>             document.getElementById('prevImage').src = file.value;
>         else
>             document.getElementById('prevImage').src =
> file.files.item(0).getAsDataURL();
>

To be honest, I'm surprised this works at all - file fields are
notoriously resistant to being read via JS, for security reasons. If
this is a critical part of your application, you may need to go to an
alternative method (Flash, for instance) to have it work reliably
across browsers and security settings.

--Matt Jones