Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

03.10.2023

Робота з файлами безпосередньо в браузері

Трапляються задачі, коли файли нам не приходять з бекенду, а утворюються саме в браузері. Тоді варто знати, що сучасні браузери здатні створювати файли практично для будь-якого застосування, та бекенд нам більше не потрібний.

• Класичний механізм data-url згодиться не тільки на включення зображень в CSS, але і як заміна будь-якого посилання — наприклад, як джерело зображення, яке створене динамічно та підключене вже в HTML. Інтуїтивно здається, що посилання мають бути короткими, але це зовсім не так. Найменше обмеження наразі в Firefox - 32 Мб. Обмеження на Data URL в Chromium та Webkit абсолютно космічні - 512 Мб та 2 Гб відповідно.

• Blob підійде там, де довжелезні посилання не підходять (наприклад, як адреса сторінки). На Blob теж можна утворити посилання функцією URL.createObjectURL та використати його будь-де, поки живий документ або вебворкер, де це посилання було створене. Блоби теж мають обмеження до 2 Гб — є де розгулятись.

• В адрес блобів є один недолік — вони не дозволяють вказати назву, а генерують її з UUID, тож під час завантаження будуть збережені в файл з назвою з UUID та навіть без розширення. Якщо ми хочемо надати файл для завантаження, то це, звісно, неприйнятний UX. Тому є інша можливість, а саме атрибут <a download >. В ньому як раз можна вказати назву файлу для завантаження. Це працює також з Data URL, а ще з коли справжнє посилання не містить корисного імені файлу (наприклад, /files/123/export).

• Нарешті, ще є зручна бібліотека FileSaver, яка абстрагує всі ці подробиці та просто дає функцію saveAs().