Upload files in web, naked truth

Download as PPTX, PDF

0 likes86 views

Документ обсуждает реализацию загрузки файлов и папок в веб-приложениях с использованием API и UX-методов. Рассматриваются проблемы, такие как разрывы соединения и ограничения сети, и предлагаются решения, включая использование drag&drop и webkitdirectory. Включены примеры кода и статистика по загруженным альбомам и песням.

Голая правда про
файлы
Egor Malkevich
Все права защищены 18+2016

Я несу ангуляр людям

Что может быть
проще?

785
типов

А теперь по порядку

Сказ про API

C давних пор

Upload files in web, naked truth

Upload files in web, naked truth

Upload files in web, naked truth

Upload files in web, naked truth

Пара слов о progress bar

А что насчет папок?

Upload files in web, naked truth

File API

Постановка задачи

Upload files in web, naked truth

Прочувствуем
проблему

1. Банальный разрыв соединения

2. Банально комп уснул

3. Ограничение сети

4. Приватность

5. Размер

6. Пользователь не хочет париться

Пробуем решить в лоб

Upload files in web, naked truth

Just to note

Как это работает

Как только загружаем несколько файлов

Upload files in web, naked truth

А теперь к решению

Самый UX продвинутый способ

Жесткий диск в OS это
папка
WebKitDirectory VS File API

WebKitDirectory
Умеет грузить папки
через window диалог
Почему то не
работает с drag&drop
Грузит файлы как файлы
не как entry

File API
НЕ УМЕЕТ грузить папки
через window диалог
Отлично РАБОТАЕТ
с drag&drop
Грузит файлы как
как entry

File API

Шаг 1.
File DTO Entry DTO
FolderDTO

Шаг 2.
Определяем стратегию сканирования

Шаг 3.

Как в этой логике проверять
пользователя непонятно

В js нельзя определить
mime тип файла

setTimeout

JS умеет считывать 100
entries за такт

Нету какого то способа
ограничить скорость на загрузку в
браузере

Более подробные примеры
кода тут
ps://gist.github.com/wegorich/1681b7ff17054ebf8873794ef4aec5

Хороший пример загрузки
директорий можно посмотреть
тут

А теперь к UX
Грузим
видосы
Грузим
картинки
Грузим
песенки

Один минус в идеальном
случае надо дропать файл

Мы знаем что искать
Найдено 20 видосов,
просканированно 100500 папок

Следовательно знаем как
отобразить
Найдено 42 альбома,
просканированно 100500 папок
Альбом Криса брауна (8 песен)
Justin Timberlake (4 песни)
Кураж бамбей (1 песня)
Форсаж OST (45 песен)

Итоговый результат
Найдено 42 альбома, 1 загружен,
просканированно 100500 папок
Альбом Криса брауна (8 песен)
Justin Timberlake (4 песни)
Кураж бамбей (1 песня)
Форсаж OST (45 песен)
34%
Justin Timberlake 34% (360 mb / 765 mb) 165 kb/s 5 min left

Еще пару слов

Для сервера советую

Вообще для файлового
сервера можно заюзать

Как неплохую
файлопомойку можно
заюзать

В докладе принимали участие:
Egor Malkevich
Картинки
Немножко текста
И всякие ссылочки

Ad

Recommended

PPTX

«Домовёнок кузя изгоняет лешего»

Olga Lavrentieva

PDF

Пути роста практикующего инженера

PDF

BeeGo для веб приложений, API и демонов

PDF

Документирование блоков. Раскрываем все плюсы

PDF

Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс

PDF

Введение в язык программирования Go

PDF

Диалог с воображаемым слушателем, а также поток сознания, вне контекста НЕ ИН...

Alex Chistyakov

PDF

Фронтенд разработка без боли

PDF

Golang

PDF

Проект Readry.net

GreenfieldProject

PDF

Плюсы и минусы Go для разработчиков на C++, Вячеслав Бахмутов

PDF

Илья Биин: Организация совместной работы Go и Python-based сервисов в Ostrovo...

PDF

Готовим код  в мир открытых исходников

PDF

Go в автобусе

PDF

Go в продакшене Яндекса: отчёт после года использования — Вячеслав Бахмутов

PDF

Сравнение технологий aiopg & asyncpg, Алексей Фирсов. 22 июня, 2019

PPTX

Php and frameworks

Alexandr Drobyshevsky

PPTX

социальные сервисы

PDF

Паша Мурзаков: Как 200 строк на Go помогли нам освободить 15 серверов»

Badoo Development

PPTX

Обзор интернет браузеров

PDF

Стабы для фронтенда - Никита Мостовой (HeadHunter)

PDF

Как ВКонтакте использует Go

PDF

Павел Пушкарев — «Развертывание верстки»

DOCX

"김정은"도 비아그라 먹는다 DDF11.KR 카톡:DDF11 시알리스50mg정품구입,시알리스100mg정품판매,시알리스100mg정품구입,시알...

DOCX

"김정은"도 칙칙이 사용한다 DDF11.KR 카톡:DDF11 칙칙이50mg판매,칙칙이100mg판매,칙칙이100mg정품판매처,칙칙이100mg...

PPTX

Carpe momentum: How to seize the moment using Audience Engagement Technology....

PPTX

Golf Course Architects

PDF

Ps access1.3

PDF

Summer Forum | IS Associates

PDF

Entrelinhas

More Related Content

PPTX

«Домовёнок кузя изгоняет лешего»

Olga Lavrentieva

PDF

Пути роста практикующего инженера

PDF

BeeGo для веб приложений, API и демонов

PDF

Документирование блоков. Раскрываем все плюсы

PDF

Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс

PDF

Введение в язык программирования Go

PDF

Диалог с воображаемым слушателем, а также поток сознания, вне контекста НЕ ИН...

Alex Chistyakov

PDF

Фронтенд разработка без боли

«Домовёнок кузя изгоняет лешего»

Olga Lavrentieva

Пути роста практикующего инженера

BeeGo для веб приложений, API и демонов

Документирование блоков. Раскрываем все плюсы

Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс

Введение в язык программирования Go

Диалог с воображаемым слушателем, а также поток сознания, вне контекста НЕ ИН...

Alex Chistyakov

Фронтенд разработка без боли

What's hot (15)

PDF

Golang

PDF

Проект Readry.net

GreenfieldProject

PDF

Плюсы и минусы Go для разработчиков на C++, Вячеслав Бахмутов

PDF

Илья Биин: Организация совместной работы Go и Python-based сервисов в Ostrovo...

PDF

Готовим код  в мир открытых исходников

PDF

Go в автобусе

PDF

Go в продакшене Яндекса: отчёт после года использования — Вячеслав Бахмутов

PDF

Сравнение технологий aiopg & asyncpg, Алексей Фирсов. 22 июня, 2019

PPTX

Php and frameworks

Alexandr Drobyshevsky

PPTX

социальные сервисы

PDF

Паша Мурзаков: Как 200 строк на Go помогли нам освободить 15 серверов»

Badoo Development

PPTX

Обзор интернет браузеров

PDF

Стабы для фронтенда - Никита Мостовой (HeadHunter)

PDF

Как ВКонтакте использует Go

PDF

Павел Пушкарев — «Развертывание верстки»

Golang

Проект Readry.net

GreenfieldProject

Плюсы и минусы Go для разработчиков на C++, Вячеслав Бахмутов

Илья Биин: Организация совместной работы Go и Python-based сервисов в Ostrovo...

Готовим код  в мир открытых исходников

Go в автобусе

Go в продакшене Яндекса: отчёт после года использования — Вячеслав Бахмутов

Сравнение технологий aiopg & asyncpg, Алексей Фирсов. 22 июня, 2019

Php and frameworks

Alexandr Drobyshevsky

социальные сервисы

Паша Мурзаков: Как 200 строк на Go помогли нам освободить 15 серверов»

Badoo Development

Обзор интернет браузеров

Стабы для фронтенда - Никита Мостовой (HeadHunter)

Как ВКонтакте использует Go

Павел Пушкарев — «Развертывание верстки»

Ad

Viewers also liked (14)

DOCX

"김정은"도 비아그라 먹는다 DDF11.KR 카톡:DDF11 시알리스50mg정품구입,시알리스100mg정품판매,시알리스100mg정품구입,시알...

DOCX

"김정은"도 칙칙이 사용한다 DDF11.KR 카톡:DDF11 칙칙이50mg판매,칙칙이100mg판매,칙칙이100mg정품판매처,칙칙이100mg...

PPTX

Carpe momentum: How to seize the moment using Audience Engagement Technology....

PPTX

Golf Course Architects

PDF

Ps access1.3

PDF

Summer Forum | IS Associates

PDF

Entrelinhas

PDF

Folio

PDF

Families and Friends of Murder Victims April - 2016 newsletter

PPTX

Russia презентация Microsoft power point

PPTX

Le logement évolutif en algerie

PDF

楊靜蘭物理治療師-認識淋巴系統水腫與照顧方法20130602

PDF

Histórico brasileiro

PPTX

ADL 110 Intrinsic vs Extrinsic Motivation Final music

"김정은"도 비아그라 먹는다 DDF11.KR 카톡:DDF11 시알리스50mg정품구입,시알리스100mg정품판매,시알리스100mg정품구입,시알...

"김정은"도 칙칙이 사용한다 DDF11.KR 카톡:DDF11 칙칙이50mg판매,칙칙이100mg판매,칙칙이100mg정품판매처,칙칙이100mg...

Carpe momentum: How to seize the moment using Audience Engagement Technology....

Golf Course Architects

Ps access1.3

Summer Forum | IS Associates

Entrelinhas

Folio

Families and Friends of Murder Victims April - 2016 newsletter

Russia презентация Microsoft power point

Le logement évolutif en algerie

楊靜蘭物理治療師-認識淋巴系統水腫與照顧方法20130602

Histórico brasileiro

ADL 110 Intrinsic vs Extrinsic Motivation Final music

Ad

Similar to Upload files in web, naked truth (20)

PPTX

Читабельные отчеты для автоматизации на C# / Gallio / BDDfy

PDF

Интернет в помощь команде разработчиков культурно массового мероприятия

PDF

"Девопс - это не только для программистов. Практические примеры из жизни одно...

ODP

Выступление: инструменты и методы эффективной удалённой работы

PDF

Плюсы и минусы Go для разработчиков на C++, Вячеслав Бахмутов

PPTX

Как быть с большими сайтами на Word press

PPT

CodeFest 2010. Жемчужникова М., Овчарова О. —Принципы выбора ПО для группы те...

PPTX

Codeception + Docker + Robo и что из этого вышло

PDF

Страх и ненависть в мире релиз-инжиниринга

Mikhail Chinkov

PPTX

Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"

PDF

Bullshit on rails

ODP

Java 9 - кратко о новом

Леонид Ставила

PDF

Desktop app based on node js and html5

PDF

Контроль за качеством кода

Кирилл Борисов

PDF

Вячеслав Бахмутов

PDF

2014.12.06 06 Алёна Паньшина — Простой обмен данными с пользователями на прим...

PPTX

Drop Box

PPTX

Эссе по теме браузеры

PPTX

Среды и инструменты для управления проектами. IKRA. Digital-продюсер'14/1, СПб

PPT

Telerik Web aii

automated-testing.info

Читабельные отчеты для автоматизации на C# / Gallio / BDDfy

Интернет в помощь команде разработчиков культурно массового мероприятия

"Девопс - это не только для программистов. Практические примеры из жизни одно...

Выступление: инструменты и методы эффективной удалённой работы

Плюсы и минусы Go для разработчиков на C++, Вячеслав Бахмутов

Как быть с большими сайтами на Word press

CodeFest 2010. Жемчужникова М., Овчарова О. —Принципы выбора ПО для группы те...

Codeception + Docker + Robo и что из этого вышло

Страх и ненависть в мире релиз-инжиниринга

Mikhail Chinkov

Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"

Bullshit on rails

Java 9 - кратко о новом

Леонид Ставила

Desktop app based on node js and html5

Контроль за качеством кода

Кирилл Борисов

Вячеслав Бахмутов

2014.12.06 06 Алёна Паньшина — Простой обмен данными с пользователями на прим...

Drop Box

Эссе по теме браузеры

Среды и инструменты для управления проектами. IKRA. Digital-продюсер'14/1, СПб

Telerik Web aii

automated-testing.info

Upload files in web, naked truth

1. Голая правда про файлы Egor Malkevich Все права защищены 18+2016

2. Я несу ангуляр людям

3. Что может быть проще?

4. 785 типов

5. А теперь по порядку

6. Сказ про API

7. C давних пор

12. Пара слов о progress bar

13. А что насчет папок?

16. Постановка задачи

18. Прочувствуем проблему

19. 1. Банальный разрыв соединения

20. 2. Банально комп уснул

21. 3. Ограничение сети

22. 4. Приватность

23. 5. Размер

24. 6. Пользователь не хочет париться

25. Пробуем решить в лоб

27. Just to note

28. Как это работает

29. Как только загружаем несколько файлов

31. А теперь к решению

32. Самый UX продвинутый способ

33. Жесткий диск в OS это папка WebKitDirectory VS File API

34. WebKitDirectory Умеет грузить папки через window диалог Почему то не работает с drag&drop Грузит файлы как файлы не как entry

35. File API НЕ УМЕЕТ грузить папки через window диалог Отлично РАБОТАЕТ с drag&drop Грузит файлы как как entry

37. Шаг 1. File DTO Entry DTO FolderDTO

38. Шаг 2. Определяем стратегию сканирования

40. Как в этой логике проверять пользователя непонятно

41. В js нельзя определить mime тип файла

43. JS умеет считывать 100 entries за такт

44. Нету какого то способа ограничить скорость на загрузку в браузере

45. Более подробные примеры кода тут ps://gist.github.com/wegorich/1681b7ff17054ebf8873794ef4aec5

46. Хороший пример загрузки директорий можно посмотреть тут

47. А теперь к UX Грузим видосы Грузим картинки Грузим песенки

48. Один минус в идеальном случае надо дропать файл

49. Мы знаем что искать Найдено 20 видосов, просканированно 100500 папок

50. Следовательно знаем как отобразить Найдено 42 альбома, просканированно 100500 папок Альбом Криса брауна (8 песен) Justin Timberlake (4 песни) Кураж бамбей (1 песня) Форсаж OST (45 песен)

51. Итоговый результат Найдено 42 альбома, 1 загружен, просканированно 100500 папок Альбом Криса брауна (8 песен) Justin Timberlake (4 песни) Кураж бамбей (1 песня) Форсаж OST (45 песен) 34% Justin Timberlake 34% (360 mb / 765 mb) 165 kb/s 5 min left

52. Еще пару слов

53. Для сервера советую

54. Вообще для файлового сервера можно заюзать

55. Как неплохую файлопомойку можно заюзать

56. В докладе принимали участие: Egor Malkevich Картинки Немножко текста И всякие ссылочки