Comments 24
поддержка отправки файлов через iframe для старых браузеров
На сколько древним должен быть браузер чтобы не уметь отправлять файлы через XHR? Мне казалось, это уже в прошлом и не актуально.
Молодец! Отличная работа!
Отлично. Давно подобное напрашивается. Обязательно буду смотреть.
Офигеть. 5 часов в эфире и всего +6 голосов за статью. Года три назад сотня была бы точно.
Офигеть. 5 часов в эфире и всего +6 голосов за статью. Года три назад сотня была бы точно.
Потому что года три назад никто ничего не знал про Angular, React и прочие, а также про HTML5 File Api, WhatWG Fetch и тд. Зачем в 2016 году библиотека по работе с формами — не ясно.
Разве Angular, React и HTML5 File API предоставляют возможность отправлять формы через AJAX, без кучи `new XMLHttpRequest()` для каждой формы? Даже если отмести все старые браузеры (а далеко не всегда это возможно) и выкинуть из библиотеки `ajax-iframe-transport` и `form-attributes-polyfill`, всё равно остаётся много полезного функционала — ajax отправка форм без единой строчки кода, стилизация состояния отправки, возможность навешивать обработчики отправки форм после других скриптов и др.
Если вы найдёте простой способ это реализовать на react и angular без написания аналогичного скрипта — будет очень интересно посмотреть.
Если вы найдёте простой способ это реализовать на react и angular без написания аналогичного скрипта — будет очень интересно посмотреть.
Смотрите
Вот и все, и работает почти везде.
Про стилизацию я вообще молчу — она у всех разная, на реальном сайте я быстрее напишу CSS с нуля, чем буду накручивать любой коробочный. А любые визуальные фидбеки отправки я навешу в одно действие в .then и .catch.
var f = new FormData(), d = document, byId = d.getElementById;
f.append('text', byId('text').value); // текстовые значения
f.append('file', byId('file').files[0]); // файлы из формы
f.append('file2', new File([JSON.stringify(...whatever...)], 'request.json', {type: 'application/json'})); // произвольное барахло
fetch('url', {method: 'post', body: f}).then(...).catch(...);
Вот и все, и работает почти везде.
Про стилизацию я вообще молчу — она у всех разная, на реальном сайте я быстрее напишу CSS с нуля, чем буду накручивать любой коробочный. А любые визуальные фидбеки отправки я навешу в одно действие в .then и .catch.
Я могу такой же короткий пример написать на ультра-старом jQuery, но ваш пример не решает и половины проблем, которая решает библиотека. А как только вы их решите, ваш ультра короткий и лаконичный код распухнет как минимум до 4 кбайт, который надо будет тащить из проекта в проект.
PS В конструктор FormData пожно передать саму форму, тогда append() вообще не надо.
PS В конструктор FormData пожно передать саму форму, тогда append() вообще не надо.
jQuery еще подключить надо. А вышеописанное — стандартная библиотека, которая есть везде, совместимая с любым React/Angular/PlainVanilla.
Библиотека решает надуманные проблемы, ничего общего не имеющие с реальным миром и реальными сайтами. Любой серьезный проект так или иначе будет иметь код, отвечающий за весь трафик, включая формы. А для проекта на коленке сгодится и прямое использование стандартных средств браузера. Получается, ни туда, ни сюда библиотека.
Прошли те годы, когда подобное было актуально, лет 5 назад вы бы получили море звезд и хвалебных отзывов, но времена поменялись.
Библиотека решает надуманные проблемы, ничего общего не имеющие с реальным миром и реальными сайтами. Любой серьезный проект так или иначе будет иметь код, отвечающий за весь трафик, включая формы. А для проекта на коленке сгодится и прямое использование стандартных средств браузера. Получается, ни туда, ни сюда библиотека.
Прошли те годы, когда подобное было актуально, лет 5 назад вы бы получили море звезд и хвалебных отзывов, но времена поменялись.
Тут есть другой критерий полезности/нужности — насколько часто встречаются формы на современных сайтах? Если это форма постинга в блог или форма отправки заказа в интернет-магазине, то все задачи решаются соответствующими движками из коробки. Но если у разработчика специфический заказ и у него на каждой странице по несколько форм (какая-нибудь не к ночи будет сказано online-ERP система), то библиотека и может быть полезна.
По поводу стилизации, по умолчанию просто добавляются CSS-классы в форму — стилизуй как хочешь. Кроме того, есть поддержка js-шаблонов, и на крайний случай, всегда можно подцепиться на события `submitstart` и `submitend` и застилизовать произвольным образом. То есть ничего «коробочно» не навязывается.
А как насчет валидации (клиентской и серверной), а также распихивания ошибок по полям? Вы поймите, прошли те времена, когда юзеры брали скрипт и впендюривали его на страницу, сейчас все живут в некой экосистеме, будь то Angular, React, Knockout, Ember или любая другая, где есть уже шаблоны, есть событийная модель и тд и тп.
Angular, React и HTML5 File API предоставляют возможность отправлять формы через AJAX
Не могу со 100% уверенностью сказать за остальные помимо Angular(ибо я занимаюсь back-end), но со 100% уверенностью говорю, что Angular позволяет. Более того, вполне себе позволяет создавать целые сервисы и директивы с формами с вытекающими отсюда плюшками в виде реюзабельности и наследования. Думаю, что React тоже это позволяет.
Спасибо, будем пробовать! Никогда не задумывался, а теперь вот подумал — как я раньше без этой штуки жил?
Ни одного теста не увидел в репозиториях. Это я плохо смотрел или у вас их правда нету?
В наше время это уже не актуально.
Смотрите выше.
когда читаю, как в очередной раз, вместо того, чтобы хорошо знать язык сайтокодеры подключают очередные файлы к странице — печалюсь: это не сайт перегружен всяким барахлом, а телефон у вас тупой, браузер медленный, пальцы кривые, рожей не вышел и т.д.
P.S. вероятно это будет уже 5й коммент подряд не одобренный администрацией.
P.S. вероятно это будет уже 5й коммент подряд не одобренный администрацией.
Если вы про библиотеку автора — то прошу пояснить, что же конкретно в ней плохо. В ней собраны юзкейсы, которые встречаются постоянно. Why not?
Что-то я не понял, что вы хотели сказать своим комментарием? Откройте какой-нибудь мега современный сайт на angular/react (например tinkoff.ru) и прочем и посмотрите сколько там скриптов подключается. Современные сайты действительно имеют много JS-кода, без него сейчас красивого и удобного сайта не сделать.
UFO just landed and posted this here
Если имеют много JS, это же не значит, что это хорошо. Удобный сайт спокойно может без JS обойтись. Ну, или самый минимум, десяток-другой строк кода, без каких-либо фреймворков. А красота — вообще субъективна, а потому — да, и красивый сайт тоже можно без JS сделать.
Sign up to leave a comment.
Библиотека, облегчающая разработку форм на сайтах (v3)