0

Background

When I upload a file to my Express Node server, the file uploads to the correct directory but an error occurs. 

client.js?186f:772 POST http://localhost:3000/api/v1/odx/debt-uploadnet::ERR_EMPTY_RESPONSE

    Request._end @ client.js?186f:772
    Request.end @ client.js?186f:676
    onDrop @ FileForm.js?9f76:70
    onDrop @ FileForm.js?9f76:103
    onDrop @ index.js?00e3:236
    callCallback @ react-dom.development.js?cada:542
    invokeGuardedCallbackDev @ react-dom.development.js?cada:581
    invokeGuardedCallback @ react-dom.development.js?cada:438
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js?cada:452
    executeDispatch @ react-dom.development.js?cada:836
    executeDispatchesInOrder @ react-dom.development.js?cada:858
    executeDispatchesAndRelease @ react-dom.development.js?cada:956
    executeDispatchesAndReleaseTopLevel @ react-dom.development.js?cada:967
    forEachAccumulated @ react-dom.development.js?cada:935
    processEventQueue @ react-dom.development.js?cada:1112
    runEventQueueInBatch @ react-dom.development.js?cada:3607
    handleTopLevel @ react-dom.development.js?cada:3616
    handleTopLevelImpl @ react-dom.development.js?cada:3347
    batchedUpdates @ react-dom.development.js?cada:11082
    batchedUpdates @ react-dom.development.js?cada:2330
    dispatchEvent @ react-dom.development.js?cada:3421

FileForm.js?9f76:71 Error: Request has been terminated

Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc. at Request.crossDomainError (client.js?186f:621) at XMLHttpRequest.xhr.onreadystatechange (client.js?186f:703)

After uploading the file I am trying to read it and then process it so I can enter it to the mysql database. The first time I enter file, the error is thrown and the data is not read, nor inserted to the database. Even though it is uploaded to the server successfully.

Once the file exists on the server, if I upload the same file again, it will then read it, insert it to the database and complete without error.

I assumed the problem was the file had not finished uploading, but I do not understand why that would throw the error I am receiving.

What I Have Tried

  • I set a timeout to make sure the file had uploaded to the server.
  • I installed the npm cors package.
  • I added more callback functions to try and make sure the upload finished.

I commented out all of the code to focus only on getting the file to upload without an error. But it continues to throw the error on the first file upload. Even though it is uploaded successful.

let Storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, './uploads');
  },
  filename: (req, file, callback) => {
    callback(null, file.originalname);
  }
});

const upload = multer({
  storage: Storage
});

router.post('/debt-upload', upload.array('files', 10), (req, res, next) => {
     // At this point the file should be uploaded.
     // Once the middleware is completed but 
     // an error is thrown the first time.
     // Even though the file is uploaded successful
});

Question

What is the cause of this error?

* EDIT *

My onDrop()

  onDrop(acceptedFiles, rejectedFiles) {
    const req = request.post(burl + 'odx/debt-upload');
    _.forEach(acceptedFiles, (file) => {
      req.attach('files', file);
      console.log(file.name);
    });
    req.end((err, res) => {
      if (err) {console.log(err);}
      console.log(res);
    });
    this.showFiles(acceptedFiles);
  }

The Dropzone

  <Dropzone
   style={dropZoneStyles}
   accept = ".pdf,.xlsx,.XLSX,.csv"
   onDrop={(accepted, rejected) => { this.onDrop(accepted, rejected); }}>...</Dropzone>
wuno
  • 9,547
  • 19
  • 96
  • 180
  • are you by chance uploading the file to a domain that is different from the one that runs the file upload page? – Mohammad Ali Jan 27 '18 at 23:49
  • I am doing this on my localhost. It is a different port though. React is using port 8080 and node is using port 3000. – wuno Jan 27 '18 at 23:57
  • Did you check answers in [this question](https://stackoverflow.com/questions/34438540/react-redux-super-agent-first-call-gets-terminated)? – bigless Jan 28 '18 at 14:31
  • @bigless that actually makes perfect sense. I am using react-dropzone and submitting the files when they are dropped on the dropzone within the onDrop() that comes as a prop with the component from the npm library. Is there a way I can pass event in as a param still even though the function has already been defined by the library? – wuno Jan 28 '18 at 14:50
  • I updated my question to show the onDrop and the Would you mind showing me real quick what you mean in an answer? I am pretty confident this will solve the problem. – wuno Jan 28 '18 at 14:58
  • I dont know how this library works but when I searched, maybe you can use [some advices from this issue](https://github.com/react-dropzone/react-dropzone/issues/87) – bigless Jan 28 '18 at 15:02
  • Ya I saw that too. A little confusing but thank you. I think you were absolutely right though, this has to be the step in the right direction. Thank you for showing me this! – wuno Jan 28 '18 at 15:07
  • Sorry. If I would have clear answer, I would post it as an answer) – bigless Jan 28 '18 at 15:08
  • That is no problem. This is a tricky one, you have done enough! – wuno Jan 28 '18 at 15:15

0 Answers0