I am creating a React form where user can upload an image. I am using a function createObjectURL() as given below which i set as the state.
This is the image component
<Row className="form-row">
<Col md={8} className="image-field">
<div className="input-image-file">
<img src={this.state.image} className="myimage" alt="choose an image"></img>
</div>
</Col>
<Col md={4} className="image-buttons">
<Row className="form-row">
<FormControl type="file" onChange={this.onImageChange.bind(this)} ></FormControl>
</Row>
<Row className="form-row">
<Button className="delete-image" onClick={this.deleteImage.bind(this)}><i className="fa fa-trash"></i> Delete</Button>
</Row>
</Col>
</Row>
this is the onImageChange and deleteImage function
onImageChange(event){
this.setState({image: URL.createObjectURL(event.target.files[0])},()=>{
console.log(this.state.image)
})
}
deleteImage(){
this.setState({image : null})
}
the URL is like
"blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a"
I send this data to backend and create an entry in mongodb also where is the URL is saved correctly. I have an option called edit which retrieves all the contents of the form for the user to edit. All contents are getting displayed except the Image.
I get an error like
GET blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a 404 (Not Found)
please do help me thanks in advance this is the console error log
Related
I am working on react-bootstrap form and react-router dom
The same button is assigned to redirect to another page and submit data
I wanted the form to check if the required input fields has datas before going to the assigned page.
Here, I have a from that is taking few datas. On the submission button click, I want the button to check if the datas are being filled, if not say, required to fill the datas; if already been filled, go to the another page as redirected throgh react-router-dom.
At the moment, if the button is clicked, it is directly going to the redirected page without checking if the input fields has any data, even the input fields are assigned required attributes.
Here is the code
<Form>
<Row className="mb-2">
<Col md={5} className="mb-2">
<Form.Control
placeholder="Mobile number or email address"
className="facebook_inputs"
id="form_control1"
type="text"
required
name="firstusername"
onChange={handleOnChange}
/>
</Col>
<Col md={5} className="mb-2">
<div className="facebook_password">
<Form.Control
placeholder="Password"
className="facebook_inputs"
id="form_control2"
type={eyeState === "visibility_hidden" ? "password" : "text"}
required
name="firstpassword"
onChange={handleOnChange}
/>
<span className={eyeState}>
<i
onClick={onSlasheyeClick}
className="fa-solid fa-eye-slash eye"
></i>
</span>
{eyeState === "visibility_hidden" && (
<span>
<i
className="fa-sharp fa-solid fa-eye eye"
onClick={oneyeClick}
></i>
</span>
)}
</div>
</Col>
<Col md={2}>
<Link to="facebooklogin">
<Button
variant="primary"
size="lg"
className="login_button"
type="submit"
id="fblogin_button"
>
Login
</Button>
</Link>
</Col>
</Row>
</Form>
When wrapping the submit button with a Link component the button's click event propagates and also activates the Link component. It's the same as clicking the link alone.
Instead of wrapping the button in a link move the navigation logic to the form's submit handler so that any form data can be validated prior to allow any navigation action. Import and use the useNavigate hook.
Example:
import { ..., useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
const submitHandler = event => {
event.preventDefault();
... form data validation logic ...
if (formValid) {
navigate("facebooklogin");
}
};
<Form onSubmit={submitHandler}>
...
<Col md={2}>
<Button
variant="primary"
size="lg"
className="login_button"
type="submit"
id="fblogin_button"
>
Login
</Button>
</Col>
</Row>
</Form>
I'm fairly new to React so please bare with me.
We have a list of elements which all load their own content based on a query string parameter (let's call it CustomerID) passed in to the page. When clicking on the tabs, the URL remains the same. Let's say the URL is /customer/customerid
Within one of the tabs, the user has an opportunity to click on other items relevant to this Customer, which in turn changes the URL and another id is passed into the query string, let's call it OrderID and the URL is /customer/order/orderid.
When viewing the order, I would like the customer Tab menu to still appear, but I'm not sure the best way to handle this. Should I abandon tabs, and just create some normal links that look and feel like tabs? Or should I make the menu a class that is imported into each page, passing in the CustomerID from the relevant payloads each page contains?
EDIT: to include some code as a reference:
<Formik
initialValues={customer}
enableReinitialize={true}
validationSchema={validationSchema}
onSubmit={handleFormSubmit}>
{({ isSubmitting, values }) => (
<FormikForm autoComplete="off">
<AppCard>
<Tabs defaultActiveKey="details">
<Tab eventKey="details" title="Details">
<Row>
<Col md>
<InputText name="firstName" label="First Name" />
</Col>
<Col md>
<InputText name="lastName" label="Last Name" />
</Col>
</Row>
</Tab>
<Tab eventKey="orders" title="Orders">
<CustomerOrders
onCustomerOrderClick={onCustomerOrderClick}
customerId={customer.customerId}/>
</Tab>
</Tabs>
</AppCard>
</FormikForm>
)}
</Formik>
function onCustomerOrderClick(orderId: any){
history.push(`/customer/order/edit/${orderId}`);
}
The CustomerOrders class contains links to each individual order... Something like the following:
<Row>
<Col className="DataRowFunctions" md="2">
<Link
to={onCustomerOrderClick}
onClick={(e) => {
e.preventDefault();
onCustomerOrderClick();
}}
>
Edit
</Link>
</Col>
</Row>
Opening the order is then changing the URL, which leads me back to my question.
I am trying to hide few columns on mobile screens but its not working for some reason. Here's my code:
<Row>
<Col className="col-md-2">Route Image</Col>
<Col className="col-md-3">
<Row>
<Col>Route Name</Col>
</Row>
<Row>
<Col>Route Location</Col>
</Row>
</Col>
<Col className="col-md-3 hidden-xs-down">Route Difficulty</Col>
<Col className="col-md-2 hidden-xs-down">Route Length</Col>
<Col className="col-md-2 hidden-xs-down">View Details</Col>
</Row>
Can someone please tell me what I am doing wrong?
Since Bootstrap v4.x, all .hidden- classes have been removed. You should use d-none .d-sm-block instead if you want to hide your element only on xs
so i have divs created in react basically they are components and i want to style them using bootstrap like this:
div div div
div div
div div
so basically there are 5components,the top 3 should be small and stack next to each others with small margin. the middle two are bigger and they are under the right and left divs and the bottom ones the same as the middle divs.
i have tried doing like col-6 for the middle and col-4 for the top ones but they were all over the place and messy.
this is what i tried without using css just bootstrap:
<div className="container">
<div className="row">
<div className="col-lg-4">
<Card />
<ActualLineChart data={systolic}/>
<ActualLineChart data={Diastolic}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div>
<ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
<ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<DistributionChart/>
<DistributionChart />
</div>
</div>
</div>
how can i do this behavior?
I am guessing that if you are using react-bootstrap you probably have already installed it and included react component in your app.js file using this
import { Container, Row, Col } from 'React-Bootstrap';
Then you can simply use this for your desired output.
<Container>
<Row>
<Col xs="4">
component 1
</Col>
<Col xs="4">
component 2
</Col>
<Col xs="4">
component 3
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 4
</Col>
<Col xs="4">
component 5
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 6
</Col>
<Col xs="4">
component 7
</Col>
</Row>
</Container>
Output will be look like this:
i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like
this.state {activities : ['','','','','']}
i apply a map function over these to display 5 autocomplete boxes.
I have a list of values to be listed as options of autocomplete.
Row>
{this.state.activities.map((newrow,index)=>{
return (
<Col md={12}>
<Row className="form-row">
<Col md={11} sm={10} xs={9}>
<div className="form-input">
<AutoComplete
className="autosearch"
dataSource={options}
onSelect={this.onSelect.bind(this, index)}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />
</div>
</Col>
<Col md={1} sm={2} xs={3}>
<Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
</Col>
</Row>
</Col>)
})
}
</Row>
now i have to create an autocomplete which also has the option to allow me add an option if it is not present in the list .
please help me out. i am new to react and thanks in advance.
This is the website i referred for the autocomplete boxenter link description here
and i referred the basic example code of it