add titles for the uploaded images in nodejs,mysql and react

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

i would suggest switching to fetch instead of axios

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0