How and where save uploaded files with ng-flow?

Question

First of all, I use ng-flow (html5 file upload extension on angular.js framework)

My files are uploaded, I log the event in console. But I don't understand where and how to save them.

Here is my html code, upload is called.

<div flow-init flow-files-submitted="$flow.upload()">   
<div class="drop" flow-drop ng-class="dropClass">
    <span class="btn btn-default" flow-btn>Upload File</span>
    <span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
    <b>OR</b>
    Drag And Drop your file here
</div>

Here is my config

app.config(['flowFactoryProvider', function (flowFactoryProvider) {
  flowFactoryProvider.defaults = {
    target: 'upload.php',
    permanentErrors: [404, 500, 501],
    maxChunkRetries: 1,
    chunkRetryInterval: 5000,
    simultaneousUploads: 4,
    singleFile: true
  };
  flowFactoryProvider.on('catchAll', function (event) {
    console.log('catchAll', arguments);
  });
  // Can be used with different implementations of Flow.js
  // flowFactoryProvider.factory = fustyFlowFactory;
}]);

upload.php is called, and $_GET is full with data,

<script>alert('alert' + array(8) {
  ["flowChunkNumber"]=>
  string(1) "1"
  ["flowChunkSize"]=>
  string(7) "1048576"
  ["flowCurrentChunkSize"]=>
  string(6) "807855"
  ["flowTotalSize"]=>
  string(6) "807855"
  ["flowIdentifier"]=>
  string(11) "807855-3png"
  ["flowFilename"]=>
  string(5) "3.png"
  ["flowRelativePath"]=>
  string(5) "3.png"
  ["flowTotalChunks"]=>
  string(1) "1"
}
)</script>

but when I'm here what I have to do to save my files?

I tried to do move_uploaded_file() on flowFilename and flowRelativePath but nothing append.

I'm new in js.

Thank you.

Answer 1

Look at the upload.php example script:

https://github.com/flowjs/flow.js/blob/master/samples/Backend%20on%20PHP.md

// init the destination file (format <filename.ext>.part<#chunk>
// the file is stored in a temporary directory
$temp_dir = 'temp/'.$_POST['flowIdentifier'];
$dest_file = $temp_dir.'/'.$_POST['flowFilename'].'.part'.$_POST['flowChunkNumber'];

Answer 2

After you upload your image with flow.js, a new post request is sent to your server. You need to handle this POST request and manipulate the file afterwards.

If you are using Java + Spring MVC it would looks like

@RequestMapping(value = "/upload",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)
public void handleFileUpload(@RequestParam("file") MultipartFile file) {
    log.debug("REST request to handleFileUpload");
    try {
        BufferedOutputStream stream =
                new BufferedOutputStream(new FileOutputStream(new File(path + file.getName())));
        stream.write(file.getBytes());
        stream.close();
        log.debug("You successfully uploaded " + file.getName() + "!");
    } catch (IOException e) {
        e.printStackTrace();
    }
}