I have an MVC3 C#.Net web app. In my HTML View, I am using the standard Windows file input
<input style="border:thin solid #ccc;width:270px; background-color: #FFFFFF;" type="file" name="Name" id="Name"/>
In the Controller I am using the FileSystem.CopyFile() method found in Microsoft.VisualBasic.FileIO.
FileSystem.CopyFile(fileName, fileDirectory +"\\" + attachments.Name, UIOption.AllDialogs);
It's working fine. However, I need to know what selection the user makes on the dialog box. How can I trap whether the user has selected "Copy & Replace", "Don't Copy", "Copy and Keep both files"?
You can't do this, the dialog takes care of this and doens't return the chosen option. You might want to rethink this. An option would be to create your own "Copy File" dialog.
Related
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
How do I create a form-submittable web component?
Background:
I have a customer-picker component that is basically a text input plus a tiny button to the right of the text box plus a dialog that pops up when the button is clicked. It is used in the same way as one might use an html select.
This component is used as part of an html form that is submitted in the old fashioned (non-ajax) kind of way. The actual html input is encapsulated privately inside of the customer-picker component.
Problem:
The text input's value is not submitted
I guess I can understand why this is. I suppose this is the desired behavior (otherwise we are breaking encapsulation).
So with all that said, how do I create a submittable web component?
For example, suppose I have a form like this:
<form action="action.jsp">
<input name="date-start"/>
<input name="date-end"/>
<input name="name-first"/>
<input name="name-last"/>
</form>
that gets submitted like this:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I would like to create the same form using components like this:
<form action="action.jsp">
<date-range name="date">
<full-name name="name">
</form>
that gets submitted exactly the same way as the example above:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I am aware of iron-form. But this solution has some problems.
For one, it does not emulate native form submission very well. In a normal html form, when you submit, the current page is automatically replaced by whatever is returned by the action URL. This doesn't seem to happen with iron-form.
Second. It only allows your component to contribute a single value to the submitted data. In the above mentioned date-range example, I would like two values to be submitted for one component.
I am trying to use Angular Bootstrap Confirm by Matt.
In his demo (click here), it is mentioned that html can be used in the message. His code:
Are you really <b>sure</b> you want to do this?
I changed that to
Are you really <b>sure</b><br> you want to do this?
and it still worked. But if I try to add any complex element like input or button, it does not work.
Enter <b>Yes</b><br> <input type='text'> <br>and click 'Yes'
Is there a way to add input or textarea to the message?
You would have to fork their code, based on the source, it is using a class, so you could not do this through the interface.
https://github.com/mattlewis92/angular-bootstrap-confirm/blob/master/src/angular-bootstrap-confirm.html
I have to upload an excel file in the application.For that, I need to click on one arrow mark (i.e;browse button)which will open up the popup for the user to choose the file from local drives.Below is the code displayed when I did inspect element on the arrow mark.
" ".
Also, the path which will display after choosing the file will be greyed out before user selects the file. This will be enabled only when the user chooses some file from the local.
I was trying below code but it did not work. I think send keys is wrong option as the text path is greyed out.
Help me on this.
WebElement El = driver.findElement(By.id("'uploadInp'"));
driver.findElement(By.id("uploadInp")).click();
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Arrow HTML code:-
<input id="file1" type="file" value="" style="background-color: red;opacity:0;filter:alpha(opacity=0);cursor: pointer; padding-top:3px;width:25px;" name="file">
You do not need to click on browser button or open any pop-up. sendkeys will going to dump your path in HTML DOM for you
So don't click on browser button while use the same button element to perform sendkeys like below:-
WebElement El = driver.findElement(By.id("'uploadInp'"));
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Now you need to click on element which is going to start your upload. As you didn't mention and it's unclear according to your question that which element going to upload your file. Just find that element and click on it normally.
Hope it will help you :)