Trouble with file upload to database (backend)

Question

I'm trying to upload files to my database but I'm having trouble.

When I try to upload a file to my database I got this error : Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

And the data from my file is not save to my database (see the image) :

I think my problem is here :

  const fileData = {
    type: req.body.type,
    name: req.body.name,
    data: req.body.data
  };

I tried to copy the function I use for create a user when he register but for a file when someone upload it.

Register (it works) :

users.post("/register", (req, res) => {
  const today = new Date();
  const userData = {
    first_name: req.body.first_name,
    last_name: req.body.last_name,
    email: req.body.email,
    password: req.body.password,
    phone: req.body.phone,
    deliveryAddress: req.body.deliveryAddress,
    created: today
  };

  User.findOne({
    where: {
      email: req.body.email
    }
  })
    //TODO bcrypt
    .then(user => {
      if (!user) {
        bcrypt.hash(req.body.password, 10, (err, hash) => {
          userData.password = hash;
          User.create(userData)
            .then(user => {
              res.json({ status: user.email + " registered!" });
            })
            .catch(err => {
              res.send("error: " + err);
            });
        });
      } else {
        res.status(400).json({ error: "Email already taken" });
        console.log("Email already taken !");
      }
    })
    .catch(err => {
      res.status(400).json("Error : " + err);
    });
});

File upload (not working) :

app.post("/files", (req, res) => {
  const uploadFile = req.files.file;
  const fileName = req.files.file.name;
  const fileData = {
    type: req.body.type,
    name: req.body.name,
    data: req.body.data
  };
  uploadFile.mv(`./uploads/${fileName}`, function(err) {
    if (err) {
      return res.status(500).send(err);
    }
    res.json({
      file: `uploads/${fileName}`
    });
  });
  Upload.findOne({
    where: {
      name: req.body.name
    }
  })
    .then(file => {
      if (!file) {
        Upload.create(fileData)
          .then(file => {
            res.json({ status: file.name + " created !" });
          })
          .catch(err => {
            res.send("error: " + err);
          });
      } else {
        res.status(400).json({ error: "File already uploaded" });
        console.log("File already uploaded");
      }
    })
    .catch(err => {
      res.status(400).json("Error : " + err);
    });
});

I'm not very familiar with backend so... I tried to change :

  const fileData = {
    type: req.body.type,
    name: req.body.name,
    data: req.body.data
  };

with

  const fileData = {
    type: req.files.file.type,
    name: req.files.file.name,
    data: req.files.file.data
  };

But I got an infinite loop and the file is not uploaded to my database (nothing is created).

The upload to the backend (uploads folder) works.

EDIT

When I use req.files.file.something for the fileData it works sometimes, the file is correctly uploaded to database but I got the error again (I think it works when the file is very tiny).

For a 1 Ko file :

Executing (default): INSERT INTO `files` (`id`,`name`,`data`,`createdAt`,`updatedAt`) VALUES (DEFAULT,'a suprimer.html',X'3c21444f43545950452068746d6c3e0d0a0d0a3c21444f43545950452068746d6c3e0d0a3c68746d6c3e0d0a3c686561643e200d0a093c6d65746120636861727365743d227574662d38223e0d0a093c7469746c653e20466169726520756e6520696d6167653c2f7469746c653e0d0a3c2f686561643e0d0a3c626f64793e0d0a0d0a093c703e746573743c2f703e0d0a0d0a093c696d67207372633d2268642e696d6167652e736e6f772e6a706567223e0d0a090d0a0d0a3c2f626f64793e0d0a3c2f68746d6c3e','2020-01-29 10:07:28','2020-01-29 10:07:28');

And in the database :

Why the type is not set up ? How can I reduce the time of the upload for a bigger file ?

You have a `res` in your code right? only add return before your `res`. So, your code will looks like this for an example: `return res.status(200).send(yourdata);` — Titus Sutio Fanpula, Jan 29 '20 at 09:54
You can see in this method `uploadFile.mv`, after you send respond to the client, it's still run to next step. Run to this method `Upload.findOne`. — Titus Sutio Fanpula, Jan 29 '20 at 10:02
Nothing has changed and I got always the same error. See my edit. — leyh, Jan 29 '20 at 10:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/206845/discussion-between-titus-sutio-fanpula-and-leyh). — Titus Sutio Fanpula, Jan 29 '20 at 10:21

lawrence-witt · Answer 1 · 2020-01-29T10:44:49.750

0

I believe this is because you are trying to send two responses in the same call handler. Once in uploadfile.mv then again in Upload.findOne. You cannot return two res.X to the same request.

This thread might be useful: Error: Can't set headers after they are sent to the client

edited Jan 29 '20 at 10:44

answered Jan 29 '20 at 10:38

lawrence-witt

8,094
3
13
32

Titus Sutio Fanpula · Accepted Answer · 2020-01-29T11:20:19.137

You can try this code below:

app.post("/files", (req, res) => {
  const uploadFile = req.files.file;
  const fileName = req.files.file.name;
  const fileData = {
    type: req.body.type,
    name: req.body.name,
    data: req.body.data
  };
  Upload.findOne({
    where: {
      name: req.body.name
    }
  }).then(file => {
      if (!file) {
        // upload file to directory
        uploadFile.mv(`./uploads/${fileName}`);
        // save file to database
        Upload.create(fileData)
          .then(file => {
            return res.json({ status: file.name + " created !" });
          }).catch(err => {
            return res.send("error: " + err);
          });
      } else {
        return res.status(400).json({ error: "File already uploaded" });
      }
    })
    .catch(err => {
      return res.status(400).json("Error : " + err);
    });
});

I hope it can help you to upload your file.

Trouble with file upload to database (backend)

2 Answers2