How to get the name of the uploaded file?

Question

Angular

A couple of questions have accumulated for the gurus in angular) Who can tell - tell me)
I have text fields and several file fields. I need custom file inputs. I made a mask for it, and gave the input itself a transparency of 100%.
1. How can I display the name of this file after the user has selected a file? and
2. How to display the download indicator to the right (for example) of the name (it means uploading the file to the server immediately after selection)?
3. How after that, by clicking on submit, send files to the server?
4. How to implement field validation?
The priority is the implementation in angular, because. I want more experience with it. If anyone can answer at least 1-2 questions, I will be very grateful to you)

Answer 1

Take ng-file-upload and:
1) bind to its event in the spirit of ngf-select="ctrl.filesSelected($files)", make the filesSelected method in the controller, in which the files selected by the user will fall into the first parameter (there may be several in general)
2) use its API to upload a file

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);
        });

the last event handler is the download progress.
3) the same as 2, but in 2 you run .upload right after the user has selected the file, and in 3 on submit
4) what fields? Corn?