pqina / filepond

🌊 A flexible and fun JavaScript file upload library
https://pqina.nl/filepond
MIT License
15.07k stars 821 forks source link

[Bug?] #961

Closed mydracula closed 7 months ago

mydracula commented 7 months ago

Is there an existing issue for this?

Have you updated FilePond and its plugins?

Describe the bug

Why does formData contain 2 file fields, one of which is an empty object and 1 binary object, and the File object cannot be obtained?

image image

But function writing can solve this problem

server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
          const formData = new FormData();
          formData.append(fieldName, file);
          const request = new XMLHttpRequest();
          request.open('POST', '/api/upload');
          request.upload.onprogress = (e) => {
            progress(e.lengthComputable, e.loaded, e.total);
          };
          request.onload = function () {
            if (request.status >= 200 && request.status < 300) {
              // the load method accepts either a string (id) or an object
              load(request.responseText);
            } else {
              // Can call the error method if something is wrong, should exit after
              error('oh no');
            }
          };

          request.send(formData);

          // Should expose an abort method so the request can be cancelled
          return {
            abort: () => {
              request.abort();
              abort();
            },
          };
        },
      },

Reproduction

20240201174242.webm

Environment

- Device:4.30.6
- OS:windows
- Browser:Google Chrome v120.0.6099.227
rikschennink commented 7 months ago

You can use a custom process function to upload only the file.

By default FilePond posts a data object (JSON string) with file information and a file object.

See: https://pqina.nl/filepond/docs/api/server/#process