I am currently working on a new site under .NET MVC platform and I am trying to implement an asynchronous user upload image through iframe. Although I almost complete my task and is fully functional in any other browser fails in IE 9 with the follow error: Microsoft JScript runtime error: Access is denied. It looks like a security concern. Allow me to describe my issue using below code snippets with comments:
1. I have an html form with an input file that its visibility is hidden. Inside the form there are one input element with type="file" and a submit button (also hidden).
<div class="brandLogo">
<p>#identity._RetailerLogo.Caption</p>
<div id="LogoContainer" class="imgLogo">
<img id ="CompanyLogo" src="#DefaultRetailerImage" alt="" title="#Model._ADD_LOGO_IMAGE">
</div>
<p class="txtR">
<a id="UploadLogo" href="#" style="position: absolute; left: -999em; top: -999em;">Upload
</a>
</p>
<form id="UploadForm"
action="#Url.Action("editLogo", "Profile")"
method="POST" enctype="multipart/form-data"
name="UploadForm"
target="UploadTarget"
style="position: absolute; left: -999em; top: -999em;">
<input name="UploadLogoFile" id="UploadLogoFile" type="file" onchange="clickUploadButton();" />
<input type="button" id="SubmitLogoForm" value="Save Image" />
</form>
<iframe id="UploadTarget" onload="UploadImage_Complete();" name="UploadTarget" style="position: absolute;
left: -999em; top: -999em;"></iframe>
The html form tries to post the file to an iframe via javascript. Both form and iframe are on my local project (asp.net mvc) under the same domain ( i run this under localhost).
I am using an on change event on the input element to capture that user selected something and to trigger the submission of the form with ajax call. So when I call via javascript: $("#formID").submit() I get an access denied error.
Any help would be appreciated
I saw this IE bug before,finally I changed my method .triggering change event of input element programmically consider as security risk by IE :( (so stupid IE)
By default IE not let you trigger file element change, if you want you this feature can use ajaxuploader or fileuploader
var uploader = new qq.FileUploader({
// pass the dom node (ex. $(selector)[0] for jQuery users)
element: document.getElementById('file-uploader'),
// path to server-side upload script
action: '/server/upload'
});
Related
I'm currently trying to automate part of our web application, mainly a form of #mentioning similar to facebook. In the front end when a user types # into a text input the API calls the list of users and displays them in a box that appears. This element is currently at the end of the DOM and not visible until the javascript triggers when the # is typed.
My selenium code uses send_keys to populate the #namehere but the user window element doesn't appear, even if i do it manually while the browser is opened via selenium
I've tried using the upkey event from Action Chains, injecting javascript to trigger the event, clicking back onto the text input to make sure its focused but nothing works. This happens in both chrome and firefox
Literally searched everywhere, any ideas?
Feature step:
And i create a post titled "#James"
implementation:
#when('i create a post titled "([^"]*)"')
def step_impl(context, text):
page = ActivityStreamPage.NewPost(context)
page.post_input.click()
page.post_input.send_keys(text)
element:
'post_input': (By.CLASS_NAME, "js-post-textarea")
web element:
<div class="js-post-textarea js-edit-content editor__editable"
contenteditable="true" autocomplete="off" autocorrect="off"
autocapitalize="off" placeholder="Write a post or #mention to notify
someone"><span class="atwho-query">#</span><br></div>
user box:
<div class="atwho-view" id="at-view-64" style="display: none; top:
135px; left: 440px;">
<ul class="atwho-view-ul">
<li class="mention__item cur">
<p class="mention__notice">
<span>#Group</span>
"Notify everyone in this Group."
</p>
</li>
</ul>
</div>
after a lot of debugging, seems that the AJAX call was being refused due to permissions. a defect with the application rather than selenium.
I'm using the asp file upload control.i didn't wanted to show the user the ugly asp.net control so used some style="width: 0px; height: 0px; overflow: hidden;" to make it hidden.
Here is my html code
<a id="a">Browse</a>
<div style="width: 0px; height: 0px; overflow: hidden;">
<asp:FileUpload ID="file" runat="server" />
</div>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
And i my jQuery ready function i wrote
$(function(){
$('#a').click(function(){
$('#file').click();
});
});
But this code doesn't do a postback in ie. I'm testing in ie 9.Although it works perfectly fine in Chrome and Firefox.
Can any tell me what is wrong with my code.Or else a work around for this.
Have you looked at IE Developer tools to see if there are any javascript errors in IE? It is possible that it is not able to find the control with ID 'file' since it is a server control and the ID is generated dynamically when the page is rendered.
Use this to select a server control.
$("#<%= file.ClientID %>").click()
Or you can use jquery selector.
$("[id$='file']")
I have a page with two forms. One of them is not visible and contains input type="file". I am uploading file with the hidden form(target of the form is an iframe element). My question is how to stop/cancel uploading of the file with javascript under IE. I have tried to remove the hidden form with JQuery and the file is still uploading.
Thanks in advance.
OK. I found this site looking for the same thing but these solutions did not work for my scenario. I too have an iframe target for my form and wanted to cancel the upload. These solutions did not work for some reason (IE7). I hope the following helps.
The issue was that the response sent from the servlet indicating 'file too big' was not triggering the target iframe onload event.
Try:
targetIframe.contentWindow.document.open()
targetIframe.contentWindow.document.close()
This fooled the iframe onload event into triggering and cancelled the upload automatically.
You probably want something along the lines of window.stop() (applied to the iframe).
This old thread reports that while window.stop() doesn't work in IE, the undocumented window.document.execCommand("Stop") does (at least in IE5).
You might also consult this StackOverflow page, which has basically the same answer, although a few other tricks are proposed.
Thanks for the replies.
As far as I debugged that case I got the following result :) - it is not possible to cancel upload. The methods above cancelled the page to receive the response and the file is uploading to the server side.
Here is the mark up of my prototype:
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<input type="button" id="button1" value="stopUpload" onclick="stopUpload()"/>
<script type="text/javascript">
function stopUpload() {
var frame = $get("iframe1");
frame.contentWindow.document.execCommand("Stop");
}
</script>
</div>
</form>
<form id="form2" enctype="multipart/form-data" action="http://localhost/TestingSite/Default.aspx"
method="POST" target="iframe1">
<input type="submit" />
<input type="file" name="FileUploadTest" id="FileUploadTest"/>
</form>
<iframe id="iframe1" name="iframe1" width="500px" height="500px" ></iframe>
I make this call in my application.js file but it doesn't seem to return a dynamically generated embedded video from the link the user inputs:
$("#new_video").bind('submit', function(e){
e.preventDefault();
var q = $(this).find('#video_video_url').val();
if (q == '')
return false;
$.embedly(q, {maxWidth: 500, wrapElement: 'div' }, function(oembed, dict){
if (oembed == null)
$(".video").html('<p class="text"> Not A Valid URL </p>');
else
$(".video").html(oembed.code);
})
});
I'm not exactly sure what's supposed to go where 'submit' is, so that may be whats causing me trouble.
My id of the form that the user inputs the url into is #new_video, the field's id is #video_video_url, and the class video is generated from my video partial:
<%= div_for video do %>
<% end %>
This is rendered in my index view, where I'd like to display all the embedded videos. This is all there is in my index view where I want all the videos to be embedded:
<div id ='video_div'>
<%= render #videos %>
</div>
however, it's not working. No video is being embedded. What am I doing wrong? Bear in mind that I not only want to embed the video once the url is submitted, but I store the url and want to display the embedded videos indefinitely into the future.
Here's the HTML of the form that the browser sees in the new view:
<div id="dialog" class="window" style="top: 237px; left: 435px; display: block; ">
<form accept-charset="UTF-8" action="/videos" class="new_video" id="new_video" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="h/yzzD0lWsp7nc89WPmDRXWs5ahdfUc3ZvY5IukX2fQ=">
</div>
<div class="field">
<label for="video_video_url">Video url</label><br>
<input id="video_video_url" name="video[video_url]" size="30" type="text">
</div>
<div class="actions">
<input id="video_submit" name="commit" type="submit" value="Create Video">
</div>
</form>
Cancel
</div>
UPDATE:
I get this error in the console:
Started GET "/jquery.embedly.js" for 127.0.0.1 at Thu Mar 17 00:09:29 -0700 2011
ActionController::RoutingError (No route matches "/jquery.embedly.js"):
Rendered /Library/Ruby/Gems/1.8/gems/actionpack-3.0.4/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (1.1ms)
I include jquery.embedly.js in my application layout though...
It looks like the error is that it's not loading the Embedly jQuery script. Is that resolved? Alternatively you can load the Embedly jQuery script from our hosted http://scripts.embed.ly/jquery.embedly.js page.
What's the HTML look like? are you sure you want to use .val() on #video_video_url and not html() or attr('href')? I think you use .val() for input values.
From the val() jquery docs: "The .val() method is primarily used to get the values of form elements."
UPDATE: Just saw your description and you did say it's from user input. So disregard above. Can you paste the HTML?
UPDATE #2: it might be a problem with loading the embedly script. are you using the min version? could you check to make sure the filename is the same? seems that if jquery gets loaded, it should also load embedly as well.
I have this code :
<a href="javascript:document.forms['form1'].student_pic.click()">
<img src="images/mypic.png" alt="" width="161" height="29" border="0" style="margin-top:10px" />
</a>
<input style="display:none" type="file" name="student_pic" id="student_pic" />
This code is working successfully in IE but it's not working in FF.
off course there is form on my page called form1
When the user click the image, select file window will let the user select image and put it in hidden file element.
What is the proplem?
Thanks
Your problem is simply that .click() to open the file chooser dialog does not work on all browsers. I'm not aware of any workaround.
Common way around is have the file input in place but with opacity of 0 which actually means it's hidden, and over it place your custom image or text. Make sure the "browse" button is exactly where your text/image is and it will work - clicking the custom text/image will actually click the browse buttton.
I have such code somewhere so if you won't be able to achieve this I'll search for that code.
Not supported in Gecko yet:
Gecko 2.0 note(Firefox 4)
Starting in Gecko 2.0 , calling the click() method on an <input> element of
type file opens the file picker and lets the user select files.
from https://developer.mozilla.org/en/HTML/Element/input#File_inputs