A guide on retrieving bytecode from a specific PDF using Angular

Can anyone help me with extracting the bytecode from a selected PDF file to save it in my database? I keep encountering an error stating that my byte is undefined. Could someone please review my code and identify what might be causing this issue?

I attempted to use the FileReader function, but unfortunately, my byte remains undefined. On the other hand, the FormData appears to be working properly as it displays all the necessary file information on the console.

EDIT:

uploadFile2(files: FileList | null): void {
        const file = files.item(0)
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.documentsArray.push({documentType: this.form.controls.dokumentType.value, file: reader.result})
          console.log(this.documentsArray)
        }
    }

I have updated my code and now seem to be receiving a base64 output. However, one question still remains - the data starts with: data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KM......."

Should the initial data value of 'data:application/pdf' remain as is or should I make changes before saving it to the database?

javascriptangulartypescript

Answer №1

One effective approach would be to save the file as a base64 String directly in your database for easy retrieval and storage.

    const fileReader = new FileReader();
    fileReader.readAsDataURL(event.target.files[0]);
    fileReader.onload = (event) => {
    if (fileReader.result) {
      // Save the PDF base64 data into your database
    }

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

Executing Laravel Ajax Requests on the whole website

I have been encountering an issue with my Ajax post call in my application. The call is supposed to update the Navigation throughout the entire site, but it seems to be working on some pages and not others. I am looking for a way to fix this and make it mo ...

javascriptphpjqueryajaxlaravel

Error message: Trying to use the data type 'String' as an index in the React dynamic component name map won't work

I have successfully implemented the code below and now I am attempting to convert it to Typescript. However, even though I can grasp the error to some extent, I am unsure of how to correct it. At present, I am allowing a component to have a prop called "i ...

reactjstypescripttypescript-typingsreact-typescript

Set a variable in Node.js to capture the return value of res.json

Embarking on the creation of a social network using Node.js, I must admit that I am quite new to this field. This marks my inaugural post on the subject and I sincerely hope for your understanding. Within my social network project, I aim to implement an a ...

javascriptnode.jsexpress

Updating NPM yields no changes

Having trouble updating dependencies in a subfolder of my MERN stack app. Specifically, I am trying to update the dependencies in the client folder where the React code is located. However, when I attempt to update the dependencies in the client folder, it ...

javascriptnode.jsreactjsnpm

Step-by-step guide to adding products to your Supabase shopping cart

I have managed to insert a row into the "order" table with user information. Now, I want to individually add item details to a separate table named "order_storeItems" to create a relationship between the order and storeItems tables. I attempted using Pro ...

javascriptreactjsreact-nativesupabasesupabase-database

Can the automatic casting feature of TypeScript be turned off when dealing with fields that have identical names?

Imagine you have a class defined as follows: Class Flower { public readonly color: string; public readonly type: string; constructor(color: string, type: string) { this.color = color; this.type = type; } Now, let's introduce anoth ...

typescriptcastingtsconfig

Expo: A guide on integrating expo code into an existing Android project

I'm looking to enhance my Android app (which is built in standard Java) by allowing users to create their own 3D models. To achieve this, I want to incorporate a 3D viewer within the app so that users can view and interact with their creations. My pl ...

javascriptreactjsreact-nativeexpo

Discover the steps for generating this graph using ZingChart

I have been experimenting with ZingChart in an attempt to replicate a chart that has the same look and functionality as this example: https://i.stack.imgur.com/PGNK3.png Despite making numerous adjustments to a bar chart, I have not been able to achieve ...

javascriptchartsbar-chartlinechartzingchart

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line

Error Image I'm currently working on developing a shopping cart feature, and I've encountered an issue when transferring data from the client side to the server side. Despite the cart data being successfully updated in the session, an internal se ...

javascriptnode.jsexpressaxios

Contentful integrated into a NuxtJs website

After successfully creating a blog using Nuxt JS and integrating Contentful into the project, I followed a helpful tutorial from here. This enabled me to retrieve all sections such as title, date, and content of the post efficiently. However, I am current ...

javascriptvue.jsnuxt.jscontentful

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

javascripthtmlgoogle-chromecachingvideo

React-query: When looping through useMutation, only the data from the last request can be accessed

Iterating over an array and applying a mutation to each element array?.forEach((item, index) => { mutate( { ...item }, { onSuccess: ({ id }) => { console.log(id) }, } ); }); The n ...

javascriptreactjstypescriptreact-query

An issue with displaying images has been identified within Next.js, resulting in an error message related to the hostname

Encountering an error when using next js Image next.config.js: module.exports = { images: { domains: ['localhost'], }, }; Error image: https://i.stack.imgur.com/RvsdH.png I am struggling to understand how to correctly set up the image ...

javascriptreactjsnext.js

Enhancing Grails dynamic dropdown to include a pre-selected value in edit.gsp

One feature I have implemented is a dynamic dropdown menu in my _form.gsp file that appears in both the create and edit pages. While it currently works as intended, I am seeking a way to display the selected value on the edit page. _form.gsp <g:s ...

javascriptajaxgrailsdrop-down-menu

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

javascriptjquerycsshtml

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...

javascripthtmlcss

What is the best way to reference an Angular constant within a Gulp configuration file?

Is it possible to retrieve an Angular constant within a Gulp file? For example: angular.module('app').constant('env', { url: 'http://localhost:1337/' }); What is the method for accessing this constant inside a function ...

javascriptangularjs

Ignoring the NGRX Store selector override during testing appears to be happening

When overriding the selector to return null, the data is still returned as per the override set during initialization. Attempting to use setState did not yield results either. Testing the else condition in the following code block: this.store.pipe(select( ...

angularunit-testingjasminekarma-runnerngrx

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

Having trouble utilizing NPM package within AWS Lambda environment, encountered issue with require() function

Recently, I developed a simple NPM package consisting of just two files. Here is the content of index.js: module.exports = { errors: { HttpError: require('./src/errors').HttpError, test: 'value' } } And here& ...

javascriptnode.jsamazon-web-servicesnpmaws-lambda