how to set url in another input after upload file in reactjs - html

Question

I am working with react with axios. i am uploading a file in react and i want to set url in another input after file upload but i am unable to get value. in console i am getting value properly but issue in input field. currently i m doing with different method.
i want uploaded file url in id="uploadRhp". please help if anybody know.
import React, { Component } from 'react';
import axios from "axios";
class TradeImportComponent extends React.Component<{},any>{
// API Endpoints
custom_file_upload_url = `https://exaample.com/api/ipo/document/upload`;
canvas: any;
// state
constructor(props) {
super(props);
this.canvas = React.createRef()
this.state = {
image_file: null,
image_preview: '',
}
}
// Image Preview Handler
handleImagePreview = (e) => {
let image_as_base64 = URL.createObjectURL(e.target.files[0])
let image_as_files = e.target.files[0];
this.setState({
image_preview: image_as_base64,
image_file: image_as_files,
})
}
// Image/File Submit Handler
handleSubmitFile = () => {
if (this.state.image_file !== null){
let formData = new FormData();
formData.append('ipoName', 'tata');
formData.append('document', this.state.image_file);
axios.post(
this.custom_file_upload_url,
formData,
{
headers: {
// "Authorization": "YOUR_API_AUTHORIZATION_KEY_SHOULD_GOES_HERE_IF_HAVE",
"Content-type": "multipart/form-data",
},
}
)
.then(res => {
console.log(`Success` + res.data.response);
var json= JSON.parse(JSON.stringify(res.data.response));
console.log(json);
console.log(json.url);
console.log(this.canvas.current.value);
this.canvas.current.value=json.url;
console.log(this.canvas.current.value);
})
.catch(err => {
console.log(err);
})
}
}
// render from here
render() {
return (
<div>
{/* image preview */}
<img src={this.state.image_preview} alt="image_preview" width="100%"/>
{this.state.url}
{/* image input field */}
<input
type="file"
onChange={this.handleImagePreview}
/>
<input type="hidden" name="logo" id="uploadlogo"/>
<input type="hidden" name="rhp" value="test#1234567" ref={this.canvas} id="uploadRhp"/>
<input type="hidden" name="financial_Pdf" id="uploadfinancial"/>
<label>Upload file</label>
<input type="submit" onClick={this.handleSubmitFile} value="Submit"/>
<ul>
</ul>
</div>
);
}
}
export default TradeImportComponent;

Answer 1

Use setstate in axios response store the response in state
// state
constructor(props) {
super(props);
this.canvas = React.createRef()
this.state = {
image_file: null,
image_preview: '',
uploadURL:''
}
}
handleSubmitFile = () => {
if (this.state.image_file !== null){
let formData = new FormData();
formData.append('ipoName', 'tata');
formData.append('document', this.state.image_file);
return axios.post(
this.custom_file_upload_url,
formData,
{
headers: {
// "Authorization": "YOUR_API_AUTHORIZATION_KEY_SHOULD_GOES_HERE_IF_HAVE",
"Content-type": "multipart/form-data",
},
}
)
.then(res => {
console.log(`Success` + res.data.response);
var json= JSON.parse(JSON.stringify(res.data.response));
//use setstate
setState({uploadURL:json.url)
})
.catch(err => {
console.log(err);
})
}
}
//in JSX render
<Input value={this.state.uploadUrl}/>