How can I upload a file using API

[mihochheim]

Hi! I'm not understanding how to upload a file (.png, .jpg or .pdf) to hubpost. How can I use this code without the axios?

import axios from "axios";

import { join } from "path";

import { createReadStream } from "fs";

import FormData from "form-data";

const HubspotAPI = axios.create({

  baseURL: "https://api.hubapi.com",

  headers: {

    Authorization: ``

  }

});

try {

  // Create and upload a new file

  const formData = new FormData();

  formData.append("file", createReadStream(join(__dirname, "cat.webp")));

  formData.append("folderPath", "cats");

  formData.append("options", JSON.stringify({

    access: "PUBLIC_NOT_INDEXABLE",

    overwrite: true

  }))

  const { data: { id: fileId } } = await HubspotAPI.post("/files/v3/files", formData)

  // Send the file to a object

  const { data: noteResponse } = await HubspotAPI.post("/engagements/v1/engagements", {

    "engagement": {

      "type": "NOTE",

    },

    "metadata": {

      "body": "Arquivo enviado pelo CMS."

    },

    "associations": {

      "contactIds": [5686102],

    },

    "attachments": [

      {

          "id": fileId

      }

  ],

  })

  console.log(noteResponse)

} catch (error) {

  console.log(error.response.data)

}

[tominal · Accepted solution]

Hey @mihochheim,

Are you wanting with or without axios? In my opinion, it'll be easier with axios. Otherwise you'll be using an XMLHttpRequest (XHR) in vanilla JavaScript which is ugly.

You'll need to remember to set the header variable "Content-Type" so the receiving server knows how to process your payload. Also, I am not sure what you are importing with that import FormData from "form-data"; line.

Here's an example using axios:

const formData = new FormData();
formData.append('file', createReadStream(join(__dirname, "cat.webp")));

axios.post('/server/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log(response.data);
  });

And here's an example using XHR:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/server/upload', true);

const formData = new FormData();
formData.append('file', createReadStream(join(__dirname, "cat.webp")));

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(formData);

Hope that helps!