Stuck on upload

[PArns]

I've a very simple server running under loopback 3 and seeing this issue again: #9

As the gists and examples don't work any longer I would like to reopen that issue.
I've created a very simple API templated server and added the following code:

var CONTAINERS_URL = '/api/Storage/';
module.exports = function (File) {

    File.upload = function (ctx, options, cb) {
        if (!options) options = {};
        ctx.req.params.container = 'common';

        console.log("DO");
        File.app.models.Storage.upload(ctx.req, ctx.result, options, function (err, fileObj) {
            console.log("FILE");
            cb(fileObj);
            /*if (err) {
                cb(err);
            } else {
                var fileInfo = fileObj.files.file[0];
                File.create({
                    name: fileInfo.name,
                    type: fileInfo.type,
                    container: fileInfo.container,
                    url: CONTAINERS_URL + fileInfo.container + '/download/' + fileInfo.name
                }, function (err, obj) {
                    if (err !== null) {
                        cb(err);
                    } else {
                        cb(null, obj);
                    }
                });
            }*/
        });
    };

    File.remoteMethod(
        'upload',
        {
            description: 'Uploads a file',
            accepts: [
                {arg: 'ctx', type: 'object', http: {source: 'context'}},
                {arg: 'options', type: 'object', http: {source: 'query'}}
            ],
            returns: {
                arg: 'fileObject', type: 'object', root: true
            },
            http: {verb: 'post'}
        }
    );

};

The problem is now, that while posting via POSTMAN to the upload function, I see the following behavior in the console:

DO
Error: Request aborted
    at IncomingMessage.<anonymous> (...../server/node_modules/formidable/lib/incoming_form.js:120:19)
    at emitNone (events.js:86:13)
    at IncomingMessage.emit (events.js:188:7)
    at abortIncoming (_http_server.js:383:9)
    at socketOnClose (_http_server.js:377:3)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:191:7)
    at TCP._handle.close [as _onclose] (net.js:504:12)
FILE

And Postman returns an empty response...

I'm totally lost as a beginner here at this step!

What is my fault here?

Thx for any input

[PArns]

OMG, guys, really? Could someone please fix this? The solution is the type, see
#86

[superkhau]

@PArns Can you provide a sample for us to clone and reproduce your issue?

[PArns]

Hey @superkhau, yes of course! You can find a demo project here: https://github.com/PArns/loopback-stuck-test

And the following Postman settings (under body, add a file called "file"):

If you switch from "Content-Type" to "Accept", the upload works without any problems. But as a user could post nearly everything, this will break the whole server!

[PArns]

Hey @superkhau, are you able to reproduce the bug?

[superkhau]

@PArns Not yet, haven't had time to reproduce it yet -- @raymondfeng Do you see anything obvious here?

[raymondfeng]

@PArns Your code has a bug at https://github.com/PArns/loopback-stuck-test/blob/master/common/models/attachement.js#L10. Please change it to be cb(null, fileObj). I don't see issues with the fix.

[PArns]

Hello @raymondfeng, please have a look at the console output:

DO
Error: Request aborted
    at IncomingMessage.<anonymous> (...../server/node_modules/formidable/lib/incoming_form.js:120:19)
    at emitNone (events.js:86:13)
    at IncomingMessage.emit (events.js:188:7)
    at abortIncoming (_http_server.js:383:9)
    at socketOnClose (_http_server.js:377:3)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:191:7)
    at TCP._handle.close [as _onclose] (net.js:504:12)
FILE

Maybe the callback is not called correctly, but that doesn't fix the error! The time between the DO log and the FILE log is around 30 seconds. At a certain point in time Postman cancels the request due to a timeout (but that also occurs before FILE is printed!!). Just check out my code and try it with Postman

[raymondfeng]

I assume you have created storage/common. I cannot reproduce the problem with a simple json or png file.

[PArns]

Again, please test it with Postman and the Header "Accept: multipart/formdata"

[PArns]

@raymondfeng Raymond, you're totally right ... I'm stupid, sorry ;)
Correcting the callback function solves the issue, but the header still produces an exception!

[superkhau]

@PArns Glad you got it resolved, is this good to close? You can create another issue for the header exception with descriptions, steps to reproduce etc.

[PArns]

Yes, sure ... Thx for your input

[manojchandrashekar]

I'm facing the issue with either 'Accept' or 'Content-Type' headers set. It is working without any of those though. I hope there isn't an issue if I continued without using either of the headers.

[ghost]

"The solution to the content type problem problem is to explicitly set Content-Type to undefined so that your browser or whatever client (like postman) you're using can set it and add that boundary value in there for you. Disappointing but true." - checkout this link for more details - https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post/39281156#39281156

[jkunwar]

hello there, i have the same problem. Upload is working fine using postman, but with axios i get following error
my code is same as @PArns

Error: Request aborted
at IncomingMessage. (/Applications/XAMPP/xamppfiles/htdocs/epechaweb/node_modules/formidable/lib/incoming_form.js:120:19)
at emitNone (events.js:106:13)
at IncomingMessage.emit (events.js:208:7)
at abortIncoming (_http_server.js:412:9)
at socketOnClose (_http_server.js:406:3)
at emitOne (events.js:121:20)
at Socket.emit (events.js:211:7)
at TCP._handle.close [as _onclose] (net.js:554:12)

[slim-hmidi]

I face the same problem, I use axios to send file from the client:

const formData = new FormData();
formData.append('file', file);      
const { data } = await axios.post(${url} ,{ formData },
    {
      headers: {
        'Content-Type': undefined,
      },
    },
  );
return data;

and I have an axiosInterceptor:

import Cookies from 'js-cookie';
import axios from 'axios';

const axiosInterceptors = store => {
  axios.interceptors.request.use(config => {
    const newConfig = Object.assign(
      {},
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      },
      config,
    );
    const csrfToken = Cookies.get('XSRF-TOKEN');
    const { authentication } = store.getState();
    if (authentication.data && authentication.data.id) {
      newConfig.headers.Authorization = authentication.data.id;
    }
    if (csrfToken) {
      newConfig.headers['XSRF-TOKEN'] = csrfToken;
    }
    return newConfig;
  });
};

export default axiosInterceptors;

But when I tried to upload file in backend using loopBack I got this error:

 typeof parameters.fields.forceOverrides !== 'undefined';
TypeError: Cannot read property 'fields' of undefined
at Containers.upload (/code/server/models/container.js:1266:27)

[ilijaz]

This quick fix in server.js works for me.

app.use(bodyParser.json()); // for parsing application/json
// app.use(bodyParser.urlencoded({extended: true})); // for parsing application/x-www-form-urlencoded
// app.use(multer().any()); // for parsing multipart/form-data

storage component should check if files already uploaded by mutter and body parser then doesn't use formidable.
If you enable multer then fodmidable will wait years for nothing.