I want to make file choose, just text like choose file and open file choose area open, I use react boostrap how can I do that below is my code now is choose file button and I don't want this and I searching google and I don't found solution
<Form.Group>
<Form.File onChange={onChangeFile} id="choseFile" isInvalid={true} />
</Form.Group>
Try this code maybe this is what you want
<Form.Group>
<Form.File onChange={onChangeFile} id="choseFile" isInvalid={true} label="chose a file" custom/>
</Form.Group>
Related
How I can upload a photo and immediately display it using React. And Is it possible to make it so that it is saved only if you click on the button or save the file, but if the action was canceled delete it
For example i have this form
import Form from 'react-bootstrap/Form';
<Form.Group controlId="formFile" className="mb-3">
<Form.Label>Default file input example</Form.Label>
<Form.Control type="file" />
</Form.Group>
Please give examples of how this can be done.
I would like this:
<input
id="inputForEmail"
type="email"
className="form-control"
aria-describedby="Enter email address"
placeholder="Enter email address"
/>
As opposed to this:
<input id="inputForEmail" type="email" className="form-control" aria-describedby="Enter email address" placeholder="Enter email address" />
VSCode added a way to do this now. You can edit your settings.json (ctrl+shift+p) and then add the following for the desired effect:
"html.format.wrapAttributes": "force-aligned"
--or--
"html.format.wrapAttributes": "force"
force-aligned will also add indents to align it with the attribute on the line where tag was opened.
OR
You can go to extensions in the editor and search for prettier then install it. Then you don't need to setting up anything just go to your code and press shift + i or shift+alt+f . Cheers! your code is nicely formatted.
https://prettier.io/
Go to extension (Ctrl+Shift+X), click on Prettier
Click on settings icon and select extension settings
Type print width and change the value
I am trying to make <TextField/> (http://www.material-ui.com/#/components/text-field) as <input/>. So I attempted the following:
<TextField
hintText='Enter username'
>
<input
className="form-control"
ref='username'
type='text'
/>
</TextField>
But it is not picking up the ref correctly. When this.refs.username.value.trim() is logged, it displays an error that value is undefined. But when <input/> is used alone, it picks up the inputted text correctly.
What is the proper the way to use <input/> but with <TextField/> as wrapper for styling?
Thank you in advance!
I don't think you can have an input field inside a TextField component
Material UI's TextField Is An Input So all You need to do is add another TextField Below it add styling if you want them closer
you couldnt do <input><input></input></input> in normal HTML.
<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />
you just need a handle change function which you should be able to work out from googling if you need one.
I have a file browser button in my jsp. It has a text like "No File Selected" beside it at the very beginning. after selecting the file, it shows the file path instead of "No File Selected". Now I want to replace "No File Selected" with ".jpg" or the supported format names.
Is it possible to do so?
my code for the browser button..
<form:input name="file1" type="file" accept="image/png,image/jpeg"
id="files" path="" size="500" title="files" />
Use this style...
in order for you to make a design of you input file..
do not display the input.. just hide it and make a design on your button or whatever element you want. Just like my example below..
<input type="file" id="myUpload" style="display:none" />
<button type="button" onclick="javascript:document.getElementById('myUpload').click();">Upload Photo</button>
I hid the input while displaying the button and giving it an attribute onclick and letting the javascript do the magic..
here is the example:
http://jsfiddle.net/aYd72/
and better use bootstrap for better designs
I hope it will help you
I am using a really simple form to allow users to upload files to my server. It works well, but i have noticed that even for very small files, right after selecting the file to upload, it takes a while (2-3 sec) to change the "No file selected" to the actual name of the file selected. (Actually it says it in spanish - guess somebody knows where i am).
The thing is that during this loading time the mouse wheel nor the browser look like they are thinking, so im afraid the user wont be patient enough and will feel its not working.
So i just want to display a text saying, "hey, hold on - its loading" And this is what i have tried with no luck:
A.
<input type="file" name="userf" onload="function(e){e.innerHTML='Loading';};">
</input>
B.
<input type="file" name="userf" onchange="function(e){e.innerHTML='Loading';};">
</input>
C.
<input type="file" name="userf" onload="function(){this.innerHTML='Loading';};">
</input>
D.
<input type="file" name="userf" onchange="function(){this.innerHTML='Loading';}">
</input>
If this is not possible, could i not just change the default message: "No file selected"?
EDIT
If possible, no JQuery, just javascript
You cannot change the default text on an input file element. But you can do some work arounds in order to get something similar you want. It may require jQuery or other framework to do the job.
This post may help: How to change the button text of <input type="file" />?