I have made a form in ReactJS having multiple types of input and file type is one of them. What I want to do is send an attachment to mail using PHP. But whenever I send data through form all data get accessed in PHP file except for file type. When I checked in network file shows empty? but in console the file object get print what did I miss?
form
import React, { Component } from 'react'
import { Link } from "react-router-dom"
import axios from 'axios';
import validator from 'validator';
import isEmail from 'validator/lib/isEmail';
const initialState = {
name: '',
email: '',
check1: '',
check2: '',
check3: '',
check4: '',
check5: '',
check6: '',
phone: '',
budget: '',
file: '',
message: '',
mailSent: false,
error: null,
nameError: '',
emailError: '',
phoneError: '',
budgetError: '',
fileError: '',
messageError: ''
}
const API_PATH = 'api/contact/get_a_quote.php';
class get_a_quote extends Component {
constructor(props) {
super(props);
this.state = initialState;
this.setState({ isLoggedIn: false });
}
validate = () => {
let nameError = "";
let emailError = "";
let phoneError = "";
let budgetError = "";
let fileError = "";
let messageError = "";
if (this.state.name.length <= 0) {
nameError = "Name cannot be blank";
}
if (this.state.email.length <= 0) {
emailError = "Email address cannot be blank";
} else if (!this.state.email.includes('@')) {
emailError = "Enter valid email address";
}
if (this.state.phone.length <= 0) {
phoneError = "Phone Number cannot be blank";
} else if (!validator.isMobilePhone(this.state.phone)) {
phoneError = "Enter valid Phone Number";
}
if (this.state.budget.length <= 0) {
budgetError = "Name cannot be blank";
} else if (!validator.isNumeric(this.state.budget)) {
budgetError = "Name cannot be blank";
}
if (this.state.message.length <= 0) {
messageError = "Name cannot be blank";
}
if (nameError || emailError || phoneError || budgetError ||| messageError) {
this.setState({ nameError, phoneError, emailError, budgetError, messageError });
this.setState({ isLoggedIn: false });
return false
}
return true;
};
handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.value : target.checked;
const name = target.name;
this.setState({
[name]: value
});
}
handleFormSubmit = e => {
e.preventDefault();
const isValid = this.validate();
if (isValid) {
console.log(this.state.file, this.state.phone, this.state.budget, this.state.mailSent, this.state.error);
this.setState({ isLoggedIn: true });
this.setState(initialState);
}
var formData = new FormData();
formData.append(
"image",
this.state.file,
this.state.file.name,
);
console.warn(this.state.file);
console.warn(this.state.file.name);
axios({
method: 'post',
url: `${API_PATH}`,
headers: { 'content-type': 'multipart/form-data' },
data: {'name':this.state.name,
'email': this.state.email,
'phone':this.state.phone,
'message': this.state.message,
'budget': this.state.budget,
'check1': this.state.check1,
'check2': this.state.check2,
'check3': this.state.check3,
'check4': this.state.check4,
'check5': this.state.check5,
'check6': this.state.check6,
'file': formData,
'error':this.state.error}
})
.then(result => {
this.setState({
mailSent: result.data.sent
})
})
.catch(error => this.setState({ error: error.message }));
};
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
<section className="checkout-area ptb-100">
<div className="container">
<form enctype="multipart/form-data" action="">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="billing-details">
<h3 className="title font-weight-bold">Get A Quote</h3>
<div className="row">
<div className="col-lg-6 col-sm-12 col-md-12 pb-5 mt-1">
<div className="col-lg-12 col-md-6 my-1">
<label className="font-weight-bold">Services<span className="required" style={{ color: "#f16527" }}>*</span></label>
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="create-an-account" name="check1"
value="Enterprise
Software Solutions"
onChange={this.handleInputChange}
checked={this.state.check1}
/>
<label className="form-check-label" for="Enterprise Software Solutions">Enterprise
Software Solutions</label>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="ship-different-address" name="check2"
value="Web Development "
onChange={this.handleInputChange}
checked={this.state.Web_Development}/>
<label className="form-check-label" for="Web Development">Web Development </label>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="ship-different-address" name="check3"
value="Mobile App Development"
onChange={this.handleInputChange}
checked={this.state.check3}/>
<label className="form-check-label" for="Mobile App Development ">Mobile App Development
</label>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="ship-different-address" name="check4"
value="UI & UX Design"
onChange={this.handleInputChange}
checked={this.state.check4}
/>
<label className="form-check-label" for="UI & UX Design">UI & UX Design</label>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="ship-different-address" name="check5"
value="Digital Marketing"
onChange={this.handleInputChange}
checked={this.state.check5} />
<label className="form-check-label" for="Digital Marketing">Digital Marketing</label>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="ship-different-address" name="check6"
value="Others"
onChange={this.handleInputChange}
checked={this.state.check6} />
<label className="form-check-label" for="Digital Marketing">Others</label>
</div>
</div>
{/* <div className="col-lg-6 col-md-6">
<div className="form-check">
<input type="checkbox" class
Name="form-check-input" id="ship-different-address" name="check6"
value="Others"
onChange={this.handleInputChange}
checked={this.state.check6} />
<label className="form-check-label" for="Others">Others</label>
</div>
</div>
*/}
</div>
</div>
<div className="col-lg-12 col-md-6 my-1">
<div className="form-group mt-5">
<input type="text" className="form-control" name="name" placeholder="Name*"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })} />
{this.state.nameError ? (<div className="text-danger">{this.state.nameError}</div>) : null}
</div>
</div>
<div className="col-lg-12 col-md-6 my-1">
<div className="form-group">
<input type="email" className="form-control" name="email" placeholder="Email*"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })} />
{this.state.emailError ? (<div className="text-danger">{this.state.emailError}</div>) : null}
</div>
</div>
<div className="col-lg-12 col-md-6 my-1">
<div className="form-group">
<input type="tel" className="form-control" name="phone" placeholder="Mobile Number*"
value={this.state.phone}
onChange={e => this.setState({ phone: e.target.value })}
/>
{this.state.phoneError ? (<div className="text-danger">{this.state.phoneError}</div>) : null}
</div>
</div>
<div className="col-lg-12 col-md-6 my-1">
<div className="form-group mt-5">
<input type="number" className="form-control" name="budget" placeholder="Budget*"
value={this.state.budget}
onChange={e => this.setState({ budget: e.target.value })} />
{this.state.budgetError ? (<div className="text-danger">{this.state.budgetError}</div>) : null}
</div>
</div>
<div className="col-lg-12 col-md-12 my-1">
<div className="form-group">
<input type="file" className="form-control pt-3" name="file" id="file"
// value={this.state.file}
onChange={e => this.setState({ file: e.target.files[0] })} />
{this.state.fileError ? (<div className="text-danger">{this.state.fileError}</div>) : null}
</div>
</div>
<div className="col-lg-12 col-md-12 my-1">
<div className="form-group">
<textarea name="message" id="message" className="form-control" cols="30" rows="5" data-error="Please enter your message" placeholder="Write your message..." value={this.state.message}
onChange={e => this.setState({ message: e.target.value })}></textarea>
{this.state.messageError ? (<div className="text-danger">{this.state.messageError}</div>) : null}
</div>
</div>
{isLoggedIn ? (<div className="col-lg-12 col-md-12">
<input type="submit" className="default-btn" Value="Send Message" onClick={e => this.handleFormSubmit(e)} data-toggle="modal" data-target="#exampleModalCenter" />
</div>) : <div className="col-lg-12 col-md-12">
<input type="submit" className="default-btn" Value="Send Message" onClick={e => this.handleFormSubmit(e)} />
</div>}
</div>
<div className="col-lg-6 col-sm-12 col-md-12 d-flex align-items-center justify-content-center pl-5">
<div className="main-banner-image wow fadeInUp"
data-wow-delay="00ms"
data-wow-duration="1000ms"
data-speed="0.06"
data-revert="true" width="690px" height="50%">
<img src="assets/img/contact.png" alt="our services" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</section >
get_a_quote.php
<?php
require 'smtp/PHPMailerAutoload.php';
header("Access-Control-Allow-Origin: *");
$rest_json = file_get_contents("php://input");
$_POST = json_decode($rest_json, true);
if ($_POST)
{
$services = array($_POST['check1'], $_POST['check2'], $_POST['check3'], $_POST['check4'], $_POST['check5'], $_POST['check6']);
$services = implode("\n\r,", $services);
$m = new PHPMailer(true);
$m->isSMTP();
$m->SMTPAuth = true;
$m->SMTPdebug = 2;
$m->Host = 'smtp.gmail.com';
$m->Username = '************';
$m->Password = '************';
$m->SMTPSecure = 'tls';
$m->Port = 587;
$m->addAttachment($_FILES['file']['tmp_name'],$_FILES['file']['name']);
$m->isHTML(true);
$m->setFrom($_POST['email'],'Grawlix');
$m->addReplyTo($_POST['email'],$_POST['name']);
$m->Subject = 'New estimation request';
$m->Body = '<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<style>
/* Reset styles */
body {
font-family: "Roboto", Arial, sans-serif;
height: 100% !important;
margin: 0;
min-width: 100%;
padding: 0;
width: 100% !important;
}
body, table, td, div, p, a {
line-height: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table, td {
border-collapse: collapse !important;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
.action-item {
border: 1px solid #005f7f;
color: #005f7f;
padding: 8px 20px;
}
.action-item:hover {
background-color: #005f7f;
border: 1px solid #005f7f;
color: #fff;
}
#outlook a {padding: 0;}
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {line-height: 100%;}
/* Rounded corners for advanced mail clients only */
@media all and (min-width: 560px) {
.container {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
}
}
/* Set color for auto links (addresses, dates, etc.) */
a, a:hover {color: #005f7f;}
.footer a,
.footer a:hover {
color: #999999;
}
</style>
<!-- MESSAGE SUBJECT -->
<title>New Onboarding Request</title>
</head>
<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; background-color: #ececec; color: #333333;" bgcolor="#ececec" text="#333333">
<!-- WRAPPER TABLE -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; width: 100%;">
<tr>
<br>
<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;" bgcolor="#ececec">
<!-- WRAPPER -->
<table border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" width="560" style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit; width: 560px; margin: 30px 0 0 0;" class="container">
<!-- PRIMARY IMAGE -->
<tr>
<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-top: 20px;">
<img border="0" vspace="0" hspace="0" src="https://pms.grawlixsoft.com/files/system/_file60538f7abc879-site-logo.png" alt="Builders Mutual" title="Builders Mutual" width="560" style="border: none; color: #333333; display: block; font-size: 13px; margin: 0; max-width: 560px; padding: 0; outline: none; text-decoration: none; width: 100%; -ms-interpolation-mode: bicubic;"/>
</td>
</tr>
<!-- CONTENT -->
<tr>
<td valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;">
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif; margin: 30px 0 0 0;">To Admin,</p>
<h3 style="color: #333; font-family: "Roboto", Arial, sans-serif; font-size: 20px; font-weight: 800; line-height: 120%; margin: 20px 0 10px 0; padding: 0; text-align: left;">Request Summary</h3>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Requestor</span>: '.$_POST['name'].'</p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Phone</span>: '.$_POST['phone'].'</p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Email </span>: '.$_POST['email'].'</p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Request Date</span>: '.date("d/m/Y").' </p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Services</span>: '.$services.'</p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Budget</span>: '.$_POST['budget'].'</p>
<p style="font-size: 15px; font-weight: 400; line-height: 160%; color: #333333; font-family: "Roboto", Arial, sans-serif;"><span style="font-weight: 800;">Message</span>: '.$_POST['message'].'</p></td>
</tr>
<!-- LINE BREAK -->
<tr>
<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding-bottom: 10px; padding-left: 6.25%; padding-right: 6.25%; padding-top: 10px; width: 87.5%;" class="line"><hr color="#e0e0e0" align="center" width="100%" size="1" noshade style="margin: 0; padding: 0;" />
</td>
</tr>
</table>
<!-- FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="560" style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit; max-width: 560px;" class="wrapper">
<tr>
<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; font-size: 12px; font-weight: 400; line-height: 150%; padding-top: 20px; padding-bottom: 20px; color: #999999; font-family: "Roboto", Arial, sans-serif;" class="footer">
Copyright © 2021 Grawlix. All Rights Reserved.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>';
$m->AddAddress("*************", "*****");
$m->SMTPOptions = array('ssl'=>array(
'verify_peer'=>false,
'verify_peer_name'=>false,
'allow_self_signed'=>false,
));
if ($m->send()) {
echo json_encode(array(
"sent" => true
));
echo 'mail sent successfully';
} else {
echo json_encode(["sent" => false, "message" => "Something went wrong"]);
echo "something went wrong" . $m->ErrorInfo;
}
}
?>
