Clear input field using angularjs

Question

Let me rephrase my question, I have a problem, with deleting uploaded files, so I've made some modification to my code as suggested but It still does not work, further more there is a problem of overwriting my uploaded files, so every time I upload something it will just overwrite previous file, and I want to be able to upload many and delete them, thanks

<form class="htmlForm">
  <label for="id_payment_proof">{% trans "Payment proof:" %}</label>
  <div class="full-size">
    <div class="input-control full-size file" data-role="input">
      <input id="id_payment_proof" type="file" file-model="payment_proof"/>
      <button class="button"><span class="mif-folder"></span></button>
    </div>
  </div>
  <div ng-if="client_invoice.payment_proof_filename">
    <a ng-href="{{ client_invoice.payment_proof }}"
    ng-bind="client_invoice.payment_proof_filename"
    target="_blank"></a>
    <button class="button" ng_click="clearInvoice()">
      <span class="mif-bin"></span>
    </button>
  </div>
  {% endverbatim %}
</form>

controler:

editInvoiceHandler = (event, row) ->
$scope.payment_proof = undefined
$scope.htmlFormEl.reset()
$scope.row = row
$scope.client_invoice = row.data()
hasChanges = false
$scope.editMode = true
$scope.$digest()

$scope.clearInvoice() = () ->
$scope.payment_proof = 0

Answer 1

I didn't test the code below but think it might be similar to what you need:

$scope.payment_proof = []; // presume you don't want any pre-loaded entries
$scope.add(new_entry) = payment_proof.push(new_entry);
$scope.delete(index) = payment_proof.splice(index,1);
$scope.clearInvoice = {  $scope.payment_proof = [];  }
//Then submit the payment_proof to the back end

The idea is to manipulate an array (payment_proof in your case) and submit it to the back end.

Answer 2

In your controller :

$scope.deleteUploadedFile = function () {
  $scope.payment_proof = null 
}

Answer 3

try this

<button class="button" ng-click="payment_proof = ''"> Delete</button>