imageLoader

 const imageLoader = {
            img: null,

            createPreviewImage: function () {
                this.img = document.createElement("img");
                this.img.classList.add("w-100");
                this.img.classList.add("mb-1");
                this.img.style.maxWidth = '350px';
                this.img.setAttribute('id', 'preview_image');
            },

            showImage: function () {
                $('#preview_image').remove();
                $('#btn_image').before(this.img);
            },

            fetchImageFileByUrl: async function (url) {
                const fileName = url.split("/").pop();
                const fileExt = url.split(".").pop();

                const data = await fetch(url);
                const buffer = await data.arrayBuffer();
                const blob = new Blob([buffer]);
                return new File([blob], fileName, {type: "image/" + fileExt});
            },

            loadFileToFileInput: function (fileInput, file) {
                const tmp = new ClipboardEvent('').clipboardData || new DataTransfer();
                tmp.items.add(file);
                fileInput.files = tmp.files;
            },

            loadImageByCategoryId: function (id) {
                this.createPreviewImage();

                $.get('/api/category/' + id + '/get_image', async function (fileUrl) {
                    const file = await this.fetchImageFileByUrl(fileUrl);
                    const fileInput = $('#image')[0];

                    this.loadFileToFileInput(fileInput, file);
                    this.img.src = fileUrl;
                    this.showImage();
                }.bind(this))
            }
        }