How to upload an image inside iframe using playwright with JS? - playwright

I have the Attached DOM structure as well [Flow is Click select banner button->(inside frame click upload button)-->upon clicking upload button -->Select files button has to be used for upload]
I have used below steps and methods
upload function is happening inside the iframe
Looking forward to your suggestions
const mFrame=page.frameLocator('iframe[name="entity_browser_iframe_eb_banner_slides"]').locator('html');
await mFrame.locator("//a[contains(text(),'Upload')]").click(); //clicking upload button
await mFrame.setInputFiles('//*[#id="edit-upload"]/div',filepath); //uploading image
upon running above code I am getting below error
frame.setInputFiles: Error: Node is not an HTMLInputElement

You don't actually have to click anything for this to work.
Assume I have HTML like this:
<div>
<input name="files" id="files" type="file" size="80" />
<input id="submit" value="Upload Document" />
</div>
I can simply perform the following to set the file for upload upon form submission:
const btnUpload = page.locator('#files');
const btnSubmit = page.locator('#submit');
await btnUpload.setInputFiles(fileName);
await btnSubmit.click();
That should help you but if it does not work when tweaked to be used in your iframe, please post your html.
EDIT: Without seeing your html, you can probably get away with just this:
const frame = page.frameLocator('iframe[name="entity_browser_iframe_eb_banner_slides"]');
await frame.setInputFiles('#edit-upload', filepath);

Related

Amazon s3 form post/upload redirecting to bucket after success on iOS safari/chrome only how to stop?

I have a web app that allows users to upload photos to an S3 bucket via HTML form. It works exactly as expected on all desktop browsers, which is to do nothing after a successful upload. However in iOS safari and iOS chrome, it redirects to the bucket. If I "Handoff" the page over to safari on my mac it is an xml response of the entire bucket, it appears.
Does anyone know why this would happen and how to fix it? Normally I can find something via google and the forums but I'm finding nothing!
We are not specifying "success action redirect" or "success action status" on our form.
Also, it works as expected in chrome on an android device.
We do not want any sort of redirect to occurs, we handle things on the client after clicking the submit/post button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id ="mainContent">
<form action="https://s3.amazonaws.com/{!awsKeySet.Name}" method="post" enctype="multipart/form-data" id="uploadForm">
<input type="hidden" name="key" id="key" />
<input type="hidden" name="AWSAccessKeyId" value="{!awsKeySet.AWS_AccessKey_Id__c}" />
<input type="hidden" name="policy" value="{!policy}" />
<input type="hidden" name="signature" value="{!signedPolicy}" />
<input type="hidden" name="acl" value="{!acessType}" />
<input type="hidden" name="Content-Type" value="{!Content_Type}" />
<!--input type="hidden" name="success_action_status" value="201" /-->
<!--input type="hidden" name="success_action_redirect" value="{!ForRedirect}" /-->
<h4 class="fileToUpload">Select a File to Upload in AWS</h4><br />
<div class="row">
<input type="file" size="50" name="file" id="file" />
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="submit" value="Upload" id="btn_submit" />
</div>
<div id="progressNumber"></div>
</form>
</div>
<script>
$(document).ready(function () {
var _requestBucket;
$("#btn_submit").click(function(event){
//alert(1);
event.preventDefault();
var _file;
_file = $("#file").val().replace(/.+[\\\/]/, "");
console.log('_file '+ _file);
$("#key").val(_file);
$("#uploadForm").submit();
});
});
</script>
Thank you!
I wish someone could have shed more light on this but sadly, this is a bug in iOS webkit browsers. It appears to have been fixed in Android and Desktop. So, if anyone stumbles on this problem, included is the bugzilla link for it
Bugzilla link for Proper handling of HTTP 204
More detail : According to the amazon s3 docs
If the value is set to 200 or 204, Amazon S3 returns an empty document with a
200 or 204 status code.
If the value is set to 201, Amazon S3 returns an XML document with a
201 status code.
If the value is not set or if it is set to an invalid value, Amazon S3
returns an empty document with a 204 status code.
According to HTTP 1.1 -
10.2.5 204 No Content
The server has fulfilled the request but does not need to return an
entity-body, and might want to return updated metainformation. The
response MAY include new or updated metainformation in the form of
entity-headers, which if present SHOULD be associated with the
requested variant.
If the client is a user agent, it SHOULD NOT change its document view
from that which caused the request to be sent. This response is
primarily intended to allow input for actions to take place without
causing a change to the user agent's active document view, although
any new or updated metainformation SHOULD be applied to the document
currently in the user agent's active view.
The 204 response MUST NOT include a message-body, and thus is always
terminated by the first empty line after the header fields.
This is not happening in either webkit browsers for iOS, currently. Sadly. I cannot find a way around this, other for Apple to fix it!

File upload to ASP. NET MVC 6 not working

The file upload component from a 3rd party vendor does not work with my MVC 6 project. Therefore I built a very simple upload mechanism with standard asp.net components:
<form method="post" asp-action="Index2" asp-controller="Data" enctype="multipart/form-data">
<input type="file" name="files" multiple />
<input type="submit" value="Upload" />
</form>
This upload works fine. I receive the uploaded file in my POST-Method in the controller. However if I start the full featured upload component (dxFileUploader from DevExpress) I don't receive the file. My method in the controller will be called but the file collection is empty. In order to compare the two upload requests I created a Fiddler for both. The requests are very similar. Has someone an idea what's the problematic difference between the two requests?
#Marco, I know this is old, however, ensure that the binding in your controller is correct, meaning the parameter to your action matches the name of the component. I am using the dxFileUploader (version 16.1) with the following action:
public async Task<IActionResult> UploadProducts([FromForm]IFormFileCollection files){...}
And the following in my view :
$("#file-uploader").dxFileUploader({
selectButtonText: "Select Product File",
labelText: "",
accept: "text/csv",
uploadMode: "useForm",
name: "files"
});
I hope this helps.

Show Search button on iOS keyboard using html input type=search in AngularJS app

In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.

Getting onClick to work on iPad Safari

I just inherited a website and haven't worked on website for about 15 years and am not familiar with programing for touch screens.
I have the below onClick submit code that works on all browsers (including Safari desktop on PC) that I have tested as well as using Google search on an iPad, but when attempting to press the "Submit" button when accessing the site via iPad Safari it will not fire. I've search for JQuery solutions, but am not up to speed on JQuery. Any help appreciated.
function submitentry()
{
password = document.password1.password2.value.toLowerCase()
username = document.password1.username2.value.toLowerCase()
passcode = 1
usercode = 1
for(i = 0; i
<center>
<form action="" name="password1">
<strong>User * * : </strong>
<input type="text" name="username2" size="15">
<br>
<strong>Password: </strong>
<input type="password" name="password2" size="15">
<br><br>
<input type="button" value="Submit"onClick="submitentry(); return true">
</form>
Turns out that any non-anchor element assigned a click handler in jQuery must either have an onClick attribute (can be empty like below):
onClick=""
OR
The element css needs to have the following declaration:
cursor:pointer
via : http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working
I'm not sure but that's probably because touch devices doesn't have pointer.
Try .live():
$(document).ready(function(){
$("#submitButton").live("click", function(){
// do something
}
});
Or, try this plugin:
https://github.com/aanand/jquery.tappable.js
I suggest you to try to avoid writing unobtrusive code such inline event handlers like onclick, onmousedown, etc because different browser work differently. Especially in touch devices.
Thanks for the suggestion. Being new to jQuery it is taking me awhile to get up to speed. Below is what I got to work, so far, but still am having problems with the touch screen on iPad when accessing the site using Safari. But it does work, strangely, when I access the site using Google on the iPad. Strange, I think!
My HTML input statement is:
<input type="button" value="Submit" id="click"/>
jQuery:
$('#click') .click(function(){
submitentry();
});
I'm thinking that if I use something other than .click it might work. Just need to figure out what. We'll see...

Dart: How to close browser window?

How can I close a browser page via eg. an HTML button and Dart?
I've tried
window.close();
which doesn't appear to do anything;
I've also tried :
window.document.$dom_dispatchEvent();
using CloseEvent, but I'm not sure how to set that up.
I've also tried HTML and javascript without success.
Please advise how this can be done. It's needed for desktop-type apps IMO.
I used this:
<form method="post">
<input type="button" value="Close Window"
onclick="window.close()">
</form>
Maybe try
window.focus(); window.close()

Resources