JSFiddle - React, Tailwind, and code Playground

HTML

<!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">

<!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
<!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous" -->

<!-- the fileinput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->

<!-- the jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/plugins/piexif.min.js" type="text/javascript"></script>

<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- bootstrap.bundle.min.js below is needed if...

JavaScript

// Bootstrap input from https://github.com/kartik-v/bootstrap-fileinput

let waitForDisabled = function (resolve, reject) {

	console.log('waiting for disabled');
	let disabled_node = document.querySelector('input#input_id[disabled]');
  
  if ( disabled_node ) {
    // If node is found, finish
    document.body.style.background = "yellow";
  	resolve()
    console.log( disabled_node );
    
  } else {
  	// otherwise, loop
    document.body.style.background = "orange";
  	setTimeout(function() {
    	waitForDisabled( resolve, reject );
    }, 100);
  }
}

let waitForEnabled = function (resolve, reject) {

	console.log('waiting for enabled');
	let enabled_node = document.querySelector('input#input_id:not([disabled])');
  
  if ( enabled_node ) {
    // If node is found, finish
    document.body.style.background = "green";
  	resolve()
    console.log( enabled_node );
    
  } else {
  	// otherwise, loop
    document.body.style.background = "blue";
  	setTimeout(function() {
    	waitForEnabled( resolve, reject );
    }, 100);
  }
}

let uploadFile = function ( resolve, reject ) {
	// This would be uploading the file, but you should do it by hand
  
  document.body.style.background = "red";
  resolve();
};


let wait_for_it = async function () {
  
  let waiting_for_disabled = new Promise( waitForDisabled );
  
  await new Promise( uploadFile );
  
	await waiting_for_disabled;
  await new Promise( waitForEnabled );
  console.log( 'Done uploading!' );
}

wait_for_it();