input file in ipad only let me choose pictures using ionic - angularjs

i'm trying to attach documents to an item using an input file, works well in android i can choose a pdf file, but on the ipad only images can be selected.
is this a normal behaviour on ipad ?
<div ng-show="type.mode!=3">
<h3>Pièces jointes</h3>
<div class="uploader-buttons-container">
<!-- PDF uploader -->
<div class="custom-uploader">
<span>Ajouter <strong>PDF</strong></span>
<input type="file" class="upload" accept="application/pdf" onchange="angular.element(this).scope().pdf(this)" />
</div>
<!-- Image uploader -->
<div class="custom-uploader">
<span>Ajouter<i class="mini-symbol icon ion-image"></i></span>
<input type="file" class="upload" capture="camera" accept="image/*" onchange="angular.element(this).scope().photo(this)" />
</div>
</div>

You have
accept="image/*"
in input. Remove it and will be fine. It's not related to iPad.

Related

Change Icon position in lightning-input for search type in LWC

I am using standard lightning-input LWC component for search field in my project. By default it shows the search icon on the left side inside the field. How can I shift this icon to right side?
I am using the following code:
<lightning-input
name="enter-search"
label="Search when user hits the 'enter' key"
type="search">
</lightning-input>
You need to add these classes to lightning-icon: slds-icon, slds-input__icon, slds-input__icon_right and slds-icon-text-default.
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:search"></lightning-icon>
<input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>

How do i click on a particular image during runtime?

I am working with filling up form where fields can be checkbox/radio button/textbox/datepicker/timepicker etc.
I am facing an issue with clicking on 'TimePicker' basically one clock icon is given on right hand side, when i am clicking on it, one popup displays from which i do have to pick the time.
Please refer image. https://i.stack.imgur.com/MUOXz.jpg There is no locator with help of which i can click on 'clock' icon.
Here is html DOM.
<ac-input _ngcontent-brk-c387="" inputtype="time" _nghost-brk-c374="" class="visible ng-untouched ng-pristine ng-invalid ng-star-inserted" xpath="1">
<div _ngcontent-brk-c374="" class="col-sm-12 col-md ng-star-inserted">
<div _ngcontent-brk-c374="" class="form-group">
<ac-label _ngcontent-brk-c374="" _nghost-brk-c371="">
<label _ngcontent-brk-c371="" aria-hidden="true" class="ql-editor required ng-star-inserted" for="<p>
<p>
2. Time:
</p>
</label>
</ac-label>
<div _ngcontent-brk-c374="">
<input _ngcontent-brk-c374="" class="form-control ng-star-inserted" id="<p></p>" type="time">
</div>
<ac-hint _ngcontent-brk-c374="" _nghost-brk-c372="">
</ac-hint>
<ac-validation-messages _ngcontent-brk-c374="" role="alert" aria-atomic="true" _nghost-brk-c348="" style="">
</ac-validation-messages>
</div>
</div>
</ac-input>
I have captured 'Clock' icon with the help of snipping tool from the application and pasted on desktop as well under my application under the 'Screenshot' folder.
But click event is not happening from application at run time but its clicking the 'Clock' icon from desktop. And console output for it is "[log] DOUBLE CLICK on L[410,442]#S(0) (69 msec)".
Here is what i tried...
else if(answerType.equals("Time"))
{
WebElement timeText = answers.get(ans) .findElement(By.tagName("label"));
System.out.println(timeText.getText());
Screen screen = new Screen();
Pattern image1 = new Pattern("C:\\Selenium\\workspace\\C_Care\\Screenshots\\Clock.PNG");
Pattern image2 = new Pattern("C:\\Selenium\\workspace\\C_Care\\Screenshots\\Twelve.png");
screen.wait(image1, 10);
for(int sc=0; sc<6; sc++)
{
screen.mouseMove(image1);
screen.doubleClick(image1);
break;
}
screen.wait(image2,10);
screen.click(image2);
}
I a working with TestNg framework and used maven dependency for Sikuli is 2.0.4.
Any help will be appreciated.

Rally custom app completely captures whole body of the HTML page when launched

We have developed a custom application in Rally(CA Agile Central) using Extjs SDK. In our final HTML page, we want to have some HTML DOM elements to be displayed alogside the UI elements created by extjs. When we try to launch this application, UI elements created by extjs completely captures body of the HTML page and other HTML DOM elements are not visible.
e.g.
<body>
<div id="ABC"></div>
<div id="XYY">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</div>
</body>
We want to display UI created by extjs to be associated with div "ABC" and in div "XYZ", we want to have other elements. Currently UI elements in div XYZ are not visible once UI elements created by extjs gets loaded.
Please help.
This is working mostly by design. We do get this request fairly often though. Until we can implement being able to launch apps in a specific element rather than the body the only workaround is to use an iframe in your html file and set its src attribute to your App.html file.
<body>
<div id="ABC">
<iframe src="App.html" height="800px" width="100%" />
</div>
<div id="XYY">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</div>
</body>

Multiple file upload popup is shown in file upload using angularJS

I am using ng-file-upload for uploading files. But am getting 5 popups for uploading files. How to resolve this. Below am giving am codes please check,
Html Code
<div class="" id="clickToUpload" ng-click="uploadFile()">Upload new file</div>
<input type="file" style="display:none" ng-model="picFile" name="file" class="uploadFile" onchange= "angular.element(this).scope().fileNameChanged(this)" />
controller.js
$scope.uploadOpgsFile = function(){
angular.element(document.querySelectorAll(".uploadFile")).click();
};
$scope.fileNameChanged = function(element){
console.log(element.files);
}

upload files in angular with data

I am new in angular and I have an issue with uploading files from different inputs. All the examples I have seen was about uploading files only from one input.
This is what I need for example :
<form>
<div>
<lable>type file A</lable>
<input type='text'>
<input type='file'>
</div>
<div>
<lable>type file B</lable>
<input type='text'>
<input type='file'>
</div>
<button type='submit'>submit</button>
</form>
In my API I want to get the file type A the file type B and the files A and B.
I do not need the API code but I do need to see how to do it in angular.

Resources