Warm tip: This article is reproduced from serverfault.com, please click

Send additional info to server in uploading image process

发布于 2021-01-05 08:35:10

im using filepond 4.25.1 on vue 2.6.11 and everything work without problem until now. i want to send additional information to my server which is aspnet core 3. i send 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 });
        }
    }

in server side i need to access "nationalcode" and "typecode" which is send as data in process and value of these two parameters always change so its not static value and with interact of user value of this two always change.

I really appreciated if someone give me a some clue or guide me to solve my problem.

Questioner
FarbodKain
Viewed
0
Rik 2021-01-11 18:18:45

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'
    }
})