4

I'm using rails 3.2.11. I have implemented file upload concept. It is working fine with Firefox and chrome browser.

Form

<iframe id="upload_target" name="upload_target" style="display:none;"></iframe>
<%= form_tag(url_for(:action => 'add_image'), 
                    :target => 'upload_target',
                    :id => 'add_image_form',
                    :enctype => 'multipart/form-data', :multipart=>true) do %>
    <%= text_field 'image_asset', 'name', :size => [60,40].min, :maxlength => "60", :id => "focus", :style=>"display:none", :value=>"site_logo" %>
    <%= text_field 'image_asset', 'image_type', :value=>"Icon",:style=>"display:none"%>
    <input type="file" id="file" name="image_form_file" size="36" style="display:none;" /> 
    <a href="#" class="button" onclick="$('#file').click();">Upload a new logo image</a>
    <a href="#" class="button green" onclick=" $('#add_image_form').submit();">Save</a>
<% end %>

JQuery

    $('#file').live("change",function() {
       $('#add_image_form').submit();
       setTimeout(function(){
        $.ajax({
                type: "GET",
                beforeSend: function(xhr){ xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
                dataType: "html",
                url: "/get_image",
                data: "record_id=<%= @page.id%>&format=html",

                success: function(data){
                    $('#site_logo').html(data);
                    var new_image = $('#site_logo').find("img").attr('src');
                },
                error: function(){
                }
            });
    }, 6000)    

I have an issue only with in IE 9, IE 10 browser. The Java script console throws "SCRIPT5: Access is denied."

I have tried with allow the permission for the folder location but not useful. C:\Users[USERNAME]\AppData\Local\Microsoft\Internet Explorer\DOMStor C:\Users[USERNAME]\AppData\Local\Packages\windows_ie_ac_001\AC\Microsoft\Intern‌​et Explorer\DOMStore

Any Suggestion

Thanks

prabu
  • 6,121
  • 8
  • 35
  • 39
  • 2
    You trouble is in click-submit sequence. Take a look [here](http://stackoverflow.com/a/14578385/1206628). – Kolya Ay May 16 '13 at 01:03
  • Why do you have inline event handlers if you are using jquery? Also, remember that live has been deprecated/removed. – Eddie Monge Jr May 23 '13 at 20:37

2 Answers2

1

Try to wrap your button anchor in label tags:

<input type="file" id="file" name="image_form_file" size="36" style="display:none;" /> 
<label for="file" class="button">Upload a new logo image</label>

Clicking the label will trigger the file input without invalidating the form for internet explorer.

(Tested in IE9 & IE10)

Martijn Bleeker
  • 115
  • 2
  • 6
0

Using an iframe for file uploads is impossible for the javascript code to determine the HTTP status code of the servers response in IE10.

https://cmlenz.github.io/jquery-iframe-transport/#section-13

You have to return a success response and evaluate the json data to decide if it was an success or not response.

Piioo
  • 759
  • 10
  • 24