Handling multipart/form-data with remote method

[JyotiRani]

I am using the following sample client code to send the multipart/form-data from client:

let formData = new FormData();
var task ={"description":"this is first test task","sequenceNumber":1,"companyId":"1"};
formData.append('task', task);
formData.append('attachments', data.profile_pic[0]);
const config = {
  headers: { 'content-type': 'multipart/form-data' }
}
post('http://localhost:3000/api/tasks/saveAll', formData, config);

Server side is a loopback application and i have defined the following remote method to handle the above request: (I have also followed SO and did the required changes)

Tasks.remoteMethod('saveAll', {
  accepts: [{arg: 'task', type: 'object', http: { source: 'body' }},
          {arg: 'req', type: 'object', 'http': {source: 'req'}},
    {arg: 'res', type: 'object', 'http': {source: 'res'}}],

  http: {verb: 'post'},
  returns: {arg: 'task', type: 'object'}
});
Tasks.saveAll = function(task, req, res, cb) {
console.log('save all remote methid called' + JSON.stringify(task));
});         

it always returns empty object{}. How do i get the task json which i sent from client in the remote method? I need to post attachment to a different server than JSON, so need to segregate data in remote method, but unable to read the task json set by client. Please suggest whats missing.
Any example similar to this requirement would help as well.

[JyotiRani]

@dhmlau can you please help triage this issue?

[dhmlau]

@JyotiRani, can you please provide a link to a test project? It would help us accelerate the triaging process. See https://github.com/strongloop/loopback/wiki/Reporting-issues#bug-report.

cc @strongloop/sq-lb-apex

[bajtos]

Hello, LoopBack does not provide any easy-to-use API for handling file uploads (yet). The issue #3266 is tracking this feature request.

Having said that, it's possible to implement a remote method that will parse the raw request body and extract uploaded files, you can use our storage component as a reference implementation. Here is the gist (using formidable to parse multipart form-data):

https://github.com/strongloop/loopback-component-storage/blob/361388bb1d5041cc301f839a877c97124c025669/lib/storage-handler.js#L28-L211

  var form = new IncomingForm(options);
  form.handlePart = function(part) {
    var self = this;


    if (part.filename === undefined || part.filename === '') {
      var value = '';
      var decoder = new StringDecoder(this.encoding);


      part.on('data', function(buffer) {
        self._fieldsSize += buffer.length;
        if (self._fieldsSize > self.maxFieldsSize) {
          self._error(new Error(
            g.f('{{maxFieldsSize}} exceeded, received %s bytes of field data',
              self._fieldsSize
            )));
          return;
        }
        value += decoder.write(buffer);
      });


      part.on('end', function() {
        var values = fields[part.name];
        if (values === undefined) {
          values = [value];
          fields[part.name] = values;
        } else {
          values.push(value);
        }
        self.emit('field', part.name, value);
      });
      return;
    }


    this._flushing++;


    var file = {
      container: container,
      name: part.filename,
      type: part.mime,
      field: part.name,
    };


    // Options for this file


    // Build a filename
    if ('function' === typeof options.getFilename) {
      file.originalFilename = file.name;
      file.name = options.getFilename(file, req, res);
    } else if (options.nameConflict === 'makeUnique') {
      file.originalFilename = file.name;
      file.name = uuid.v4() + path.extname(file.name);
    }


    // Get allowed mime types
    if (options.allowedContentTypes) {
      var allowedContentTypes;
      if ('function' === typeof options.allowedContentTypes) {
        allowedContentTypes = options.allowedContentTypes(file, req, res);
      } else {
        allowedContentTypes = options.allowedContentTypes;
      }
      if (Array.isArray(allowedContentTypes) && allowedContentTypes.length !== 0) {
        if (allowedContentTypes.indexOf(file.type) === -1) {
          self._error(new Error(
            g.f('{{contentType}} "%s" is not allowed (Must be in [%s])',
              file.type,
              allowedContentTypes.join(', ')
            )));
          return;
        }
      }
    }


    // Get max file size
    var maxFileSize;
    if (options.maxFileSize) {
      if ('function' === typeof options.maxFileSize) {
        maxFileSize = options.maxFileSize(file, req, res);
      } else {
        maxFileSize = options.maxFileSize;
      }
    }


    // Get access control list
    if (options.acl) {
      if ('function' === typeof options.acl) {
        file.acl = options.acl(file, req, res);
      } else {
        file.acl = options.acl;
      }
    }


    self.emit('fileBegin', part.name, file);


    var uploadParams = {
      container: container,
      remote: file.name,
      contentType: file.type,
    };
    if (file.acl) {
      uploadParams.acl = file.acl;
    }


    var writer = provider.upload(uploadParams);


    writer.on('error', function(err) {
      self.emit('error', err);
    });


    var endFunc = function(providerFile) {
      self._flushing--;


      file.providerResponse = providerFile;


      var values = files[part.name];
      if (values === undefined) {
        values = [file];
        files[part.name] = values;
      } else {
        values.push(file);
      }
      self.emit('file', part.name, file);
      self._maybeEnd();
    };


    writer.on('success', function(file) {
      endFunc(file);
    });


    var fileSize = 0;
    if (maxFileSize) {
      part.on('data', function(buffer) {
        fileSize += buffer.length;
        file.size = fileSize;
        if (fileSize > maxFileSize) {
          // We are missing some way to tell the provider to cancel upload/multipart upload of the current file.
          // - s3-upload-stream doesn't provide a way to do this in it's public interface
          // - We could call provider.delete file but it would not delete multipart data
          self._error(new Error(
            g.f('{{maxFileSize}} exceeded, received %s bytes of field data (max is %s)',
              fileSize,
              maxFileSize
            )));
          return;
        }
      });
    }


    part.on('end', function() {
      writer.end();
    });
    part.pipe(writer, {end: false});
  };


  form.parse(req, function(err, _fields, _files) {
    cb = cb || function() {};


    if (err) {
      console.error(err);
      return cb(err);
    }


    if (Object.keys(_files).length === 0) {
      err = new Error('No file content uploaded');
      err.statusCode = 400; // DO NOT MODIFY res.status directly!
      return cb(err);
    }

    // "files" contains info about the uploaded files
    //  "fields" contains additional fields

[caiyufei]

Is it supported to add formidable or multer parser middleware in middleware.json ?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed due to continued inactivity. Thank you for your understanding. If you believe this to be in error, please contact one of the code owners, listed in the CODEOWNERS file at the top-level of this repository.

[mihir83in]

+1

[muhammadsamir11]

+1

[barocsi]

+1

[b-admike]

@barocsi @muhammadsamir11 @mihir83in can you try the solution recommended by @bajtos above or the steps in the medium post by @jackrobertscott (see #3266 (comment))?

[barocsi]

Thanks, Medium post #3266 (comment) worked well.