import axios from 'axios';
import React,{Component} from 'react';
import {Button} from 'react-bootstrap';
class App extends Component {
submit = (e) => {
const options = {
method: 'POST',
url: 'https://rapidprod-sendgrid-v1.p.rapidapi.com/mail/send',
headers: {
'content-type': 'application/json',
'X-RapidAPI-Host': '',
'X-RapidAPI-Key': ''
},
data: '{"personalizations":[{"to":[{"email":"awais.ur.rehman16@gmail.com"}],"subject":"Email from Teacher"}],"from":{"email":"aebrahima830@gmail.com"},"content":[{"type":"json","value":"Hello, World!"}]}'
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
};
constructor(props) {
super(props);
this.state = {
teachers: [],
emails: [],
message: '',
// Initially, no file is selected
selectedFile: null,
selectedTeacher: 'Teacher',
selectedEmail: 'Email',
selectedMessage: ''
};
this.changeTeacher = this.changeTeacher.bind(this);
this.changeEmail = this.changeEmail.bind(this);
this.changeMessage = this.changeMessage.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.setState({
teachers: [
{ name: "Ali" , emails: [ {name: "ali@gmail.com" }]},
{ name: "Awais" , emails: [ {name: "awais@gmail.com" }]}
]
});
}
changeTeacher(e) {
this.setState({selectedTeacher: e.target.value});
this.setState({emails : this.state.teachers.find(teach => teach.name === e.target.value).emails});
}
changeEmail(e) {
this.setState({selectedEmail: e.target.value});
}
changeMessage(e) {
this.setState({selectedMessage: e.target.value});
}
// handleSubmit(e) {
// alert('An Email was submitted: ' + this.state.value);
// e.preventDefault();
// }
// On file select (from the pop up)
onFileChange = event => {
// Update the state
this.setState({ selectedFile: event.target.files[0] });
};
// On file upload (click the upload button)
onFileUpload = () => {
// Create an object of formData
const formData = new FormData();
// Update the formData object
formData.append(
"myFile",
this.state.selectedFile,
this.state.selectedFile.name
);
// Details of the uploaded file
console.log(this.state.selectedFile);
// Request made to the backend api
// Send formData object
axios.post("api/uploadfile", formData);
};
// File content to be displayed after
// file upload is complete
fileData = () => {
if (this.state.selectedFile) {
return (
<div>
<h2>File Details:</h2>
<p>File Name: {this.state.selectedFile.name}</p>
<p>File Type: {this.state.selectedFile.type}</p>
<p>
Last Modified:{" "}
{this.state.selectedFile.lastModifiedDate.toDateString()}
</p>
</div>
);
} else {
return (
<div>
<br />
<h4>Choose before Pressing the Upload button</h4>
</div>
);
}
};
render() {
return (
<form onSubmit={this.submit}>
<div className="container">
<div className="row">
<h2>Email Form</h2>
<div className="form-group">
<label style={styles.lbl}>Teacher Name</label>
<select className="form-select" placeholder="Select Teacher" value={this.state.selectedTeacher} onChange={this.changeTeacher}>
<option disabled>Teacher</option>
{this.state.teachers.map((e, key)=> {
return <option key = {key}>{e.name}</option>;
})}
</select>
</div>
<div className="form-group">
<label style={styles.lbl}>Teacher Email</label>
<select className="form-select" placeholder="Select Email" value={this.state.selectedEmail} onChange={this.changeEmail}>
<option disabled>Email</option>
{this.state.emails.map((e, key)=> {
return <option key = {key}> {e.name}</option>;
})}
</select>
</div>
<div style={styles.lbl} className="form-group">
<textarea
className="form-control"
id="exampleFormControlTextarea1"
rows="5"
placeholder="Enter the Message"
value={this.state.selectedMessage}
onChange={this.changeMessage}
/>
</div>
</div>
<div>
<h3> File Upload </h3>
<div>
<input type="file" onChange={this.onFileChange} />
<button onClick={this.onFileUpload}>
Upload!
</button>
</div>
{this.fileData()}
</div>
<div >
<Button variant="outline-primary"
onClick={this.submit}
style={styles.btn}>SEND EMAIL</Button>
</div>
</div>
</form>
);
}
}
export default App;
//JUST SOME STYLES
const styles = {
lbl: {
marginTop: 15,
marginBottom: 15,
},
btn: {
width: 200,
marginLeft: 15,
marginTop: 15,
}
};
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
Please help me to send Form Data as Email. I want to change
data: '{"personalizations":[{"to":[{"email":"awais.ur.rehman16@gmail.com"}],"subject":"Email from Teacher"}],"from":{"email":"aebrahima830@gmail.com"},"content":[{"type":"json","value":"Hello, World!"}]}'
this to Form Data and send that form infornation as Email.