نگهداری فایل تصویری در تگ input با تایپ file بعد از رفرش شدن صفحه

با سلام
میخوام از طریق یک فرم فایل تصویری اپلود کنم
اگه بخواهیم بعد اینکه یه فرم سابمیت شد و به خطای اعتبار سنجی برخورد و به صفحه ایجاد مثالا مقاله برگشت داده های وارد شده همچنان توی فرم باقی بمونن مقدارهای input از نوع متنی رو تو لاراول با متد old دریافت می کنیم و در تگ های متنی قرار میدهیم که دادهای واردشده برای فرم از بین نره و تو فرم باقی بمونه حالا
ما این کار رو چطوری میتونیم برای فایل انجام بدیم که کاربر هی لازم نباشه بعد ریدایرکت شدن به فرم ایجاد مقاله فایلو مجدد انتخاب کنه و بجاش فایل اتومات دوباره سرجای خودش قرار بگیر و نیاز به انتخاب مجدد نباشه.
من این کارو کردم اما نوع فایل تا حدودی تغییر کرده و خطای اعتبارسنجی فایل رو در سمت کدهای بکندرو برمیگردونه
این تگ فایل هستش:

<input type="file" id="photo" name="photo" accept=".png, .jpg, .jpeg"/>

اینم کدهای جاواسکریپت

const inpFile = document.getElementById('photo');
        inpFile.addEventListener('change', function () {
            const file = this.files[0];
            console.log(file);
            if (file) {
                const reader = new FileReader();
                reader.addEventListener('load', function () {
                    localStorage.setItem('category-image', this.result);
                });
                reader.readAsDataURL(file);
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
            const recentImageDataUrl = localStorage.getItem('category-image');
            if (recentImageDataUrl) {
                const pre = document.getElementById('image-input-wrapper');
                pre.setAttribute('style', 'background-position: center center; background-size: 100% 100%; background-image: url("' + recentImageDataUrl + '")');

                const inpFile = document.getElementById('photo');
                const myFile = new File([recentImageDataUrl], 'category.jpg', {
                    type: 'image/jpeg',
                    lastModified: new Date(),
                });

                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(myFile);
                inpFile.files = dataTransfer.files;
            }
        })

و این هم اعتبار سنجیش

        'photo' => ['nullable', 'max:10000', 'mimes:jpg,jpeg,png'],

دراعتبار سنجی به قسمت mimes گیر میده
فکر میکنم من این کارو به صورت کامل با جاواسکریپت انجام ندادم و همین باعث خطای اعتبار سنجی میشه
دوستان اگه نظری دارن بفرماین