Как получить имя загруженного файла?

Question

[GaserV]

Накопилась парочка вопросов для гуру в angular) Кто сможет подсказать - подскажите)

У меня есть текстовые поля и несколько файловых. Мне Инпуты файловые кастомные.Т.е. я сделал маску для него, а самому инпуту дал прозрачность 100%.

1. Как сделать, чтобы после того, как юзер выбрал файл, я вывел название этого файла? и
2. Как справа(например) от названия вывести индикатор загрузки(подразумневает под собой загрузку файла на сервак сразу после выбора)?
3. Как после этого, по нажатию на submit выполнитьотправку файлов на сервак?
4. Как реализовать валидацию полей?

В приоритете стоит реализация именно на angular, т.к. хочу побольше опыта с ним). Кто может, ответьте хотябы на 1-2 вопроса, уже буду вам очень благодарен)

Answer 1

[_ _]

Берете ng-file-upload и:
1) привязываетесь к его событию в духе ngf-select="ctrl.filesSelected($files)", в контроллере делаете метод filesSelected, в который первым параметром будут попадать выбранные пользователем файлы (их может быть несколько в общем случае)
2) используете его API для загрузки файла

Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) { 
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });

последний обработчик события - прогресс загрузки.
3) то же самое, что и 2, но в 2 вы запускаете .upload сразу после того, как пользователь выбрал файл, а в 3 по нажатию submit
4) каких полей? Кукурузных?

Comments

[GaserV]

"4) каких полей? Кукурузных?"

Нет же) текстовых и файловых

[_ _]

GaserV: Вам сюда https://docs.angularjs.org/guide/forms
Примеров в интернете прорва, например https://scotch.io/tutorials/angularjs-form-validation