The PDF can be accessed from the console but the network tab is not visible

import { axiosInstances } from "./axiosInstanc"
interface upladPdfPayload {
    name: string;
    pdf: File
}
export const uploadPdfApi = async (payload: upladPdfPayload) => {
    try {
        console.log(payload);
        const res = await axiosInstances.post('/pdf/upload', payload);
        return res.data;
    } catch (error: any) {
        return error.response.data;
    }
}

The following details are shown in the console: Name: 'Research paper certificate.pdf' Name: "Research paper certificate.pdf" PDF: File Last Modified: 1713083292691 Last Modified Date: Sun Apr 14 2024 13:58:12 GMT+0530 (India Standard Time) Size: 937460 Type: "application/pdf"

Axios Instance:

import axios from "axios";
import { baseUrl } from "./baseUrl";

function getToken() {
    return localStorage.getItem("token");
}

export const axiosInstances = axios.create({
    baseURL: baseUrl,
    headers: {
        authorization: `Bearer ${getToken()}`
    }
})

axiosInstances.interceptors.request.use((config) => {
    config.headers.authorization = `Bearer ${getToken()}`;
    return config;
});

I have tried everything by checking the console and network tab, but unfortunately, I am unable to solve it. I want to see the PDF in the network tab's payload.

Answer №1

To ensure that a PDF file is accessible in the network tab, it must be correctly formatted as multipart/form-data.

Make adjustments to the uploadPdfApi function by utilizing FormData:

export const uploadPdfApi = async (data: UploadPdfPayload) => {
try {
    const formData = new FormData();
    formData.append('name', data.name);
    formData.append('pdf', data.pdf);

    const response = await axiosInstances.post('/pdf/upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    });

    return response.data;

} catch (error: any) {
        return error.response.data;
    }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating pictures on Bootstrap's project showcase template

I attempted to modify the source of an image by clicking on smaller ones using bootstrap’s template found at . Despite my efforts, I have not been able to achieve the desired result. (Any help is greatly appreciated!) I included id="myImage" on the main ...

Finding out when the entire subscription loop has ended in an Angular 2+ application can be accomplished through various detection techniques

Currently, I am utilizing Angular 13 with TypeScript. Within my Service class, there is a method that carries out a get request to a REST API: getProduct(productId): Observable<Product> { const productUrl = `http://localhost/api/products/${produc ...

Obtain keys from an object implemented with an interface in TypeScript

Is it possible to retrieve the actual keys of an object when utilizing an interface to define the object? For example: interface IPerson { name: string; } interface IAddress { [key: string]: IPerson; } const personInAddressObj: IAddress= { so ...

The attribute 'xxx' is not found within the 'Readonly<{}>' type

I am currently in the process of writing tests for a React Typescript component. App.tsx: import * as React from 'react'; import { Button } from 'react-bootstrap'; interface Igift { id: number; } interface IAppState { gifts: Igi ...

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality. This task is being carried out within a React Component using c ...

Designing the style of a React datepicker

Currently on my webpage, there is a React datepicker component (https://reactdatepicker.com/). Ideally, when I click on the date, I would like the popper to function as an element within the page rather than a separate window. This is how I envision it: ...

The autocompletion feature fails to display any suggestions if the input field is left

I am currently experiencing an issue with my md-autocomplete element - the dropdown does not appear when the search field is empty. Surprisingly, the querySearch function is not even being called at that point. However, once I start typing something, the f ...

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...

A colleague's dependency is taking precedence over an NX Library

I'm working in a monorepo environment with nx, structured as follows: apps | - my-app libs | - common | - my-client After deployment, the libraries are published on npm with the names @my-org/my-client and @my-org/common. I have set up path ali ...

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

"Relating to meteorjs, admin users are akin to those in

Looking for a package or tutorial to create admin users similar to Django. I want to be able to create superusers through the terminal and have the ability to personalize user schemas with Collection2. Additionally, I would like to remove the option for ...

Guide on utilizing Subscribe Observable for performing lookup in Angular

I am new to Angular and seeking guidance as my approach may not be the best. Please advise me on a better solution if you have one. My goal is to display a list of records in table format, retrieved from the database where only Foreign Keys IDs are availa ...

Traversing through each element using Array method

I need to create a redux function that will add a specified number n to the fourth element of an array every time a button is clicked. However, if the element is either L or M, I do not want the addition to occur. For example, starting with this initial a ...

It is not possible for the root segment to contain matrix parameters in Ionic 4

Has anyone figured out how to resolve this issue? .ts this.router.navigate(["", { clientId: data.id }]) Error message { path: "", component: HomePage, }, An unhandled error occurred: Root segme ...

Ways to eliminate empty values from an array in JavaScript

I need help deleting any null elements from my array [ [ null, [ [Array], [Array] ] ] ] I am looking to restructure it as [ [[Array],[Array]], [[Array],[Array]], [[Array],[Array]] ] If there are any undefined/null objects like : [ [[Array],[]], [[A ...

Using jQuery and CSS to animate DOM elements hidden with display: none

I have a question regarding hiding elements on a webpage. When I set a div to display: none, the other elements in the DOM will abruptly move up to fill its space. Is there a way to animate this movement so that it transitions smoothly and gently instead ...

Clicked but nothing happened - what's wrong with the function?

For my project, I have incorporated tabs from Angular Material. You can find more information about these tabs here. Below is the code snippet I am using: <mat-tab-group animationDuration="0ms" > <mat-tab></mat-tab> < ...

"Troubiling with preact-cli and Babel/TypeScript configurations for enabling correct functionality of Symbol.iterator and spread syntax

Within my codebase, there exists a function named range that is responsible for generating ranges. The implementation of this function is outlined below: export const range = (min: number, max: number) => { // ... return { // ... ...

Is it possible to update table cell content depending on selected option?

Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...

Is AngularJS 2 compatible with Eclipse IDE?

After installing the AngularJS 1.1.0 plugin, I am looking to upgrade to AngularJS 2.0 and need the corresponding plugin for Eclipse IDE. However, my search in Eclipse Market didn't yield any results. Even for TypeScript, the highest version of the plu ...