Как я могу загрузить файл после отправки формы, а не сразу после ее выбора?

Question

Прямо сейчас у меня есть файл, загружаемый в папку, как только файл выбран в открывшемся окне. Мне нужно, чтобы этот файл был только выбран, а затем в конечном итоге загрузить, когда происходит отправка формы. Мне также нужно сохранить имя загружаемого файла, чтобы его можно было сохранить в базе данных. Вот мой код:

HTML

<form id="requisitionForm" 
  name="$parent.requisitionForm" 
  method="post" 
  class="form-horizontal" 
  enctype="multipart/form-data">
  <input type="file" 
    id="quoteAttachment" 
    name="quoteAttachment" 
    ngf-select="upload($file)" 
    class="form-control fixInput" 
    data-ng-model="vm.requisition.pOR_Detail.quote_Attachment" 
    data-ng-disabled="vm.disableEditing" />
  <button type="button" 
    data-ng-show="!vm.itemToEdit.iD && !vm.disableEditing2 && (vm.newRequisition || vm.requisition.status_ID === 1)" 
    class="btn btn-primary dissolve-animation" 
    data-ng-click="vm.saveAndSubmit()">Save & Submit</button>
</form>

Javascript

$scope.upload = function (file) {
  Upload.upload({
    url: '../../UploadHandler2.ashx',
    data: { file: file, 'username': 'TEST' }
  }).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);
  });
};

function saveAndSubmit() {
  if ($scope.requisitionForm.$valid) {
    isSave = true;
    datacontext
    .save(vm.requisition, vm.newRequisition)
    .then(function (data) {
      vm.newRequisition = false;
      grabEmailsAndSend(vm.requisition, 'submitted');
    });
    $window.history.back();
  }
  else {
    logError('Error: <br> Invalid Form please fill out the required fields');
  }
}

Answer 1

Вам не нужно загружать файл немедленно.Просто захватите файл, когда он выбран, используя другую функцию и переменную.

HTML

<input type="file" 
  ngf-select="fileSelected($file)" 
/>

Javascript

var selectedFile;
$scope.fileSelected = function(file) {
  selectedFile = file;
};

function uploadFile(file) {
  Upload.upload({
    url: '../../UploadHandler2.ashx',
    data: { file: file, 'username': 'TEST' }
  }).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);
  });
}

function saveAndSubmit() {
  uploadFile(selectedFile);  // <------------you can call here
  if ($scope.requisitionForm.$valid) {
    isSave = true;
    datacontext
    .save(vm.requisition, vm.newRequisition)
    .then(function (data) {
      // <----------------------- or here, or anywhere, really
      vm.newRequisition = false;
      grabEmailsAndSend(vm.requisition, 'submitted');
    });
    $window.history.back();
  }
  else {
    logError('Error: <br> Invalid Form please fill out the required fields');
  }
}