I am trying to upload an image to amazon s3 using axios and have everything set up, but keep getting the error: TypeError: Cannot read property 'props' of undefined. I am using two files; uploadProductPage.js and uploadProductPageClassComponent.js. And I am using axios in both of them. Here are the snippets of interest in each. How can I get this to work? Any help is greatly appreciated
uploadProductPage.js:
const onSubmit = (event, files) => {
event.preventDefault();
const data = new FormData();// If file selected
if ( this.props.state.selectedFile ) {data.append( 'profileImage', this.props.state.selectedFile, this.props.state.selectedFile.name );Axios.post( '/api/photo/profile-img-upload', data, {
headers: {
'accept': 'application/json',
'Accept-Language': 'en-US,en;q=0.8',
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
}
})
.then( ( response ) => {if ( 200 === response.status ) {
// If file size is larger than expected.
if( response.data.error ) {
if ( 'LIMIT_FILE_SIZE' === response.data.error.code ) {
this.ocShowAlert( 'Max size: 2MB', 'red' );
} else {
console.log( response.data );// If not the given file type
this.ocShowAlert( response.data.error, 'red' );
}
} else {
// Success
let fileName = response.data;
console.log( 'fileName', fileName );
this.ocShowAlert( 'File Uploaded', '#3089cf' );
}
}
}).catch( ( error ) => {
// If another error
this.ocShowAlert( error, 'red' );
});
} else {
// if file not selected throw error
this.ocShowAlert( 'Please upload file', 'red' );
}};
uploadProductPageClassComponent.js:
export class UploadProductPage extends Component
{constructor( props ) {
super( props );
this.state = {
selectedFile: null,
selectedFiles: null
}
onSubmit = (event) => {
event.preventDefault();
const data = new FormData();// If file selected
if ( this.state.selectedFile ) {data.append( 'profileImage', this.state.selectedFile, this.state.selectedFile.name );
axios.post( '/api/photo/profile-img-upload000', data, {
headers: {
'accept': 'application/json',
'Accept-Language': 'en-US,en;q=0.8',
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
}
})
.then( ( response ) => {if ( 200 === response.status ) {
// If file size is larger than expected.
if( response.data.error ) {
if ( 'LIMIT_FILE_SIZE' === response.data.error.code ) {
this.ocShowAlert( 'Max size: 2MB', 'red' );
} else {
console.log( response.data );// If not the given file type
this.ocShowAlert( response.data.error, 'red' );
}
} else {
// Success
let fileName = response.data;
console.log( 'fileName', fileName );
this.ocShowAlert( 'File Uploaded', '#3089cf' );
}
}
}).catch( ( error ) => {
// If another error
this.ocShowAlert( error, 'red' );
});
} else {
// if file not selected throw error
this.ocShowAlert( 'Please upload file', 'red' );
}