How to add a form that will let any user add the file meta

Hi everyone here!
I am new to this and would appreciate answers that will help me complete this project.

All i need is to add the form that will let any user add file metadata (description form) and submitted along with the files attached for upload to the server AND can be retrieved with the file when queried.

below is the project

<!doctype html>

Upload files #drop_file_zone { background-color: #EEE; border: #999 2px dashed; width: 290px; height: 200px; padding: 8px; font-size: 18px; } #drop_files { background-color: white; border: #999 2px solid; width: 310px; height: 220px; padding: 4px; } #drag_upload_file { width: 50%; margin: 0 auto; } #drag_upload_file p { text-align: center; } #drag_upload_file #selectfile { display: none; } /*.main { background-color: slategray; margin: 250px 500px; }*/
/*rgb(61, 71, 78)*/
.avatar{object-fit:cover; border-radius:50%; background:#dfdfdf; border:2px solid #dfdfdf; width:30px; height:30px;}
.avatar20{object-fit:cover; border-radius:50%; background:#dfdfdf; border:2px solid #dfdfdf; width:20px; height:20px;}
.avatar25{object-fit:cover; border-radius:50%; background:#dfdfdf; border:2px solid #dfdfdf; width:25px; height:25px;}
.avatar50{object-fit:cover; border-radius:50%;background:#dfdfdf;border:2px solid #dfdfdf; width:50px; height:50px;}
.avatar100{object-fit:cover; border-radius:50%;background:#dfdfdf;border:2px solid #dfdfdf; width:100px; height:100px;}

.p5 {padding:5px;}
.pr5 {padding-right:5px;}
.pl5 {padding-left:5px;}
.pb5 {padding-bottom:5px;}
.p10 {padding:10px;}
.pt10 {padding-top:10px;}
.pr10 {padding-right:10px;}
.pl10 {padding-left:10px;}
.pb10 {padding-bottom:10px;}
.m5 {margin:5px;}
.mr5 {margin-right:5px;}
.ml5 {margin-left:5px;}
.pointer {cursor:pointer;}
			<p>Drag &amp; Drop Files Here!</p>
			<p><input type="button" value="Upload Files" onclick=";" /></p>
			<input type="file" id="selectfile" multiple />
			<input type="hidden" id="current_file_index" value="0" />