hi all I want to add title for the array of images(multiple image). im using mysql for storing the data currently it stores image data like this
I want to add title for that array of image so that i can call those images only with my title my code is
class Home extends Component {
constructor( props ) {
super( props );
this.state = {
selectedFile: null,
selectedFiles: null,
title: null
}
}
multipleFileChangedHandler = (event) => {
this.setState({
selectedFiles: event.target.files
});
console.log( event.target.files );
};
multipleFileUploadHandler = () => {
const data = new FormData();
let selectedFiles = this.state.selectedFiles;
let title = this.state.title;
data.append('title', title);
if ( selectedFiles ) {
for ( let i = 0; i < selectedFiles.length; i++ ) {
data.append( 'galleryImage', selectedFiles[ i ], selectedFiles[ i ].name );
}
axios.post( '/api/profile/multiple-file-upload', data, {
headers: {
'accept': 'application/json',
'Accept-Language': 'en-US,en;q=0.8',
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
}
})
.then( ( response ) => {
console.log( 'res', 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 if ( 'LIMIT_UNEXPECTED_FILE' === response.data.error.code ){
this.ocShowAlert( 'Max 4 images allowed', 'red' );
} else {
// If not the given ile type
this.ocShowAlert( response.data.error, 'red' );
}
} else {
// Success
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' );
}
};
// ShowAlert Function
ocShowAlert = ( message, background = '#3089cf' ) => {
let alertContainer = document.querySelector( '#oc-alert-container' ),
alertEl = document.createElement( 'div' ),
textNode = document.createTextNode( message );
alertEl.setAttribute( 'class', 'oc-alert-pop-up' );
$( alertEl ).css( 'background', background );
alertEl.appendChild( textNode );
alertContainer.appendChild( alertEl );
setTimeout( function () {
$( alertEl ).fadeOut( 'slow' );
$( alertEl ).remove();
}, 3000 );
};
render() {
console.log( this.state );
return(
<div className="container" style={{paddingTop:'3%',paddingLeft:'10%',paddingRight:'10%'}}>
{/* For Alert box*/}
<div id="oc-alert-container"></div>
{/* Multiple File Upload */}
<div className="card" >
<div className="card-header">
<h1>S3 Uploader</h1>
</div>
<div className="card-body">
<label >Title</label>
<input type="text" onChange={ (e)=> this.state.title } placeholder="enter name" className="form-control"/>
<p className="card-title">Please upload the folder</p>
<input type="file" directory="" webkitdirectory="" accept="image/*" onChange={this.multipleFileChangedHandler}/>
<div className="mt-5">
<button className="btn btn-info" onClick={this.multipleFileUploadHandler}>Upload!</button>
</div>
</div>
</div>
</div>
);
}
}
when user enter some name and uploads images it will add database under that title that entered above please guide me to achieve it
