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.
Related
I'm new to react-bootstrap and js and am trying to create a simple form validation with 2 just fields - name and email but I want them to have different validation logic (i.e. the email should check whether it's a valid email whereas the name should check whether it's empty).
Looking at the documentation, it is mostly what I want, except the part where the fields are considered valid as long as they are not empty and I can't figure out how to change the validation logic only for a specific field. Is there a way to do so?
In case it's unclear, I want the same text box behaviour as the one in the documentation where after clicking the submit button, the text box will be updated with green or red borders as the user types valid or invalid input respectively without clicking the submit button again.
I have figured out after looking through the HTML input attributes. I have to add pattern and change type to email.
From here, the required attribute will check if it's empty and the type="email" will have basic email validation with an equivalent regex to
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
and if more advanced validation is needed, then add pattern attribute to specify a custom regex.
Editing the code slightly from the documentation in my post.
function FormExample() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Name" required/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Please provide a valid name.</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>Gmail</Form.Label>
<Form.Control type="email" placeholder="Gmail" required pattern=".+#gmail\.com"/>
<Form.Control.Feedback type="invalid">Please provide a valid gmail.</Form.Control.Feedback>
<Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Button type="submit">Submit form</Button>
</Form>
);
}
i have this form using react bootstrap form but i dont seem to be able to change the color of the placeholder
{/*Lastname*/}
<Form.Group>
<Form.Label style={styles.labels}>
<h3>Lastname</h3>
</Form.Label>
<Form.Control
style={styles.inputName}
type="text"
id="creatorLastName"
name="creatorLastName"
placeholder="Lastname"
onChange={handleChange}
/>
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>
I am trying to create a bootstrap controlled form. I am using React-bootstrap's <Form> component. I just copied and pasted the code from the react bootstrap website into my code editor. I got an unexpected result.
React Bootstrap Forms
import React from 'react';
// bootstrap components
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
class Test extends React.Component{
render(){
return (
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
)
}
}
export default Test;
RESULT:
You can see how button has been rendered on the left side. Checkbox and muted text has also rendered on the left side. There is a border-radius has applied, which is not expected.
NOTE: I am not using any external style. I am rendering this single component.
Do you have all the dependencies installed? Looks like CSS isn't added.
npm install bootstrap react-bootstrap
You'll also need to have the CSS imported in your src/index.js or src/app.js.
import 'bootstrap/dist/css/bootstrap.min.css'
Using the library here https://github.com/danialfarid/ng-file-upload. What is a angular way or clearing the input file from the element after a successful upload? (so it goes back to saying "No file selected")
<input ng-file-select ng-model="vm.files" name="filename" accept="*" type="file" ng-file-change="vm.checkFileSize($files)" />
If you reset the model vm.files to the initial value - the empty array, the view will also reset to it's initial state.