загрузка в SPA с помощью Angular и Breeze

#javascript #angularjs #breeze #plupload

#javascript #angularjs #breeze #загрузка

Вопрос:

У меня есть приложение SPA, которое использует angular и breeze, позволяя персоналу на местах создавать новые объекты и отправлять их в нашу ERP в режиме реального времени. Они также могут делать снимки и загружать их (в настоящее время используется сочетание устройств iPad, iPhone и Galaxy). Все это работает просто отлично.

Теперь мы хотели бы изменить размер изображений перед их загрузкой, чтобы сэкономить на пропускной способности, ускорить приложение и упростить прикрепление их к сообщениям электронной почты в дальнейшем. Я получил plupload (2.1.2) для работы в качестве директивы angular, и она идеально изменяет размер / загружает изображения. Проблема в том, что когда создается новый объект и страница «перезагружается», plupload больше не отвечает. Я использую следующее для поля ввода:

 <input type="file"
capture="camera"
accept="image/*"
id="cameraInput"
pl-upload
pl-auto-upload="false"
pl-files-model="files"
pl-multi-params-model="multiParams"
pl-instance="uploadotron"
pl-entity="vm.report"
ng-file-select="vm.handleFile($files)"
ng-disabled="vm.state == 'Unchanged'" />
  

Параметры, которые я использую для загрузки, следующие:

 var options = {runtimes: 'html5', 
       browse_button : 'cameraInput',
       multi_selection: false,
       container: 'uploadcontainer',
       max_file_size: '20mb',
       multiple_queues: false,
       url : '.breeze/Files/Upload',
       flash_swf_url : iAttrs.plFlashSwfUrl,
       silverlight_xap_url : iAttrs.plSilverlightXapUrl,
       filters: [{title : "Image files", extensions : "jpg,jpeg,gif,png,tiff,pdf"}],
       resize: {
           width: 1024,
           height: 768,
           crop: false,
           quality: 90
    }
}
  

В качестве частичного обходного пути я обнаружил, что передача объекта экземпляра (pl-instance=»uploadotron» выше, где uploadotron привязан к $scope в контроллере) к директиве позволяет мне вручную добавлять файл и запускать загрузку, но это запускает только ng-file-select при каждой второй попыткена iPad. Галактика работает правильно.

Итак, вопросы:

  1. Почему plupload перестает работать при добавлении нового объекта и как это исправить? Я вложил тонну консоли.регистрируйте инструкции и проверяйте, что инициализация plupload, по-видимому, происходит с помощью директивы при перезагрузке страницы, но событие просмотра больше не срабатывает. Если я полностью покину страницу и вернусь, она снова начнет работать. Хотя это не совсем удобно для пользователя.

  2. Почему iPad (safari, iOS 7.1.1) вызывает функцию ng-file-select только при каждом втором выборе фотографии / файла?

Спасибо за любую помощь, которую вы можете мне оказать.

Обновить:

Я решил свою проблему, используя FileAPI, найденный на github (https://github.com/mailru/FileAPI /), и пишу свою собственную директиву, чтобы вызвать ее. Теперь работает как шарм. Я думаю, что часть проблемы заключалась в том, что ng-file-select является частью другой директивы, и я не сразу это понял. Это означает, что я, по сути, смешивал две директивы в одном и том же элементе ввода.