Zupload

Customed Upload File

by Mohamed ZEMMOURI

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<h1>
Bootstrap 5 Custome File Upload
</h1>
	<div class="container">  
		<div class="mb-3 row">
			<label class="col-form-label col-sm-3 col-12">Plan PDF</label>
			<div class="col-sm-9 col-12 ">
				<div class="input-group">	
					<input type="file" id="uploadFile_Plan_PDF" class="Zupload" accept="application/pdf" hidden/>
					<button type="button" class="btn btn-outline-secondary">
						<i class="fa-solid fa-file-pdf"></i>
					</button>
					<input readonly="readonly" type="text" class="form-control">                                
					<button type="button" class="btn btn-outline-secondary" disabled>
						<i class="fa-solid fa-eye"></i>
					</button>
					<button type="button" class="btn btn-outline-secondary">
						<i class="fa-solid fa-times"></i>
					</button>
				</div>
			</div>
		</div>
		<div class="mb-3 row">
			<label class="col-form-label col-sm-3 col-12">Plan Image</label>
			<div class="col-sm-9 col-12 ">
				<div class="input-group">	
					<input type="file" id="uploadFile_Plan_Image" class="Zupload" accept="image/*" hidden/>
					<button type="button" class="btn btn-outline-secondary">
						<i class="fa-solid fa-image"></i>
					</button>
					<input readonly="readonly" type="text" class="form-control">                              
					<button type="button" class="btn btn-outline-secondary" disabled>
						<i class="fa-solid fa-eye"></i>
					</button>
					<button type="button" class="btn btn-outline-secondary">
						<i class="fa-solid fa-times"></i>
					</button>
				</div>				
			</div>
		</div>
	</div>

JavaScript

const collection_uploadFile = document.querySelectorAll(".Zupload");
for (let i = 0; i < collection_uploadFile.length; i++) {
  let uploadFile = collection_uploadFile[i]
  let buttonUpload = uploadFile.nextElementSibling;
  let textBoxUpload = buttonUpload.nextElementSibling;
  let buttonView = textBoxUpload.nextElementSibling;
  let buttonClear = buttonView.nextElementSibling;				

  uploadFile.addEventListener('change', function (e) {
    textBoxUpload.value = this.value;
    buttonView.disabled = this.value?false:true;
  });
  buttonUpload.addEventListener('click', function (e) {uploadFile.click();});
  textBoxUpload.addEventListener('click', function (e) {uploadFile.click();});
  buttonClear.addEventListener('click', function (e) {
    uploadFile.value =""; 
    uploadFile.dispatchEvent(new Event("change"));
  });
}