Добрый день.
Прошу помощи помочь разобраться в следующем вопрос.
Создаю форму:
 class PhotoAddForm(FlaskForm):
    photo = FileField('Фото', validators=[FileRequired(),
                                          FileAllowed(['jpg', 'jpe', 'jpeg', 'png', 'gif', 'svg', 'bmp'],
                                          'Invalid Image Type. Must be .jpg, .jpe, .jpeg, .png, .gif, .svg, .bmp')])

далее во вьюхе:

  
form = PhotoAddForm()
if request.method == 'POST' and form.validate_on_submit() and 'photo' in request.files:
    ....

как сделать прогесс бар?

если подключать JS, то как быть с валидацие полей?
например не выбран файл?

JS код:
 $(function(){
  var progressBar = $('#progressbar');
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
        formData = new FormData($that.get(0));
    $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      contentType: false,
      processData: false,
      data: formData,
      dataType: 'json',
      xhr: function(){
        var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
        xhr.upload.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress)
          if(evt.lengthComputable) { // если известно количество байт
            // высчитываем процент загруженного
            var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
            // устанавливаем значение в атрибут value тега <progress>
            // и это же значение альтернативным текстом для браузеров, не поддерживающих <progress>
            // progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
            progressBar.val(percentComplete).css("width", percentComplete + '%').text('Загружено ' + percentComplete + '%');
            console.log(percentComplete)
          }
        }, false);
        return xhr;
      },
      success: function(json){
        if(json.url){
          console.log(json.url);
          window.location.href = json.url;
        }
      }
    });
  });
});