JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" name="pic" accept="image/*">
<script type="text/javascript">
  document.write("\<script src='https://raw.githubusercontent.com/walling/unorm/master/lib/unorm.js' type='text/javascript'>\<\/script>");
</script>
<div>
  <div class="string">Converted string : <span class="result"></span></div>
  <div class="filename">Converted filename : <span class="result"></span></div>
</div>

JavaScript

$(document).on('change', 'input[type=file]', function() {

    var files = this.files;

    for (var i = 0; i < files.length; i++) {
      (function(file) {
        // Assuming the file name is áñǽŦõş
        var _string = 'äöüß', // 'áñǽŦõş.jpg',
            _filename = file.name;

        $('.string .result').html(convertAscii(_string.normalize('NFC')));
        $('.filename .result').html(convertAscii(_filename.normalize('NFC')));

      })(files[i]);
    }
    
});
    
function convertAscii(str) {
	//convert German umlauts (normalized using nfc: Canonical Decomposition, followed by Canonical Composition)
	tr = {"\u00e4":"ae", "\u00fc":"ue", "\u00f6":"oe", "\u00df":"ss" }
    str = str.replace(/[\u00e4|\u00fc|\u00f6|\u00df]/g, function($0) { return tr[$0] })
	//... add more..
	
	return str;
}