DEV Community

Oscar Laureano
Oscar Laureano

Posted on

3 3

Sending file in a POST request

I had some troubles trying to send a file via POST using Typescript 2.7 and Axios, so I wanted to write my solution here, hopefully it will be helpful to others.

The method I was trying to use is to simply make an object and send it as the body of the Post request:

// Headers object
const headers = { 'userID': "1234" };
// Body Object
const body = { 
    'processID': "4321",
    'file': fs.createReadStream( "files/data.zip")
    };
// URL
const url = 'localhost:8080/api/Extension/deploy';
// POST request
let results = await axios.post(url, body, { headers });
// Showing results
console.log(results);
Enter fullscreen mode Exit fullscreen mode

But the file was not reaching its final destination, so after looking for a while I found that it worked using form-data to construct the body of the request:

// Importing library
const FormData = require('form-data');
// Headers object
const headers = { 'userID': "1234" };
// Creating a new form data
var bodyFormData = new FormData();
// Appending info to body form data
await bodyFormData.append('processID', "1234");
await bodyFormData.append('file', fs.createReadStream("files/data.zip"), "data.zip"); 
//URL
const url = 'localhost:8080/api/Extension/deploy';
// POST request
let results = await axios.post(url, body, { headers });
// Showing results
console.log(results);
Enter fullscreen mode Exit fullscreen mode

You can learn more about form data here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs