Angular - ng-flow How to send String along with File

Question

flow` works better than anything.

I want to send one input text also along with file using ng-flow in Angular js

Please help me guys...

Answer 1

So I found the solution to this! It's not that the library is bad, it's more that the documentation is very thin, and they leave it upp to you to figure things out. I ended up following the whole path in the code that a request takes when it's getting built.

In a previous issue I had I needed to stop files from uploading immediately when dropped and someone here recommended to make the upload happen in an ng-click function.

This was they code the gave me. ( flow.js upload file on click )

ctrl.uploadItems = function(e){

    //Do what you need to do

    e.opts.query = {student_id: $scope.globals.userInfo.id, assignment_id: ctrl.submissionParams};

    e.upload();

};

Then by logging out the e I found that the object had the query option in there I modified the block as follows.

ctrl.uploadItems = function(e){

    e.opts.query = {parameter_to_add: value};

    e.upload();

};

This way you are able to modify the object in anyway at upload time.

Answer 2

I found this answer by AidasK at https://github.com/flowjs/ng-flow/issues/33

You can pass your custom parameters with the query option. You have three options to do that.

Option one:

<div flow-init="{
  query: { id: 2, source: 'flow_query' },
  headers: { id: 5, source: 'flow_header' }
}">

Option two:

<div flow-init="{
  query: functionFromcontroller
}">

Option three:

<div flow-init="config">

</div>

In your controller:

function MyCtrl($scope) {
  $scope.config = {
    query: function (flowFile, flowChunk) {
      // function will be called for every request
      return {
        id: 2, source: 'flow_query'
      };
    }
  };
} 

Answer 3

To add a query parameter at the moment you add a file can be done by catching the file-added event in the controller and setting the query parameter there like so:

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {       
        $flow.opts.query = { someParam: yourValue, otherParam: otherValue };
    });

These extra parameters will then be added to the upload and can be handled at the server.