ng-flow issuing a GET, but not a POST
I am trying to use ng-flow in angular for single image upload against an Express back end. When I select an image for upload, it appears that ng-flow is sending a GET request to my target (/admin/upload), then nothing else. I assume the GET is just part of the testChunks behavior, but i'm still unclear on why i'm not seeing a POST from the browser.
Here is the portion of my client dealing with ng-flow. It is based heavily on the code samples in ng-flow.
<div flow-init="{target: '/admin/upload'}" flow-prevent-drop
flow-drag-enter="style={border: '5px solid green'}"
flow-drag-leave="style={}"
test-chunks="false"
ng-style="style"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message">
<div class="container">
<h1>flow basic example</h1>
<hr class="soften"/>
<div class="row">
<div class="span6">
<h2>Buttons:</h2>
<span class="btn" flow-btn><i class="icon icon-file"></i>Upload File</span>
</div>
</div>
<hr class="soften">
<h2>Transfers:</h2>
<p>
<a class="btn btn-small btn-success" ng-click="$flow.resume()">Upload</a>
<a class="btn btn-small btn-danger" ng-click="$flow.pause()">Pause</a>
<a class="btn btn-small btn-info" ng-click="$flow.cancel()">Cancel</a>
<span class="label label-info">Size: {{$flow.getSize()}}</span>
<span class="label label-info">Is Uploading: {{$flow.isUploading()}}</span>
</p>
<table class="table table-hover table-bordered table-striped" flow-transfers>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Size</th>
<th>Relative Path</th>
<th>Unique Identifier</th>
<th>#Chunks</th>
<th>Progress</th>
<th>Paused</th>
<th>Uploading</th>
<th>Completed</th>
<th>Settings</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in transfers">
<td>{{$index+1}}</td>
<td>{{file.name}}</td>
<td>{{file.size}}</td>
<td>{{file.relativePath}}</td>
<td>{{file.uniqueIdentifier}}</td>
<td>{{file.chunks.length}}</td>
<td>{{file.progress()}}</td>
<td>{{file.paused}}</td>
<td>{{file.isUploading()}}</td>
<td>{{file.isComplete()}}</td>
<td>
<div class="btn-group">
<a class="btn btn-mini btn-warning" ng-click="file.pause()" ng-hide="file.paused">
Pause
</a>
<a class="btn btn-mini btn-warning" ng-click="file.resume()" ng-show="file.paused">
Resume
</a>
<a class="btn btn-mini btn-danger" ng-click="file.cancel()">
Cancel
</a>
<a class="btn btn-mini btn-info" ng-click="file.retry()" ng-show="file.error">
Retry
</a>
</div>
</td>
</tr>
</tbody>
</table>
<hr class="soften"/>
<div class="alert" flow-drop flow-drag-enter="class='alert-success'" flow-drag-leave="class=''"
ng-class="class">
Drag And Drop your file here
</div>
</div>
</div>
</div>
</div>
Here is an extract from my express.js file. You will notice I have defined an app.post and an app.get method for the upload URL.
var express = require('express'),
favicon = require('static-favicon'),
morgan = require('morgan'),
compression = require('compression'),
bodyParser = require('body-parser'),
methodOverride = require('method-override'),
cookieParser = require('cookie-parser'),
session = require('express-session'),
errorHandler = require('errorhandler'),
path = require('path'),
config = require('./config'),
passport = require('passport'),
mongoStore = require('connect-mongo')(session);
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
process.env.TMPDIR = 'tmp';
var flow = require('../../flow-node.js')('tmp');
/**
* Express configuration
*/
module.exports = function(app) {
var env = app.get('env');
if ('development' === env) {
app.use(require('connect-livereload')());
// Disable caching of scripts for easier testing
app.use(function noCache(req, res, next) {
if (req.url.indexOf('/scripts/') === 0) {
res.header('Cache-Control', 'no-cache, no-store, must-revalidate');
res.header('Pragma', 'no-cache');
res.header('Expires', 0);
}
if(path.extname(req.url) == '.js'){
res.set('Content-Type','text/javascript');
}
}
next();
});
app.use(express.static(path.join(config.root, '.tmp')));
app.use(express.static(path.join(config.root, 'app')));
app.set('views', config.root + '/app/views');
app.set('scripts', config.root + '/app/scripts');
app.set('bower_components', config.root + '/app/bower_components');
app.post('/admin/upload', multipartMiddleware, function(req, res) {
console.log('in POST...');
flow.post(req, function(status, filename, original_filename, identifier) {
console.log('POST', status, original_filename, identifier);
res.send(200, {
// NOTE: Uncomment this funciton to enable cross-domain request.
'Access-Control-Allow-Origin': '*'
});
});
});
app.get('/admin/upload', function(req, res) {
flow.get(req, function(status, filename, original_filename, identifier) {
console.log('GET', status);
res.send(200, (status == 'found' ? 200 : 404));
});
});
app.get('/admin/download/:identifier', function(req, res) {
flow.write(req.params.identifier, res);
});
}
Have I missed something fundamental in the markup for ng-flow? or something in Express? Or? Thank you in advance.
Answer
I had the same issue and the solution i found was to set testChunks:false
flow-init="{target: url, testChunks:false}"