I have a simple form to upload a file which will later be dealt with my back-end python code. However, what I get when I attempt to upload the file is C:\fakepath\test.txt .
From the research I did this is expected and done due to security concerns. Which is fine, but now my question is how in the world can I get around this to be able to use the file I am uploading on my back-end?
I have looked a bunch of different places and none of them seem to address that.
Here is my current code:
class SomeForm extends Component{
handleFile(e){
this.setState({value: e.target.value});
}
handleSubmit(e){
var me=this;
if (this.state.value.length>0){
var upload_file = this.state.value;
const request = axios.post(this.props.cfg_url+'/upload', {upload_file})
.then(function(response){
console.log('successfully uploaded', upload_file);
})
}
}
render(){
return(
<Form inline onSubmit={this.handleSubmit}>
<FormGroup controlId='uploadFormId'>
<ControlLabel>Upload File:</ControlLabel>
<FormControl
type='file'
label='File'
onChange={this.props.onChange}
/>
</FormGroup>
<Button type='submit'>Upload</Button>
</Form>
);
}
}
I don't get why you do
var upload_file = this.state.value;
if you're settingvar upload_file = this.state.value;
but you never assignvalue
in the state object (in the example below).I think you are using the
value
property of theinput['file']
instead of thefiles
one. You have to take the selected file using thefiles
property and use the FormData interface to map the form parameters.Live Example
Source: https://github.com/mzabriskie/axios/tree/master/examples/upload