Error Encountered: 403 Forbidden Error when Loading PDF in Quill Project using Uploadthing URL

This project is a combination of Next.js with TypeScript, tRPC, MySQL using Prisma, and Pinecone for vector DB. Uploadthing is integrated for PDF uploads. Despite successful upload, there is an issue when trying to open the PDF on the website, resulting in a 403 error in the browser console with the specific URL:

https://uploadthing-prod.s3.us-west-2.amazonaws.com/${file.key}
, as mentioned in the Uploadthing core.ts file.

I attempted to access the PDF within a chat application designed to provide answers related to the content. The project originates from a YouTuber named Josh Tried Coding. You can watch the explanation at timestamp 4:39:35 through this video link.

Answer №1

Make sure to verify the URL that is being supplied to the file property of the document within the PdfRenderer component.

The URL format should follow this structure:

https://example.com/files/{filename}.pdf

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

React application experiencing incorrect hexadecimal hash value output in crypto function

In my Reactjs app rendered by Nextjs, I am confused about why I am receiving different hash values in the web browser when using this code: crypto.createHash('sha256').update("12345678").digest("hex"); The expected hash value from the sha256 on ...

Creating a definition for the use of sweet alerts within a service and incorporating them through

Implementing sweet alert for displaying alert messages in angularJS2/typescript. Due to the repetitive nature of this code in different parts of the application, a service was created. @Injectable() export class AlertMessageService { constructor(pr ...

Compile time error due to TypeScript enumeration equality issue

Currently, I am developing a system to manage user roles within my website using TypeScript enumeration. This will allow me to restrict access to certain parts of the site based on the user's role. The primary challenge I am facing is comparing the u ...

Having trouble connecting 'chartData' to a 'div' in Angular 2 because it is not recognized as a valid property?

While working on my Angular project, I encountered the following error that I have been unable to resolve: EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'chartData' since it isn't a known property of ...

Exploring the narrowing capabilities of TypeScript within while loops

When I write while loops, there are times when I know for sure that a certain value exists (connection in this case), but the control flow analysis is unable to narrow it down. Here's an illustration: removeVertex(vertex: string) { const c ...

Typescript is failing to compile classes in a reliable sequential order

In my MVC 5 project, I am using TypeScript and angular. There are three TS files: Controller1.ts, Controller2.ts, and app.ts. The issue arises when I compile the program for the first time - everything usually compiles correctly in the expected order. Howe ...

How can I download a PDF file in React.js using TypeScript on Next.js?

I've created a component to download a PDF file. The PDF file is named resumeroshan.pdf and it's located inside the Assets folder. "use client"; import resume from "/../../Assets/resumeroshan.pdf"; export default function Abo ...

Simulation service agent partnered with openApi backend

I am currently utilizing MSW along with the OpenAPI-backend package for my project. I aim to mock both the browser server and test server using OpenAPI specifications. With an available OpenAPI definition, I generate `generated.ts` for RTK Query (which is ...

Steps for assigning a value from an enumerated type

I searched extensively online and came across resources like this: https://www.typescriptlang.org/docs/handbook/enums.html, but none provided an answer to my specific inquiry. Within the enum generated by typescript-generator, I have the following: type ...

The real file that was brought in after indicating a module in the node_modules directory that was coded in Typescript

After creating a typescript module named moduleA, I am ready to publish this package and make it accessible from another typescript project. Currently, for testing purposes, I have installed 'moduleA' using 'npm install ../moduleA'. Th ...

Tips for effectively utilizing the 'or' operator when working with disparate data types

One of my functions requires an argument that can have one of two different types. If you're interested in TypeScript functions and types, take a look at the official documentation, as well as these Stack Overflow questions: Question 1 and Question 2 ...

Using Nest JS to Handle Null Responses in Services

When using Nest Js to call Axios and get data from the Facebook API, I encountered a problem where the service was returning a null value. Strangely, when I tried calling the response using console.log, it did return a value. Any suggestions on what I migh ...

Steps for determining if a string is compatible with a user-defined type in Typescript

Just getting started with Typescript and currently working on a sudoku game. Here are the types and interface I have set up: export type GridCellValue = 1|2|3|4|5|6|7|8|9; export interface GridCell { readonly: boolean, value: GridCellValue|null, } ex ...

Implement a system that allows users to subscribe to different projects with customized stripe subscriptions

I am currently working on a common use case and I could use some suggestions on how to visualize it. In this scenario, each user can have multiple projects to which they can subscribe. For instance, let's say a User has two projects under their name: ...

Error TS2339: Cannot access attribute 'reactive_support' on interface 'LocalizedStringsMethods'

Encountering the error TS2339: Property 'reactive_support' does not exist on type 'LocalizedStringsMethods' I recently updated TypeScript from version 2.6 to 2.9, and attempted import LocalizedStrings from 'react-localization&apo ...

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

I need help figuring out why TypeScript is not recognizing that props.user is of type UserInterface. Any advice or guidance would be greatly appreciated. You can reach me at [email protected], [email protected], [email protected]. This seem ...

Troubleshooting: Why is my switch-case statement in TypeScript not functioning as expected

Here is a simple switch case scenario: let ca: string = "2"; switch (ca) { case "2": console.log("2"); case "1": console.log("1"); default: console.log("default"); } I am puzzled by the output of this code, which is as follows: 2 1 defa ...

Issue with applying the React Material UI ThemeProvider

I'm having issues with applying styles using @material-ui/core in my React app. Some of the styles are not being applied properly. You can check out my sandbox for the full code (relevant snippets below). Although I followed the instructions from Ma ...

Develop a customization feature in React to sort and categorize data

I'm having trouble creating a filtering function that triggers when an input value event is received in React's useState. When I start typing, nothing seems to be happening. Here's my Search component: export function Search({categories, onS ...

The command stopped abruptly due to a "SIGBUS" signal

As a junior still new to server and website building, I am currently working on creating a next.js project on a server. The build process goes smoothly until it reaches the point where it says Creating an optimized production build..., at which time an err ...