JQuery FileApi returing open не является функцией

Question

Я использую FileApi (См. Userpic + crop Demo), чтобы обрезать изображение перед загрузкой. но как только я выбираю файл изображения с компьютера, я получил ошибку

$(...).modal(...).open is not a function 

JS:

 <link href="~/Content/statics/main.css" rel="stylesheet" /> 
<link href="~/Content/jcrop/jquery.Jcrop.min.css" rel="stylesheet" /> 

<script src="~/Content/FileAPI/FileAPI.min.js"></script> 
<script src="~/Content/FileAPI/FileAPI.exif.js"></script> 

<script src="~/Content/jcrop/jquery.fileapi.js"></script> 
<script src="~/Content/jcrop/jquery.Jcrop.min.js"></script> 

<script src="~/Content/statics/jquery.modal.js"></script> 

<script> 
    $(document).ready(function() { 
     $('#userpic').fileapi({ 

      url: '@Url.Action("upl","Home")', 
      accept: 'image/*', 
      imageSize: { minWidth: 200, minHeight: 200 }, 
      elements: { 
       active: { show: '.js-upload', hide: '.js-browse' }, 
       preview: { 
        el: '.js-preview', 
        width: 200, 
        height: 200 
       }, 
       progress: '.js-progress' 
      }, 
      onSelect: function (evt, ui) { 
       var file = ui.files[0]; 
       if (!FileAPI.support.transform) { 
        alert('Your browser does not support Flash :('); 
       } 
       else if (file) { 
        debugger; 
        $('#popup').modal({ 
         closeOnEsc: true, 
         closeOnOverlayClick: false, 
         onOpen: function (overlay) { 
          $(overlay).on('click', '.js-upload', function() { 
           $.modal().close(); 
           $('#userpic').fileapi('upload'); 
          }); 
          $('.js-img', overlay).cropper({ 
           file: file, 
           bgColor: '#fff', 
           maxSize: [$(window).width() - 100, $(window).height() - 100], 
           minSize: [200, 200], 
           selection: '90%', 
           onSelect: function (coords) { 
            $('#userpic').fileapi('crop', file, coords); 
           } 
          }); 
         } 
        }).open(); 
       } 
      } 
     }); 
    }); 
</script> 

Это мой HTML

<div id="userpic" class="userpic"> 
    <div class="js-preview userpic__preview"></div> 
    <div class="btn btn-success js-fileapi-wrapper"> 
     <div class="js-browse"> 
      <span class="btn-txt">Choose</span> 
      <input type="file" name="filedata"> 
     </div> 
     <div class="js-upload" style="display: none;"> 
      <div class="progress progress-success"><div class="js-progress bar"></div></div> 
      <span class="btn-txt">Uploading</span> 
     </div> 
    </div> 
</div> 

Answer 1

Вы должны включить модальный файл (с).

Смотрите следующий пример JQuery FileAPI:

https://github.com/RubaXa/jquery.fileapi/blob/master/index.html

Я вижу:

<script src="./FileAPI/FileAPI.min.js"></script> 
And more files..... And then: 
<script src="./statics/jquery.modal.js"></script>