file upload function not work

[chiu0602]

After chosen a file to upload and press "tick", the field become empty.

The behavior can be seen under section "HTML5 inputs - demo" on demo page http://vitalets.github.io/angular-xeditable/,

[ckosloski]

Can you provide your code? The demo doesn't actually do the upload, which is why it just goes back to empty.

[chiu0602]

Thanks @ckosloski maybe you have provided a hint for me, here is my code:

<table>
  <tr>
    <td>Item</td>
    <td>Price</td>
    <td>File</td>
    <td>Action</td>
  </tr>
  <tr ng-repeat="item in user.items">
    <td>
      <span editable-select="item.id" e-name="item" onshow="loadItems()" e-form="rowform" e-ng-options="i.id.toString() as i.name for i in items">
        {{ showItem(item) }}
      </span>
    </td>
    <td>
      <span editable-text="item.price" e-name="price" e-form="rowform" onbeforesave="checkPrice($data)" e-required>
        {{ item.price }}
      </span>
    </td>
    <td>
      <a href="#" editable-file="item.file">{{ item.file || 'None' }}</a>
    </td>
    <td>
      <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == item">
        <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span></button>
        <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
      </form>
      <div class="buttons" ng-show="!rowform.$visible">
        <button class="btn btn-primary" ng-click="rowform.$show()"><span class="glyphicon glyphicon-pencil"></span></button>
        <button class="btn btn-danger" ng-click="removeItem($index)"><span class="glyphicon glyphicon-trash"></span></button>
      </div>
    </td>
  </tr>
</table>
...
...
<button class="btn btn-lg btn-primary btn-block" ng-show="allowSubmit" ng-click="submitForm(userForm.$valid)">Submit</button>

I use "input file" with "Editable row" and expected to upload in a bulk with other data when I click "Submit" button. Can "input file" works with "Editable row"? Thanks!

[ckosloski]

Looks like you are missing what to actually do when you submit. Try adding something likeonbeforesave="saveUser($data, user.id)" to your editable-form See the editable-form example here

[chiu0602]

I have modified the editable-form example and created file upload field http://jsfiddle.net/y31obvr0/ After I have chosen the file, the file field become "None", that means the info for file input haven't been stored. The demo doesn't actually do the upload but the behavior is already unexpected. If the model have no information stored for the file to be uploaded, the file should not be able to be uploaded.

[ckosloski]

Looks like you need to add on another directive to support it since angular models and the file input don't work together naturally. http://luxiyalu.com/angular-all-about-inputfile/

https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file-with-directive-demo

I haven't used the file upload with xeditable, but in a different angularjs project I used the fileModel directive at https://github.com/murygin/rest-document-archive/blob/master/src/main/resources/static/app.js The html that uses the directive - https://github.com/murygin/rest-document-archive/blob/master/src/main/resources/static/index.html

[chiu0602]

So that means angular xeditable not supports , it should be removed on demo page to avoid misleading.

[ckosloski]

It is supported. It is displaying it like other elements. You just need to add a directive of your choosing to get it to work the way you want. Another option I found is https://github.com/nervgh/angular-file-upload, which was used by another user in #645

[zavod]

So, how should it work?