angular 6 PWA automate the file input click - camera

i am using
<input *ngIf="selectedFile == ''" type="file" accept="image/*" capture="environment" (change)="onFileSelected($event)">
this renders a choose file control. which hitting opens the camera and picks the file. I am trying to completely avoid this manual choose file.
what would be the way to do it?
currently i have a mechanism to pass url parameter like ?action=scan . Using activatedRouter i am reading this param and render the above input control. I just want to launch camera rather.

If you just want to launch the camera directly, you have to use device element/user media with user permission and you can't use input element for the same. Check on this documentation and this one. Both have sample codes.
Update: Here is an Angular example.

Related

Vaadin Flow: Browser does not save passwod

After migrating from Vaadin 8 to 14, browsers do not remember password. With some googling, the below link gives a solution, but I don't understand exactly what I need to do.
https://vaadin.com/forum/thread/17399734/leverage-browser-save-password-feature
Jouni Koivuviita said:
Vaadin input field components have a feature that allows you
to slot in a native input element, and thereby allow password managers to work (assuming you
do not have any other shadow roots in your DOM in the hierarchy above the input field).
<vaadin-text-field>
<input type="text" slot="input">
</vaadin-text-field>
How is this solution implemented in Java exactly ?
Thanks for help.
There are two "easy" solutions:
Use the built-in login component that handles this automatically
Upgrade to Vaadin 23 where the text field workaround is no longer needed
For the difficult solution, you need to use some low-level APIs to make the Java part of Flow replicate the HTML example that you quoted. It goes something like this:
TextField field = new TextField();
Element input = new Element("input");
input.setAttribute("slot", "input");
field.getElement().appendChild(input);

Is there a way to add a tooltip to the p:fileUpload "delete file button"?

I'm using PrimeFaces' p:fileUpload with attribute mode="advanced" so there are 3 buttons (Choose, Upload, Cancel) for uploading files. Below those buttons there is a field in which the chosen files appear after using the choose button. If a file with a correct data type is chosen, the file's name, size, a process bar for the upload and a button to delete the file appear.
First question: Is there a way to add a tooltip to this button?
Also, if a file with an incorrect data type is chosen, an error message appears in the field below the 3 buttons. This error message also has a button to remove the message. Neither the message itself nor its button are focusable by the tab key which makes it inaccessible for non-mouse users.
Second question: Is there a way to make the error message focusable by the tab key?
<p:fileUpload id="fileUpload"
fileUploadListener="#{ShowcaseHandler.handleFileUpload}"
mode="advanced"
multiple="true"
auto="false"
dragDropSupport="false"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" chooseButtonTitle="Test"/>
Tooltip: See https://www.primefaces.org/showcase/ui/file/upload/tooltips.xhtml for examples using PFv10. Also look at the PrimeFaces documentation for p:tooltip.
It appears tooltips were only supported natively in fileUpload from PrimeFaces v10 and I suspect from the question that you're using PF7 or earlier, in which case please see this PrimeFaces issue log for a potential workaround: https://github.com/primefaces/primefaces/issues/5831. Unfortunately the example does not cover the second delete file button that you mentioned, which is an element of a repeating row. You may need to submit an enhancement request to get this added to PrimeFaces natively.

Modify External Browser Element via Vb.Net

Is that anyway to Modify firefox (or other browser) element with Watin/VB.Net after it open?
For example, I have a blank html page, then i open that page with Watin. Because its blank so no element loader. Then i want to add element to that page (form or link or image). Is that possible?
Or is it possible to done with memory editing? or maybe javascript?
so far the closest thing that i can find is this javascript
<button onclick="openTab()">Open</button>
<button onclick="closeTab()">Close</button>
<script>
var TAB;
function openTab() {
TAB = window.open("", "TAB");
TAB.document.write("<p>hi</p>")
}
function closeTab() {
TAB.close();
}
</script>
but its work change the elemnt of its own page, if use another URL its not work, and also its not vb. net XD
The following is functional code to modify a web page (any web page) using WatiN. You will be modifying the local copy you have locally, not the one on the server, of course. You can go as crazy as you want but you need to be more specific on what you want to achieve:
var browser = new IE();
browser.GoTo("about:blank");
browser.WaitForComplete();
browser.Eval(#"document.write('This is new text on the web page<br>')");
browser.Eval(#"var buttonnode= document.createElement('input');");
browser.Eval(#"buttonnode.setAttribute('type','button');");
browser.Eval(#"buttonnode.setAttribute('name','sal');");
browser.Eval(#"buttonnode.setAttribute('value','New Button');");
browser.Eval(#"document.body.appendChild(buttonnode);");

Work around to POST requirement

I need to be able give users a link to my site with a parameter that will control their experience on the destination page, but, of course, Moqui does not allow parameters to be passed as a GET transaction. What are ways that I can work around that? It needs to be something that can be sent in an email, via sms and audibly.
An error message would be helpful know exactly what you are running into, but it sounds like the constraint to mitigate XSRF attacks.
The error message for this situation explains the issue and the recommended solution: "Cannot run screen transition with actions from non-secure request or with URL parameters for security reasons (they are not encrypted and need to be for data protection and source validation). Change the link this came from to be a form with hidden input fields instead."
You can pass URL parameters to screens to be used in code that prepares data for presentation, but not to transitions for code that processes input. The solution is to use a hidden form with a link or button to submit the form (that can be styled as a link or button or however you want). This is slightly more HTML than a plain hyperlink with URL parameters, but not a lot more and there are examples in various places in the Moqui itself.
If you are using an XML Screen/Form you can use the link element to do this with the #link-type attribute set to "hidden-form" or "hidden-form-link" (which just uses a hyperlink styled widget instead of a button styled one). If the #link-type attribute is set to "auto" (which is the default) it will use a hidden-form automatically if link goes to a transition with actions.
In plain HTML one possible approach looks something like this:
<button type="submit" form="UserGroupMemberList_removeLink_0">Remove</button>
<form method="post" action=".../EditUserGroups/removeGroup" name="UserGroupMemberList_removeLink_0">
<input type="hidden" name="partyId" value="EX_JOHN_DOE">
<input type="hidden" name="userGroupId" value="ADMIN">
</form>
Note that the button element refers to the form to submit, so can be placed anywhere in the HTML file and the form element can be placed at the end or anywhere that is out of the way (to avoid issues with nested forms which are not allowed in HTML).

DHTML - Change text on page using input field

I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.