<div id="drop-area">
				<div class="upload-area">
			  		<div>
			  			<form class="my-form">
			    			<p style="color:#FF0000"><h3>Upload Files Here </h3>
			   	 			<input type="file" id="fileElem" multiple  onchange="handleFiles(this.files)">
			   	 			<label class="button" for="fileElem">Select some files</label>
			  			</form>
						<progress id="progress-bar" max=100 value=0></progress>
			  		</div>
  		
			 		 <div id="gallery" /></div>
				</div>
			</div>

JavaScript

 // ************************ Drag and drop files ***************** //
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')								
let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)   
document.body.addEventListener(eventName, preventDefaults, false)
})

// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})

;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults (e) {
			  e.preventDefault()
			  e.stopPropagation()
			}
function highlight(e) {
			  dropArea.classList.add('highlight')
			}
function unhighlight(e) {
			  dropArea.classList.remove('active')
			}
function handleDrop(e) {
			  var dt = e.dataTransfer
			  var files = dt.files

			  handleFiles(files)
			}
function initializeProgress(numFiles) {
			  progressBar.value = 0
			  uploadProgress = []

			  for(let i = numFiles; i > 0; i--) {
			    uploadProgress.push(0)
			  }
}
function updateProgress(fileNumber, percent) {
			  uploadProgress[fileNumber] = percent
			  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
			  console.debug('update', fileNumber, percent, total)
			  progressBar.value = total
}

function handleFiles(files) {

			  files = [...files]
			  initializeProgress(files.length)
			//	all_files = files;
			  files.forEach(uploadFile)
			  files.forEach(previewFile)
}
function previewFile(file) {
			  let reader = new FileReader()
			  reader.readAsDataURL(file)
			  reader.onloadend = function() {
			    let img = document.createElement('img')
			    img.src = reader.result
			    document.getElementById('gallery').appendChild(img)
			  }
			}
function uploadFile(file, i) {

			  var token = $("#token").val();	
			  var url = 'https://programmerdesign.com/yonfile/transaction/upload_file?id=&access-token='+token;
			  var xhr = new XMLHttpRequest()
			  var formData = new FormData()
			  xhr.open('POST', url, true)
			  xhr.responseType ='json'
			  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

			  // Update progress (can be used to show progress indicator)
			  xhr.upload.addEventListener("progress", function(e) {
			    updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
	  
			  })

			  xhr.addEventListener('readystatechange', function(e) {
			    if (xhr.readyState == 4 && xhr.status == 200) {
	
					addItem(xhr.response.data);
		
			      updateProgress(i, 0) // <- Add this
					$('#gallery').html("");
			    }
			    else if (xhr.readyState == 4 && xhr.status != 200) {
			      // Error. Inform the user
			    }
			  })
			
  formData.append('upload_preset', 'ujpu6gyk')
  formData.append('submit', true)
  formData.append('file', file)
  xhr.send(formData)
  
  
}