How can I send data after Preview in React JS with axios? - reactjs

Question

I trying to create multiple send data button. Button work fine in last step display Preview and user send data. In last step data isn't in form body. How can I send this data after submit user?
function ShowOrNot(props) {
const [showForm, setShowForm] = useState(false);
const [showPreview, setShowPreview] = useState(false);
const [formHidden, setFormHidden] = useState(false);
const [inputs , setInputs] = useState({
videoTitle: "",
videoCategory: "",
videoSummary: "",
videoText: "",
coverVideo: null,
videoPoster: null,
file: null,
})
const sendForm = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
formData.append("filename",videoData);
formData.append("videoPoster", posterData);
formData.append("coverVideo", imgData);
formData.append("videoSummary", inputs?.videoSummary);
formData.append("videoText", inputs?.videoText);
formData.append("videoTitle", inputs?.videoTitle);
formData.append("videoCategory", inputs?.videoCategory);
const config = {
headers: {
"content-type": "multipart/form-data",
email: props.user.email,
},
};
axios
.post(
"http://localhost:5000/api/momayezi/uploadFiles/upload",
formData,
config
)
.then((response) => {
alert("The file is successfully uploaded");
})
.catch((error) => {
console.log(error);
});
}
const onChange = ({ target }) => {
const value = target?.value;
const name = target?.name;
setInputs({
...inputs,
[name] : value
});
};
const [picture, setPicture] = useState(null);
const [imgData, setImgData] = useState(null);
const onChangePicture = e => {
if (e.target.files[0]) {
setPicture(e.target.files[0]);
const reader = new FileReader();
reader.addEventListener("load", () => {
setImgData(reader.result);
});
reader.readAsDataURL(e.target.files[0]);
}
};
const [poster, setPoster] = useState(null);
const [posterData, setPosterData] = useState(null);
const onChangePoster = e => {
if (e.target.files[0]) {
setPoster(e.target.files[0]);
const reader = new FileReader();
reader.addEventListener("load", () => {
setPosterData(reader.result);
});
reader.readAsDataURL(e.target.files[0]);
}
};
const [video, setVideo] = useState(null);
const [videoData, setVideoData] = useState(null);
const onChangeVideo = e => {
if (e.target.files[0]) {
setVideo(e.target.files[0]);
const reader = new FileReader();
reader.addEventListener("load", () => {
setVideoData(reader.result);
});
reader.readAsDataURL(e.target.files[0]);
}
};
return (
<div className="col-12">
{!showForm ? (
<ShowFormButton onClick={() => setShowForm(true)}/>
) : undefined}
{showForm ? (
<div className={''} id="scrollbar-style">
<div>
<HideFormButton
onClick={() => {
setShowForm(false);
}}
/>
</div>
{!formHidden ?
<form
onSubmit={ (e) => e.preventDefault()}
className={'mt-3 content-send-form-data register-teacher-inputs-box '}>
<Row>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'videoTitle'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'videoTitle'}
name={'videoTitle'}
required="true"
onChange={onChange}
onBlur={(e) => (e.target.placeholder = 'videoTitle')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'videoCategory'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'دvideoCategory'}
name={'videoCategory'}
onChange={onChange}
required="true"
onBlur={(e) => (e.target.placeholder = 'videoCategory')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label htmlFor={'name'} className={'label-full-size text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'خلاصه videoSummary'}
name={'videoSummary'}
required="true"
onChange={onChange}
onBlur={(e) => (e.target.placeholder = 'خلاصه videoSummary')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={'name'}
className={'label-full-size text-right textarea-label'}
>
<span>*</span>
</label>
<textarea
className="video-text-form form-control"
placeholder={'متن videoText'}
name={'videoText'}
required="true"
onChange={onChange}
onBlur={(e) => (e.target.placeholder = 'متن videoText')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3 video-upload-input-btn">
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form className="myForm">
<div className="formInstructionsDiv formElement">
<p className="instructionsText" />
<div className="register_profile_image">
<input
accept={"video/*"}
id="videoTeacher"
type="file"
onChange={onChangeVideo}
name={"filename"}
/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</Row>
<Row>
<div className="col-lg-6 col-12 mt-3">
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form className="myForm">
<div className="formInstructionsDiv formElement">
<p className="instructionsText" />
<div className="register_profile_image">
<input name={"videoPoster"} accept={"image/*"} id="posterPicture" type="file" onChange={onChangePoster} />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-12 mt-3">
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form className="myForm">
<div className="formInstructionsDiv formElement">
<p className="instructionsText" />
<div className="register_profile_image">
<input
name={"coverVideo"}
accept={"image/*"}
id="profilePic"
type="file"
onChange={onChangePicture}
/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</Row>
</form>
</div>
: undefined}
{!showPreview ? (
<ShowPreviewButton
onClick={() => {
setShowPreview(true);
setFormHidden(true);
}}
/>
) : undefined}
{showPreview ? (
<div className={"preview-send-wrapper"}>
<form onSubmit={(e) => sendForm(e)}
<div className={"mt-5 preview-send-cover"}>
<img className="playerProfilePic_home_tile" src={imgData} />
</div>
<div className={"preview-send-video-poster"}>
<video poster={posterData} controls>
<source src={videoData}/>
</video>
<h1 className={"mt-4"}>
{inputs?.videoTitle}
<span className={"mr-4"}><p>{inputs?.videoCategory}</p></span>
</h1>
<h4 className={"mt-3"}>
{inputs?.videoSummary}
</h4>
</div>
<div className={"preview-send-summary-video"}>
<p>
{inputs?.videoText}
</p>
</div>
<Row>
<div className={"col-lg-8 col-12"}>
<button onSubmit={sendForm} type={"submit"} className={"send-video-btn-final"}>
Send
</button>
</div>
<div className={"col-lg-4 col-12"}>
<SendButton
onClick={() => {
setFormHidden(false);
setShowPreview(false);
setShowForm(true);
}}
/>
</div>
</Row>
</form>
</div>
) : undefined}
</div>
) : undefined}
</div>
);
}
function SendButton({onClick}) {
return (
<div>
<button className="edit-send-video-btn" onClick={onClick}>
Edit
</button>
</div>
);
}
function ShowFormButton({onClick}) {
return (
<div>
<button className="upload-content-btn w-100" onClick={onClick}>
<span className="ml-2">
</span>Upload{' '}
</button>
</div>
);
}
function ShowPreviewButton({onClick}) {
return (
<div className={"row show-preview-button"}>
<div className="col-lg-8 col mt-3">
<button className="preview-send-data-btn" onClick={onClick}>
Preview
</button>
</div>
<div className="col-lg-4 col mt-3">
<button className="draft-send-data-btn">Draft</button>
</div>
</div>
);
}
function HideFormButton({onClick}) {
return (
<div className={'content-send-form-close-btn'}>
<button onClick={onClick} className={'close-modal-btn'}>
<span>Close</span>
</button>
</div>
);
}
ReactDOM.render(<ShowOrNot/>, document.getElementById('root'));
class UploadContentButton extends Component {
componentDidMount() {
store.dispatch(loadUser())
}
static propTypes = {
isAuthenticated : PropTypes.bool,
auth: PropTypes.object.isRequired,
logout: PropTypes.func.isRequired,
};
render() {
return (
<div className="mt-5">
<div className={"row"} id="show-button">
<ShowOrNot/>
</div>
</div>
);
}
}
const mapStateToProps = (state) => ({
setPass: state.auth.setPass,
isAuthenticated: state.auth.isAuthenticated,
error: state.error,
auth: state.auth,
user: state.auth.user,
});
export default connect(mapStateToProps, {loadUser}) (UploadContentButton)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
After create Preview section I test endpoint and it's work fine, Now when submit Send button no response back to me.
How to when submit Send button data Posted to server?

Answer 1

Either put your data in local storage or use state management.
for state management react-redux is a package which you can install by below command.
npm i react-redux