JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label>
<input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" />
<label id="broker_image_name">no selected file</label>
    </div>

JavaScript

var upload_button = document.getElementById("broker_image");

upload_button.addEventListener("change", function() {
	var file_name = upload_button.value;
    
	/* 
    	the file come like this : C:\fakepath\file.htm
    	so we only need the file name
    */
    file_name = file_name.split("\\"); // preventing \ to be escaped himself
    var file_name_length = file_name.length;
   
    file_name = file_name[file_name_length - 1];
    
    var broker_image_name = document.getElementById("broker_image_name");
    
    broker_image_name.innerHTML = file_name;
});