Send additional info to server in uploading image process

Question

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.

filepond provides a comprehensive file processing method, but does not provide a method to upload other parameters. A better way is to use filepond to process files, and use axios to upload files and other data. — Karney., Jan 06 '21 at 05:22

score 2 · Accepted Answer · answered Jan 11 '21 at 10:18

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

using the formData.append, how do use pass in a variable? It works fine as long as it is a string, but when you try to use a variable or state, it says it is undefined. — Ryan M, Mar 15 '23 at 20:55

Hani Nakhli · Answer 2 · 2021-01-06T13:51:09.300

You can get file's in model, define your model like this

public class FileWithDataModel
{
    public IFormFile File { get; set; }
    public string NationalCode { get; set; }
    public string   TypeCode { get; set; }
}

and controller method will be :

    public async Task<IActionResult> UploadFileWithData(FileWithDataModel model)
    {
        var file = model.File;
        //you can save this file...
        var nCode = model.NationalCode; //can access data easy
        //......

        return Ok();
    }

Microsoft suggest to use Async method especially for file processing and uploading

here is example of jquery client

var form = new FormData();
form.append("NationalCode", "12345678");
form.append("TypeCode", "1");
form.append("File", fileInput.files[0], "/path/to/file");

var settings = {
  "url": "http://**********/api/CustomerAuth/",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

Send additional info to server in uploading image process

2 Answers2