Как остановить действие загрузки для плагина ng-flow после события перетаскивания

Question

Как остановить действие загрузки для плагина ng-flow после события перетаскивания

0

Я использую простой эффект перетаскивания на основе простого примера загрузки изображения, предоставляемого при загрузке ng-потока. drag-and-drop работает нормально, но я хочу остановить действие загрузки по умолчанию, так как я хочу загрузить изображение, используя действие отправки формы или используя функцию Angular .post():

<html ng-app="app" ng-controller="imageController" flow-init
      flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
      flow-files-submitted="$flow.upload()">
<head>
  <title>Image</title>
<!--   <script src="../../bower_components/angular/angular.js"></script> -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="../../js/ng-flow-standalone.js"></script>
  <script src="app.js"></script>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
        rel="stylesheet"/>
  <style>
    .thumbnail {
      max-width: 200px; max-height: 150px; line-height: 20px; margin-bottom: 5px;
    }
  </style>
</head>
<body flow-prevent-drop>

<div class="container" >
  <h1>flow image example</h1>
  <hr class="soften"/>

  <div>
    <div class="thumbnail" ng-hide="$flow.files.length" 
         flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
      <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
    </div>
    <div class="thumbnail" ng-show="$flow.files.length">
      <img flow-img="$flow.files[0]" />
    </div>
    <div>
      <a href="#" class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</a>
      <a href="#" class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</a>
      <a href="#" class="btn btn-danger" ng-show="$flow.files.length"
         ng-click="$flow.cancel()">
        Remove
      </a>
    </div>
    <p>
      Only PNG,GIF,JPG files allowed.
    </p>
  </div>
</div>
</body>
</html>

Я попытался использовать event.preventDefault(); в обработчиках событий "fileAdded" и "filesSubmitted", но это не останавливает событие запуска загрузки. Я хочу выполнить процесс загрузки во время процесса отправки формы.

Когда я использую "return false" в событии "fileAdded", изображение не будет вставлено вообще.

Однако, если я введу ошибку в обработчик событий "filesSubmitted", сценарий завершится неудачно, и загрузка не будет запущена. Но это не является чистым способом достижения этого эффекта.

Я также использовал этот код, но он предотвращает добавление изображения на страницу:

app.controller('imageController', 
    ['$scope', 
    function ($scope) {
        $scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
              console.log('$scope.$on', event, $flow);
              event.preventDefault();//prevent file from uploading
              console.log("event.preventDefault() executed.")
            });
}])

Для получения более подробной информации см. Снимки ниже.

Оцените свою помощь, чтобы решить эту проблему.

tarekahf 19 авг. 2016, в 18:00

Источник

Теги:

angularjs

file-upload

image

upload

ng-flow

1 ответ

Ещё вопросы

tarekahf · Accepted Answer · 2016-09-01T13-25-00.000Z

Я понял, что нужно, чтобы остановить запуск действия загрузки, чтобы мы могли отправлять данные изображения во время Углового сообщения() вместо действия отправки формы.

Удалите target свойство конфигурации из:

.config(['flowFactoryProvider', function (flowFactoryProvider) {
    flowFactoryProvider.defaults = {
        target: 'upload.php',
        permanentErrors: [404, 500, 501],
        maxChunkRetries: 1,
        chunkRetryInterval: 5000,
        simultaneousUploads: 4,
        singleFile: true,
};

или вызвать метод .pause() из одного из событий:

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
    console.log('flow::fileAdded - appraiser signature', event, $flow, flowFile);
    ...
    $scope.processFile(flowFile);
    flowFile.pause();
    ...
});

Или сформируйте это событие внутри функции .config():

  flowFactoryProvider.on('fileAdded', function(file, event){
      console.log('fileAdded', file, event);
      file.pause();
      event.preventDefault();
      console.log('file upload was paused.');
      return true;
  });

И, чтобы получить строку Base64 выбранного изображения, вам необходимо определить следующую функцию внутри контроллера:

    $scope.processFile = function(flowFile){
        console.log('$scope.processFile', flowFile);
        var fileReader = new FileReader();
        fileReader.onload = function (event) {
                console.log('fileReader.onload - event=', event);
                var uri = event.target.result;
                $scope.imageString = uri;
                $scope.imageStringB64 = uri.replace(/^data:image\/(png|jpg);base64,/, '');
        };
        fileReader.readAsDataURL(flowFile.file);
    };

С помощью вышеизложенного вы получили значение Base64 изображения в переменной области видимости imageStringB64 которую затем вы можете отправить на сервер с помощью функции $http.post() вместо использования традиционной кнопки отправки формы.

Надеюсь, вы найдете это полезным.

Тарек