FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...Yandex
История появления open source библиотеки для работы с файлами. Создание предпросмотра изображений на клиенте. Чтение файлов (exif, id3 и т.п.), загрузка результата на сервер. Всё это работает даже в IE6.
Примеры решения типичных задач за рамками ядра Yii2Paul Klimov
Рассмотрим сравнительно сложные, и в то же время, часто возникающие, задачи, для которых ядро Yii не дает готового решения. Посмотрим как из отдельных моделей ActiveRecord собирать единые сущности, и как разбивать большие модели на составляющие. Разберем как правильно сохранять файлы и как сэкономить на обработчиках событий и поведениях
- Интернационализация сущностей в базе данных;
- Обработка “ролей” в реляционных базах данных;
- Работа с файлами;
- Вложенные модели;
- Trait вместо Behavior.
Продвинутое использование ActiveRecord в Yii2Paul Klimov
Запись лекции "Продвинутое использование ActiveRecord в Yii2" от 24.09.2016, проходившей в Киеве в "Projector"
http://prjctr.com.ua/events/yii2-conference.html
Семинар пройдет в формате мастер-класса. Слушатели получат как теоритические, так и практические знания.
В рамках мастер-класса будут рассмотрены уязвимости :
• Unrestricted File Upload
• Remote File Inclusion
• Local File Inclusion
Во время мастер-класса будут рассмотрены теоретические аспекты, вышеуказанных уязвимостей, приведены примеры уязвимого исходного кода.
Слушателям будут продемонстрированы примеры эксплуатации уязвимостей, техника обхода различных фильтраций.
Кроме того, будут приведены примеры безопасного написания сценариев.
Так же у каждого будет возможность применить полученные знания на практике.
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...Yandex
История появления open source библиотеки для работы с файлами. Создание предпросмотра изображений на клиенте. Чтение файлов (exif, id3 и т.п.), загрузка результата на сервер. Всё это работает даже в IE6.
Примеры решения типичных задач за рамками ядра Yii2Paul Klimov
Рассмотрим сравнительно сложные, и в то же время, часто возникающие, задачи, для которых ядро Yii не дает готового решения. Посмотрим как из отдельных моделей ActiveRecord собирать единые сущности, и как разбивать большие модели на составляющие. Разберем как правильно сохранять файлы и как сэкономить на обработчиках событий и поведениях
- Интернационализация сущностей в базе данных;
- Обработка “ролей” в реляционных базах данных;
- Работа с файлами;
- Вложенные модели;
- Trait вместо Behavior.
Продвинутое использование ActiveRecord в Yii2Paul Klimov
Запись лекции "Продвинутое использование ActiveRecord в Yii2" от 24.09.2016, проходившей в Киеве в "Projector"
http://prjctr.com.ua/events/yii2-conference.html
Семинар пройдет в формате мастер-класса. Слушатели получат как теоритические, так и практические знания.
В рамках мастер-класса будут рассмотрены уязвимости :
• Unrestricted File Upload
• Remote File Inclusion
• Local File Inclusion
Во время мастер-класса будут рассмотрены теоретические аспекты, вышеуказанных уязвимостей, приведены примеры уязвимого исходного кода.
Слушателям будут продемонстрированы примеры эксплуатации уязвимостей, техника обхода различных фильтраций.
Кроме того, будут приведены примеры безопасного написания сценариев.
Так же у каждого будет возможность применить полученные знания на практике.
Роман Акинфеев «Разработка RESTful API with all bells and whistles»DevDay
Каждый уважающий себя интернет-сервис, ориентированный больше чем на одну платформу, сегодня имеет RESTful API. Но мало кто понимает что такое REST, с чем его едят, как готовят и чем он полезен для здоровья. Кто-то считает, что RESTful API - это API использующее в качестве транспорта протокол HTTP, кто-то думает, что REST - это стандарт в рамках которого разработчики ограничены набором ресурсов и восьмью операциями над ними. Я расскажу о том как мы в Яндекс.Диске понимаем REST, как его готовим и какую пользу он нам приносит.
Разработка крупного Standalone проекта на юнити: улучшаем производительностьВадим Воробьев
Презентация к докладу на DevGamm 2015, Минск.
В докладе рассказывлось о технических тонкостях оптимизации под ПК в Unity на примере The Godlike и приводились истории разработки. Как использовать кодогенерацию, что может профайлер Unity, как правильно работать с UI и почему не стоит связываться с LINQ.
Автор: Валерия Алексеева, веб-разработчик компании "Центр Высоких Технологий".
Использование Highload-блоков в работе. Highload-блоки - модуль для работы с произвольными наборами данных в условиях высоких нагрузок.
Роман Акинфеев «Разработка RESTful API with all bells and whistles»DevDay
Каждый уважающий себя интернет-сервис, ориентированный больше чем на одну платформу, сегодня имеет RESTful API. Но мало кто понимает что такое REST, с чем его едят, как готовят и чем он полезен для здоровья. Кто-то считает, что RESTful API - это API использующее в качестве транспорта протокол HTTP, кто-то думает, что REST - это стандарт в рамках которого разработчики ограничены набором ресурсов и восьмью операциями над ними. Я расскажу о том как мы в Яндекс.Диске понимаем REST, как его готовим и какую пользу он нам приносит.
Разработка крупного Standalone проекта на юнити: улучшаем производительностьВадим Воробьев
Презентация к докладу на DevGamm 2015, Минск.
В докладе рассказывлось о технических тонкостях оптимизации под ПК в Unity на примере The Godlike и приводились истории разработки. Как использовать кодогенерацию, что может профайлер Unity, как правильно работать с UI и почему не стоит связываться с LINQ.
Автор: Валерия Алексеева, веб-разработчик компании "Центр Высоких Технологий".
Использование Highload-блоков в работе. Highload-блоки - модуль для работы с произвольными наборами данных в условиях высоких нагрузок.
«JSSDK: Начало» Когда использовать готовые решения, а когда писать самим. Какие шаги нужно сделать, чтобы ваша работа не оказалась напрасной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере внутреннего фреймворка, который возник вследствие необходимости объединения кодовой базы двух проектов.
Кэширование данных с помощью Service WorkerAndrew Smirnov
Как хорошо вы знаете Service Worker API? А способы применения его для кэширования данных? В этом рассказе мы постараемся понять, как Service Worker может взаимодействовать с запросами, что и как кэшировать, а также как все это поможет нашим с вами сайтам загружаться значительно быстрее.
Рarse'им бэкенд
Аким Халилов
Вы хотите выучить Backbone? Хотите просто писать клиентский код, не думая о сервере и о том, как все обрабатывать, хранить, бэкапить? Выход есть – храните с помощью Parse. Parse – платформа, которая предоставляет возможность хранения данных без забот о сервере. Хранилище данных, соц. сети, push-notification, cloud code. Что такое Parse и что он умеет, о библиотеке для использования:
- знакомство с JS API и примеры использования;
- начинаем кодить: stub-проект;
- кодим фичи: CRUD + плюшки;
- хостим.
6. 6
Требования
• Множественный выбор файлов
• Получение информации (название, размер, тип)
• Создание пред-просмотра на клиенте
• Масштабирование, кадрирование и поворот
• Загрузка на сервер + CORS
7. 7
Требования
• Не зависеть от вёрстки
• Никакой бизнес-логики
• Расширяемость
• Самодостаточность
26. Информация о файле
FileAPI.getInfo(audioFile, function (err, tags){
if( !err ){
var li = document.createElement("li");
li.innerHTML = tags.artist +" – "+ tags.title;
ul.appendChild(li);
}
});
47. Загрузка
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", file);
// отправояем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
48. Загрузка
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", file);
// отправояем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
49. Загрузка
canvasToBlob(canvas, function (blob){
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", blob, "filename.png");
// отправляем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
});
58. 58
XHR
var xhr = FileAPI.upload({ … });
• status — HTTP status code
• statusText — HTTP status text
• responseText — ответ сервера
• getResponseHeader(name) — получить заголовок ответа сервера
• getAllResponseHeaders() — получить все заголовки
• abort() — отменить загрузку
66. Спустя год
• Закрыто более 100 github issue
• GruntJS (JSLint, QUnit + PhantomJS, Uglify)
• Улучшена работа с изображениями
• Добавлена поддержка работы с веб-камерой
• Разработан jQuery plugin для типовых задач
• Улучшена документация (+ примеры)
76. WebCam
navigator.getUserMedia({ video: true }, function (stream){
var video = document.getElementById("webcam");
var streamSrc = URL.createObjectURL(stream);
video.src = streamUrl;
});
77. WebCam
navigator.getUserMedia({ video: true }, function (stream){
var video = document.getElementById("webcam");
var streamSrc = URL.createObjectURL(stream);
video.src = streamUrl;
});
78. WebCam
function onTakeShot(){
var video = document.getElementById("webcam");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
}
79. FileAPI.Camera
var el = document.getElementById("webcam");
FileAPI.Camera.publish(el, function (cam){
});
80. FileAPI.Camera
var el = document.getElementById("webcam");
FileAPI.Camera.publish(el, function (cam){
FileAPI.event.on(btn, "click", function (){
var shot = cam.shot(); // FileAPI.Image instance
FileAPI.upload({ url: "...", files: shot });
});
});
81. jQuery.FileAPI
• «Одной кнопкой» — выбрать и автоматически загрузить файл
• «Ограничения» — минимальный/максимальный размер как
файла, так и изображения, по ширине и высоте
• «Работа с очередью» — сортировка и фильтрация очереди
загрузки файлов
• «Изображения» — предпросмотр, поворот и кадрирование
• «Интерфейс» — гибкая и прозрачная настройка интерфейса
• А также Drag’n’Drop и WebCam
Добрый день, меня зовут Лебедев Константин, я работаю в компании МэйлРу, проект почта. Сегодня я поделюсь с вами нашим опытом создания open source инструмента для работы с файлами и их загрузки на сервер.
По большому счету, это история из серии "а давайте все перепишем на нтмл5" и что из этого получается. Схожие проблемы испытывает любой JS разработчик при внедрении новой технологии, будь это localStorage, или IndexedDB. Везде одни и те же проблемы, это шлейф старых браузеров, разница в имплементации методов, либо их отсутствием или просто баги.
Но вернемся к теме доклада. И так, FileAPI.
Он позволял выбрать больше одного файла и получить информацию о них, такую как название, тип и размер, а для изображений создавать пред-просмотр.
Так же у него есть возможность предварительной обработки изображений: он мог масштабировать и поворачивать. Всё это происходило на клиенте, а результат отправлялось на сервер.
Однако у него был ряд недостатков. Это была flash’ка. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было тяжеловесным, а внести правки мог только flash-разработчик.
Но это ещё не всё. Так же у нас был второй загрузчик, для тех браузеров, которые не поддерживают flash.
Это был обычный js-загрузчик, который позволял выбрать один файл и загрузить его через iframe. Вот и всё что он умел.
Как вы понимаете…
Вот так, появилась задача переписать наш загрузчик файлов. Тут я бы хотел пояснить, на выходе, мы хотели получить унифицированное API, которое бы работало в независимо от окружения и его можно было использовать не только в рамках проекта “Почта@Mail.ru”, но и где угодно.
Для этого API были сформированы следующие требования:
Во первых, необходимо сохранить текущую функциональность. Все что умел старый загрузчик, нужно перенести в новый.
Во вторых, надо избавиться от недостатков. Бизнес-логика, верстка и тп, не должно содержаться в загрузчике. Только работа с файлами и как можно лучше, все остальное не его задача. В третьих, расширяемость. Если завтра окажется, что нужно получать id3 теги аудио-файла, это не должно стать сюрпризом.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Как видите, уже более 87% браузеров поддерживают FileAPI. IE обзаведется поддержкой только с 10 версии. Но 87, это далеко не 95% и даже 90% пользователей, так что от флешь отказываться рано!
Таким образом, задача свелась к созданию механизма, который совмещал бы в себе обе технологии и реализованный так, чтобы конечному разработчику было не важно как это происходит.
Рассмотрим на конкретных примерах, как проходил процесс разработки.
Таким образом, задача свелась к созданию механизма, который совмещал бы в себе обе технологии и реализованный так, чтобы конечному разработчику было не важно как это происходит.
Рассмотрим на конкретных примерах, как проходил процесс разработки.
На HTML5, это выглядит следующим образом: Получаем ссылку на инпут, далее подписываемся на событие change
На HTML5, это выглядит следующим образом: Получаем ссылку на инпут, далее подписываемся на событие change. И когда оно срабатывает, получаем список файлов прямиком из него.
Но что делать когда не поддерживается FileAPI, но за то поддерживается Flash? Основным принципом работы с flash, в том, что всё взаимодействие происходит непосредственно через через него, т.е. нельзя просто взять и вызвать диалог выбора файлов. Для этого, необходимо чтобы пользователь кликнул по flash, и только в этот момент открыть диалог, такова политика безопасности, диалог можно открыть только на действие пользователя.
Поэтому flash объект размещается над нужным input. Сделано это очень просто, вешается обработчик события mouseover на весь документ и при наведении на input, публикуем flash-объект в его родитель, относительно которого и позиционируем с нужными размерами.
При клике по флешке открывается диалог выбора файлов, пользователь там что-то выбирает и кликает «ОК». После чего, данные получает flash, которые всю очередь передает их JS, посредством вызова callback-функции. После чего JS связывает полученные данные с нужным инпутом и эмулирует событие “change”.
При клике по флешке открывается диалог выбора файлов, пользователь там что-то выбирает и кликает «ОК». После чего, данные получает flash, которые всю очередь передает их JS, посредством вызова callback-функции. После чего JS связывает полученные данные с нужным инпутом и эмулирует событие “change”.
Все дальнейшее взаимодействие между JS и flash, будет осуществляется через единственный доступный метод у flash, первый аргументом передается название команды, вторым объект параметров, с двумя обязательными полями: id-файла и callback. Callback будет вызван из flash, по завершению команды.
После совмещения двух способов, получилось вот такое API, оно максимально приближено к нативному js, единственное различие, это способ получения файлов. Теперь мы используем метод API, тк свойство files у инпута есть только в том случае, когда браузер поддерживает HTML5/FileAPI, в случае с Flash список берется из связанных с ним данных.
После совмещения двух способов, получилось вот такое API, оно максимально приближено к нативному js, единственное различие, это способ получения файлов. Теперь мы используем метод API, тк свойство files у инпута есть только в том случае, когда браузер поддерживает HTML5/FileAPI, в случае с Flash список берется из связанных с ним данных.
Следующим важным шагом, является фильтрация. Как правило, при загрузке файлов, есть ряд ограничений, таких как размер или тип. Хотя в почте и можно прикреплять любые файлы, для нас было важным получить универсальное решение, так что фильтрация необходима. В чем же её сложность?! Вся соль в том, что изначально, после получения списка файлов, мы имеем только минимальный сведения, такие как название, размер и тип. Но, что делать, когда нужно получить id3 теги или размеры изображения?
Все просто, файл нужно прочесть. Для этого в существует FileReader, которые позволяет асинхронно читать файл. И на основе результата чтения, получить нужную информацию, а так как для разных типов файлов, есть свой способ её получения, мы реализовали получение только размеров изображения, как на HTML5, так и через флеш. Но, оставили возможность добавлять свои обработчики, для сбора инфы, в которых разработчик может написать свою реализацию, либо использовать готовое решение.
Вот так выглядит метод фильтрации, первым аргументом передаем список файлов, вторым саму функцию фильтрации и третьим callback-который будет вызван по завершению. На выходе получаем два массива, с файлами которые подошли под условия и со всем остальными.
Так же существует метод получения информации для конкретного файла.
Одной из ключевых особенностей нашего flash-загрузщика, была возможность создавать предросмотр изображений. Проблема была в том, что превью было частью flash, те рисовалась в нем. В API такого быть не должно. Но как передать изображение из Flash в HTML?
В этом нам поможет DataURI — это определённая стандартом схема, которая позволяет включать небольшие элементы данных в строку и использовать в качестве ссылки, в данном случае в качестве src изображения.
Flash читает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как src изображения.
Flash читает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как src изображения.
Flash читает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как src изображения.
На хтмл5 тоже не без сюрпризов, есть два способа получить изображение. Первый способ, это прочесть файл как DataURL, при помощи FileReader. Второй, createObjectURL — создает ссылку на файл, связанную с текущим табом. Конечно для создания пердпросмотра достаточно второго способа, но не все бразуеры его поддерживают.
Так же у Оперы нет метода revokeObjectURL, который сообщает браузеру, что больше не нужно держать ссылку на файл.
Класс, обладает следующими методами: кадрирование, масштабирование, поворот и preview, который автоматически кадрирует и масштабирует. Все эти методы заполняют матрицу трансформации и только при вызове метода get, она будет применена. Трансформация происходит через canvas или внутри flash, когда работает через него.
Трансформация происходит через canvas или внутри flash, когда работает через него. Вот так выглядит та самая матрица,
Вот так выглядит создание пердпросмотра 120х120 пикселей, вызываем метод preview, передаем требуемые размеры и вызываем метод get, на вход которого передаем callback, который будет вызван по завершению.
Отдельно отмечу процесс ресайза. Если нужно получить превью 100х100, а оригинал примерно 10 МПх, а это вполне реальная ситуация, сейчас каждая мыльница кичится количеством мега-пикселей, то вы получите изображение, примерно такого качества.
Как видите, ничего хорошего, сплошные искажения.
Но, если сжимать в два раза, потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше.
Но, если сжимать в два раза, потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше. Вот, сравните, разница на лицо.
Но, если сжимать в два раза, потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше. Вот, сравните, разница на лицо.
Еще мы пробовали другие способы, такие как бикубическая интерполяция и алгоритм Ланцоша. Они конечно дают лучший результат, но очень медленные, 1.5сек против 200-300милисекунд. Также данный метод дает одинаковый результат в cavnas и flash.
Последняя и основная возможность нашего API, это конечно же загрузка файлов на сервер.
Вот так выглядит самый простой способ загрузки файлов.
Для улучшение ситуация, добавляем в форму iframe с уникальным именем, а у формы такой же target. Теперь при сабмите, форма будет отправлена в этот ифрейм. Этот способ позволяет избавиться избавиться от обновления страницы, также работает во всех браузерах, есть возможность получить ответ от сервера, но не дает сведений о ходе загрузки.
Последний способ, отправить файл на сервер, не считая flash, это XmlHttpRequest2 и FormData. Он позволяет отправить не просто тестовые данные, но и бинарные.
FormData — позволяет создать набор ключ-значение. У неё есть единственный метод append, первым аргументом задаётся название POST-параметра, вторым строка или файл, также есть третий аргумент, название файла, но его пока не все поддерживают.
Далее при помощи XmlHttpRequest отправляет собранные данные на сервер. Но ничего не бывает так просто. Как я уже говорил ранее, API должно уметь отправлять модифицированное изображение.
Т.к. все трансформации идут через canvas, то именно его и нужно отправить на сервер и это можно сделать, при помощи трансформации canvas в blob, её можно реализовать практически во всех браузерах. Но там, где это невозможно, а это например Opera, мы загружаем cavnas ручного составления мултипарт запроса. И в этом случае, мы делаем следующее:
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Справедливости ради замечу, что данный способ используется и для тех браузеров, которые не поддерживают FormData. Т.е. При помощи FileReader читаем файл как DataURL и по такой же схеме отправляем их на сервер.
На вход ему передается объект параметров: «куда заливать», «дополнительная POST-дата» и «заголовки запроса», также обработчики событий, как для слежения за ходом всей загрузки, так и отдельным файлом. Хотя HTML5 позволяет грузить все файлы сразу, стандартный механизм Flash’а нет, плюс это не очень удачная идея, пользователь может и передумать.
На вход ему передается объект параметров: «куда заливать», «дополнительная POST-дата» и «заголовки запроса», также обработчики событий, как для слежения за ходом всей загрузки, так и отдельным файлом. Хотя HTML5 позволяет грузить все файлы сразу, стандартный механизм Flash’а нет, плюс это не очень удачная идея, пользователь может и передумать.
Это позволяет перенести часть нагрузки по обработке изображений с сервера, на клиент.
Так же функции upload возвращает xhr-образный объект, т.е. он реализует некоторые свойства и методы XmlHttpRequest, такие как
Но это еще не все, на самом деле, это прокси объект. Его методы и свойства отражают состояния именно для того файла, который грузится в данный момент.
100 задач, это примерно 2 задачи в неделю. Будьте готовы отвечать на самые разнообразные вопросы, некоторые будут глупыми, другие полезными. Людей много, их задачи очень разные. Но всё это только улучшает как код библиотеки, так и её возможности.