presetFiles doesn't work with base64 encoded binary image string about file-upload-with-preview HOT 4 CLOSED

//  Wait for the page to be fully loaded
window.addEventListener('load', function () {

// Grab the data attribute data
var additionalImg = document.querySelector('#additional_img');

let tmpImg = additionalImg.dataset.addtimg;
// Check if there is any image in DB, if not, intialize the library with default options
if (tmpImg) {
  // Initialise the library
// Initialise the library
var upload = new FileUploadWithPreview('addtImageUploadId', {
	//Populate the form with the data attribute
	presetFiles: additionalImg.dataset.addtimg.split(',')
})

	// This is how we tell the to delete the current images.
  let clearButton = document.getElementById('addtclearButton')
  clearButton.addEventListener('click', function() {
	  document.getElementById("addtclearbox").value = 1;
  })

}
else {
	// Initialise the library
   var upload = new FileUploadWithPreview('addtImageUploadId', {})
}
})

<div class="row mb-3">
	<label for="file" class="col-sm-2 form-label"><?= lang('Backend.additional_image') ?></label>
	<div class="col-sm-10" id="additional_img" data-addtimg="<?= $data_additional_img ?? null ?>">
		<div class="custom-file-container" data-upload-id="addtImageUploadId">
			<label><a href="javascript:void(0)" class="custom-file-container__image-clear" id="addtclearButton" title="<?= lang('clear_image') ?>"><?= icon('trash', '16', 'text-danger') ?></a></label>
			<label class="custom-file-container__custom-file" >
				<input type="file" name="addtimgcategory[]" id="addtimgcategory" class="custom-file-container__custom-file__custom-file-input" accept=".jpg, .jpeg, .png, .gif" aria-label="<?= lang('choose_file') ?>">
				<input type="hidden" name="addtclearbox" id="addtclearbox" value="0">
				<span class="custom-file-container__custom-file__custom-file-control"></span>
			</label>
			<div class="custom-file-container__image-preview"></div>
		</div>
	</div>
</div>

data-addtimg="<?= $data_additional_img ?? null ?>">