[SOLVED]Image upload axios post won't work

Photoshop UXP Plugin API
1

Hello!

I am adopting UXP to read images and upload them via post to server, but I am getting empty object on the request payload and also a 400 with error “no multipart boundary param in Content-Type”.

image

This is my code:

  const getMediaFormData = async entry => {
    const data = await entry.read({ format: storage.formats.binary });
    const formData = new FormData();
    formData.append('identifier', 'some_image');
    formData.append('sort_order', sortOrder);
    return formData;
  };

const uploadMedia = async mediaData => {
  let isSuccess = false;
  await post(`${baseURL}/api/app/media`, {
    data: mediaData,
    headers: { 'Content-Type': 'multipart/form-data' },
  })
    .then(response => {
      isSuccess = true;
    })
    .catch(e => {
      if (e.response) {
        console.log(`Send file failed. Error: ${e}`);
      }
      throw e;
    });

  return isSuccess;
};

  const onFinish = async () => {
    const fs = storage.localFileSystem;
    const userFolder = await fs.getFolder(); // folder picker
    const entries = await userFolder.getEntries();
    entries.forEach(async entry => {
      if (entry.isFile && isValidFileExtension(entry.name)) {
        const currentMedia = await getMediaFormData(entry)
          .then(response => {
            return response;
          })
          .catch(err => {
            console.log(err);
          });
        await uploadMedia(currentMedia);
      }
    });
  };

I also tried to set more headers like Content-Length, but no success.
Tks in advance

2

I fixed it by downgrading axios from 0.26.0 to 0.24.0 and instantiate const formdata = new FormData(); inside the uploadMedia() method.

3 Likes