Send additional info to server in uploading image process

Question

I am using filepond 4.25.1 on vue 2.6.11 and everything works without problem until now. I want to send additional information to my server which is aspnet core 3. I am sending my request from filepond like below

myServer: {
        url: "http://**********/api/CustomerAuth/",
        process: {
          url: "uploadimages",
          method: "POST",
          withCredentials: false,
          headers: {},
          data: {
            nationalcode: "1234567890",
            typecode:"1"
          },
          timeout: 7000,
        },
        load: (source, load) => {
          fetch(source)
            .then((res) => res.blob())
            .then(load);
        },
      }

and server side

[HttpPost("uploadimages")]
    public IActionResult UploadImages()
    {
        try
        {
            var file = Request.Form.Files[0];
            string folderName = "Upload";
            string webRootPath = _hostingEnvironment.WebRootPath;
            string newPath = Path.Combine(webRootPath, folderName);
            if (!Directory.Exists(newPath))
            {
                Directory.CreateDirectory(newPath);
            }
            if (file.Length > 0)
            {
                string fileName = 
      ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                string fullPath = Path.Combine(newPath, fileName);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
            }
            return Ok("Upload Successful");
        }
        catch (System.Exception ex)
        {
            return NotFound(new { img_upld_error = ex.Message });
        }
    }

On the server side I need to access "nationalcode" and "typecode" which are sent as data in process. The values of these two parameters keep changing so they are not static values and with interact of user value of this two always change.

I really appreciate it if someone could give me some clue or guide to solve my problem.

Answer 1

FilePond dev here.

data does not exist as a prop on process.

You can add additional FormData parameters with the ondata property. See updated example below:

myServer: {
        url: "http://**********/api/CustomerAuth/",
        process: {
          url: "uploadimages",
          method: "POST",
          withCredentials: false,
          headers: {},
          data: {
            nationalcode: "1234567890",
            typecode:"1"
          },
          ondata: (formData) => {
              formData.append('nationalcode', '1234567890'); 
              formData.append('typecode', '1'); 
              return formData;
          }
          timeout: 7000,
        },
        load: (source, load) => {
          fetch(source)
            .then((res) => res.blob())
            .then(load);
        },
      }

Alternatively you can use the filepond metadata plugin to add metadata to each file (this is automatically sent to the server). https://pqina.nl/filepond/docs/patterns/plugins/file-metadata/

FilePond.setOptions({
    fileMetadataObject: {
        'nationalcode': '1234567890',
        'typecode': '1'
    }
})