Client Object Model Document Library to update metadata and file at a time

1)HTML for upload document

<head>
    <script src="jquery.min.js" type="text\javascript"></script>
</head>
<body>
<div>
<label>DocName:</label>
<input type="text" id="DocName" />
</div>
<div>
<label>User:</label>
<input type="text" id="Popuser" />
</div>
<div>
<input type="file" id="uploadFile" />
</div>
<div style="margin-top:20px;">
<button type="button" onclick="readFile()">Submit</button>
</div>
<script>

2)Get file from input tag

var fileInput;
$(document)
    .ready(function () {
    debugger;
        fileInput = $("#getFile");
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext');
    });

var arrayBuffer;

function readFile() {
    debugger;
    //Get File Input Control and read th file name  
    //var element = $("#fileBtn").files[0];
    var element = document.getElementById("uploadFile");
    var file = element.files[0];
    var parts = element.value.split("\\");
    var fileName = parts[parts.length - 1];
 
    //Read File contents using file reader 
    var reader = new FileReader();
    reader.onload = function (e) {
        uploadFile(e.target.result, fileName);
    }
    reader.onerror = function (e) {
        alert(e.target.error);
    }
    reader.readAsArrayBuffer(file);
}
var attachmentFiles;

function uploadFile(arrayBuffer, fileName) {
    //Get Client Context,Web and List object.  
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    var oList = oWeb.get_lists().getByTitle('DocUpload');
 
    //Convert the file contents into base64 data  
 var bytes = new Uint8Array(arrayBuffer);
    var i, length, out = '';
    for (i = 0, length = bytes.length; i < length; i += 1) {
        out += String.fromCharCode(bytes[i]);
    }
    var base64 = btoa(out);
    //Create FileCreationInformation object using the read file data
    var createInfo = new SP.FileCreationInformation();
   
    createInfo.set_content(base64);
    createInfo.set_url(fileName);
 
    //Add the file to the library
    this.uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
    //Load client context and execcute the batch
    listItem = uploadedDocument.get_listItemAllFields();
    listItem.set_item('docName', fileName);
    listItem.update();
    clientContext.load(uploadedDocument,'ListItemAllFields');  //here at a time we are loading uploading funtionality and get items AND update items
    clientContext.executeQueryAsync(Function.createDelegate(this, this.QuerySuccess), Function.createDelegate(this, this.QueryFailure));
}

function QuerySuccess() {
// if we want get curent upload item id ,we can use below line of code 
var id = uploadedDocument.get_listItemAllFields();
    console.log('File Uploaded Successfully.');
    alert("File Uploaded Successfully.");
}

function QueryFailure(sender, args) {
    console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());
}


</script>
</body>