Как осуществить загрузку изображения с последующим редактированием размера?

Question

[Alexey]

Столкнулся с такой задачей:
Необходимо с помощью fileAPI реализовать загрузку и "обрезку изображения" как в примере Userpic + Crop (rubaxa.github.io/jquery.fileapi).

При выполнение данного кода примера, выходит ошибка:

...
  else if( file ){
         $('#popup').modal({
            closeOnEsc: true,
            closeOnOverlayClick: false,
            ...

TypeError: $(...).modal is not a function/

Метода modal() (всплывающее окно) у меня нет, т.е. необходимо самому заменить/написать этот элемент.
Как правильно написать этот участок кода, чтобы я смог:

1) При нажатии кнопки - выходит окно браузера для выбора локального файла
2) После выбора необходимого файла, открываем попап и вставляем изображение туда (где есть только одна кнопка под изображение - 'Upload')

В общем-то все как в примере, только вот всплывающее окно, затормозило весь процесс...

Answer 1

[Дмитрий Евграфович]

Экхм. А в папке statics jquery.modal.js - не то разве?

Comments

[Alexey]

Дело в том что, ситуация такова что есть уже написанный попап, который вызывается при условии того что ссылка будет иметь класс js-popup-btn.
Но я не знаю что писать в самом попапе, к примеру:
1
2 Принимаем изображение
3 Выводим выделение для кропа
4 Отображаем кнопку для загрузки изображения с кропом
5

и что написать вместо:
1 ('#popup').popup({
2 onOpen: function (overlay){
3 $(overlay).on('click', '.js-upload', function (){
4 $.modal().close();
5 $('#userpic').fileapi('upload');
6 });
7 ..

в самом скрипте.
Подскажите как это реализовать?