Search code examples
reactjsasp.net-coreasp.net-web-apiantdmultipartform-data

Formfile is empty when uploading data via antd design to aspnet core


I'm performing an s3 file upload action via axios to my aspnet core web api server. I'm confused as to where I went wrong. There is data uploaded from console but web api shows no files. This is my code. Thanks for all the help.

code upload file

const [fileUploads, setFileUploads] = useState([]);
//upload file
const dummyRequest = ({ file, onSuccess }) => {};

const beforeUpload = (file, fileList) => {
  return false
}

const { Dragger } = Upload;
const props = {
    accept: 'image/png, image/jpeg, image/svg, image/gif, .xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf',
    name: 'file',
    multiple: true,
    headers: {
      "Content-Type": "multipart/form-data"
    },
    beforeUpload:beforeUpload,
    action: dummyRequest,

    onChange({ file, fileList }) {
      if (file.status !== "uploading") {
        setFileUploads(fileList)
      }
    },

    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
      setFileUploads(e.dataTransfer.files)
    },
};

Client request with axios:

const handleUploadFile = () => {
    if(fileUploads.length === 0) toastActionWarning('No files to upload');
    const formDatas = new FormData();
    fileUploads.forEach(file => {
      console.log(file);
      formDatas.append(file.name,file.originFileObj);
    });
    console.log(formDatas);
    axios
      .post('files', formDatas , { withCredentials: true })
      .then((res) => {
        //setFileDatas(res.data.data);
        toastActionSuccess('Upload successfully');
      })
      .catch((error) => {
        toastActionFailed('There was an error in processing');
    });
  };

My server:

    public async Task<IActionResult> Create(List<IFormFile> files) //data is empty
    {
        var results = await _fileService.UploadSharedFile(files, ClaimsPrincipalExtensions.GetUserId<int>(User));
        return CreateActionResult(CustomResponseDto<List<FileSharedCreatedDto>>.Success(StatusCodes.Status200OK, results));
    }

My console log

enter image description here


Solution

  • I was edited my controller like this and it working !

     public async Task<IActionResult> Create()
        {
            var formCollection = await Request.ReadFormAsync();
            var files = formCollection.Files.ToList();
            var fileCreateds = await _fileService.UploadSharedFile(files , ClaimsPrincipalExtensions.GetUserId<int>(User));
            return CreateActionResult(CustomResponseDto<List<FileSharedCreatedDto>>.Success(StatusCodes.Status200OK, fileCreateds));
        }