I am writing an angular application which allows users to fill a form. This form accepts an image, another file, and other data such as label, description, etc. So far I have it uploading all the data as a dto but I intentionally chose not to include the files on the dto.

The original idea was to send the files to ImageKit so that I could avoid server side file management. Unfortunately, Imagekit is only letting me upload only images. I need a solution that allows me to upload both the image and the other file from the form together for consistency. If there are other free platforms with such a service, please let me know.

Meanwhile, I have resolved to upload the two files to my backend. This is the piece I need help with (Unless there is the alternative of a third party like Imagekit)

I have seen multiple suggestions on how to upload files but every example I see has a single file being appended to a FormData object, which is then sent to the backend.

1. Is FormData only meant for files?
2. Can I add the file objects to my dto class or do I have to use FormData?
3. Can I do away with my dto and append all the members to the FormData object?
4. Do I have to do two api calls if the files have to go with FormData while the rest of the data goes in a dto?
5. Should I store the files in the db or the file system?
6. Is there a general/standard way to upload data that is associated with files?

I feel this is a common task i.e. saving user accounts which may have profile pictures

CodePudding user response：

1 .Is FormData only meant for files?

No, you can use it for JSON, too. You need to convert it in a string like this way:

const sampleJson = { key: "Something Data", childs: [ {key: "Child Data"}, {key: "Child Data 2} ]};

const formData = new FormData();
formData.append("file", files);
formData.append("jsonData", JSON.stringify(sampleJson));

2. Can I add the file objects to my dto class or do I have to use FormData?

dto? So you work with NestJS? Normally files has nothing lost in databases. Instead you can set information like file name, file path.... to the table.

3. Can I do away with my dto and append all the members to the FormData object?

If i understand this correctly, yes with the way on point 1.

4. Do I have to do two api calls if the files have to go with FormData while the rest of the data goes in a dto?

No. Point 1.

5. Should I store the files in the db or the file system?

Never ever in db! Files have nothing lost in databases. It doesn't matter which DB it is. Use a file server, or the regular file system of the machine. Create a upload folder and set (with Multer as example - link) the static path and save files in this folder.

6. Is there a general/standard way to upload data that is associated with files?

Uploading is very easy you can see in point one. And on backend you can use Multer (see point 5). And with a express backend you can do the follow:

const uploadData = async (req, res, next) => {
  const data = JSON.parse(req.body.jsonData);

  for (let file of req.files) {
    console.log(file); // Here the file name, mimetype and so on...
    // The file itself is saved in the folder you have set with multer.
  }
...