Format to POST a file to the ImageKit server?

Question

I've successfully built a React UI to select and upload N files. The key part of it is this:

<input type='file' accept='image/*' id='selectFiles' multiple onChange={handleFileChange} />

The selected files are stored in this state variable:

const [fileList, setFileList] = React.useState<FileList>();

I know they're correctly there because I iterate through them and show them in a preview DIV.

Following ImageKit's instructions, I successfully built an Auth endpoint which returns the auth credentials.

Then, within a useEffect I iterated through fileList to upload one photo at a time to the ImageKit server. But even trying just one file, I keep getting a 400 error informing me that the fileName parameter is missing. It definitely is not missing so I suspect that the problem lies with what I'm providing as the file parameter.

Here's the critical code (with some data obscured for privacy reasons) :

    const uploadFile = async (file: File) => {
      try {
        const body = {
          file: file,
          publicKey: 'my_public_key',
          signature: 'imageKit_signature',
          expire: 'imageKit_expiry_value',
          token: 'imageKit_token',
          fileName: 'test123.jpg',
          useUniqueFileName: false,
          folder: userName,
          overwriteFile: false,
        };

        const response = await axios.post('https://upload.imagekit.io/api/v1/files/upload', body);
        console.log(response.status, response.data);
      } catch (err) {
        console.error(err);
      }
    };

Might anyone see what I'm doing wrong?

Robert

Answer 1

I solved the problem. If you're going to upload a file to ImageKit using their POST endpoint, you need to explicitly set the headers like this:

const response = await axios.post(
  'https://upload.imagekit.io/api/v1/files/upload', 
  body, 
  { headers: {'Content-Type': 'multipart/form-data'} }
);

For those wondering, here's the barebones body:

const body = {
  file: base64File,
  publicKey: imageKitPublicKey,
  signature: authParams?.signature,
  expire: authParams?.expire,
  token: authParams?.token,
  fileName: 'someFilename.ext',
};

But indeed, specifying Content-Type like above will allow you to upload a file to their server.