File upload field

[karantan]

The current version of the file upload is inapplicable IMO. You can use it only when updating the data object (e.g. user) because it doesn't work when on submit.

There are 2 problems. 1. the form doesn't have "enctype=multipart/form-data" and 2. when you submit the form the data gets serialized. At least I am very certain it does. Didn't investigate this too much.

I have created my own hard-coded/hacked version of this file upload but it is not ready to be packed into the ng-admin...

Is there any interest in adding this field or is this too advance and is OK that programmer must code this manually?

[jpetitcolas]

Currently the file is uploaded once selected, and then you retrieve its name from the upload API. IMO, it is a wrong behavior, and we should upload it only when the form is submitted. It is especially wrong if you have heavy treatment on uploaded files, like video encoding.

But then, JSON API may not work with a multipart/form-data request.

Not sure about the implications. @karantan, have you successfully dealt with it?

[karantan]

@jpetitcolas Yes I have solved this by creating a simple directive. But it works only when object (e.g. user) gets updated... atm this is not priority and will come back later when other things are working...

Here is what I did:
directive:

...
controller: function($scope) {
  $scope.onFileSelect = function($files){
    $scope.files = $files;
  };
  $scope.upload = function(){
    var formData = new FormData();
    formData.append("gift_id", $scope.entry.values['id']);
    for (var i = 0; i < $scope.files.length; i++) {
      var file = $scope.files[i];
      formData.append('images', file);
    }
    $.ajax({
       url: '/gift/images',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
         console.log(data);
         humane.log(data);
       }
    });
  };
},
...

and directive template:

<div class="row">
  <div class="col-md-4">
  <!--input type="file" multiple id="images" name="images" -->
<button
    class="btn btn-default"
    ngf-select
    ng-model="entry.values['images']"
    ngf-change="onFileSelect($files)"
    ngf-multiple="true"
>Upload</button>

  </div>
  <div class="col-md-2">
    <button
      type="button"
      class="btn btn-success btn-s"
      ng-click="upload()">
        <span class="glyphicon glyphicon-upload"></span> Upload all
    </button>
  </div>
</div>

So when I select files onFileSelect function remembers them and when I click the upload button the upload function starts which uploads the files...

I know its not a nice solution but it works :)

[hmendes00]

hi @karantan any solution for this? the problem with enctype form.
I am trying to upload an image, but with no success. =/

[karantan]

@hmendes00 I haven't been following ng-admin for some time now so I can't tell you if there is a better solution now.

The above fix will definitely work.