How to make a POST request for each file in array

Question

I have an array of drag'n'dropped files inside angular component. I would like to make a POST request to http://some.url for each of them. I'm trying to do the following:

drop.component.ts

public drop(event) {  
    * somehow set droppedFiles *

    let observables = [];

    this.droppedFiles.forEach(file => observables.push(this.uploadFile(file)));
    forkJoin(observables); 
}  

public uploadFile(image) {
    return this.imagesService.saveImage(image, this.tigerId).pipe(first()).subscribe(
        (data: ISaveImageResponse) => {
            console.log(data);

            return;
        },
        error => {
            console.error(error);

            return;
        }
    );
}

images.service.ts

public saveImage(image: File): Observable<ISaveImageResponse> {
    let imageInfo = {
        name: null, type: null, image: null
    };

    imageInfo.name = [image.name, Validators.required];
    imageInfo.type = [image.type, Validators.required];
    imageInfo.image = null;

    let form = this.formBuilder.group(imageInfo);
    form.get('image').setValue(image);

    const formModel = this.prepareFormData(form);

    return this.http.post<any>(
        'http://some.url',
        formModel
    ).pipe(
        map((imageInfo: any) => {
            return imageInfo
        }),
        catchError((error, caught) => {
            return EMPTY;
        })
    );
}

If I drop single file, this works fine. But if there are multiple files, requests become pending but I can't see them logged to server (which is express.js server).
What is the problem?

UPDATE

I've updated code to be actual: now uploadImage() returns Observable and requests are called from forkJoin()

UPDATE 2

After some time requests being pending I get the following error in server console:

(node:1291) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 
11 field listeners added. Use emitter.setMaxListeners() to increase limit  

But no info about request happening at all (for any request I do, for example console.log('POST /images');)

UPDATE 3

server-side code for handling POST requests:

server.js

const server = express();
const fs = require("fs");
const path = require('path');
const passport = require('passport');
const session = require('express-session');
const RedisStore = require('connect-redis')(session);

server.use(
    session({
        store: new RedisStore({
            url: config.redisStore.url
        }),
        secret: config.redisStore.secret,
        resave: false,
        saveUninitialized: false
    })
);
server.use( passport.initialize() );
server.use( passport.session() );
server.use( cors({ origin: '*' }) );
server.use( bp.json() );
server.use( express.static('uploads') );
server.use( require('./image.routes') );

const port = 9901;

server.listen(port, () => {
    const dir = __dirname + '/uploads';
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir);
    }
    console.log('We are live on ' + port);
});  

image.routes.js

const fs = require('fs');
const formidable = require('express-formidable');
const path = require('path');
let router = express.Router();

router.post('/images',
    formidable({
        encoding: 'utf-8',
        uploadDir: path.resolve(__dirname, 'uploads'),
        multiples: true,
        keepExtensions: true
    }),
    (req, res, next) => {
        console.log('\nPOST /images');

        const image = req.fields;
        const data = req.files;

        image.path = data.image.path;

        const file = fs.createReadStream(image.path);

        createImage(image).then(  // createImage() saves image info to db
            result => {
                if (result) {
                    res.status(200).send(result);
                } else {
                    console.error("Cannot save image");
                    res.status(400).send("Cannot save image");
                }
        }).catch(e => console.error(e.stack));
});  

module.exports = router;

Answer 1

You cant use Promise.all to handle Rxjs requests.

You can use forkJoin to make multiple Observale request at once,

public drop(event) {  
* somehow set droppedFiles *

   let observables = []

   this.droppedFiles.forEach(file => observables.push(this.uploadFile(file)));
   Rx.Observable.forkJoin(observables)
} 

Also your uploadFile function is not returning an observable

   public uploadFile(image) {
      return this.imagesService.saveImage(image, this.tigerId).pipe(first())
   }

check out example number 5 here

Answer 2

Try using 'map' or 'for' instead forEach.

public drop(event) {  
    * somehow set droppedFiles *

    Promise.all(this.droppedFiles.map(file => this.uploadFile(file))); 
}