[Vuejs]-Send additional info to server in uploading image process

by

2👍

✅

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

1👍

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);
});
👤Hani Nakhli

Leave a comment