The EXIF-JS data is becoming inaccessible beyond the method's scope

Currently, I am in the process of developing a web application using Angular 8. My main objective is to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. However, when attempting to access the global variable after executing the function, it returns undefined. Below is the function used for extracting the exif data:

photodata: any; // global variable
getPhotodata(file) {
    EXIF.getData(file, function() {
      const data = EXIF.getAllTags(this);
      console.log(data); // working
      console.log(data.Make); // working
      console.log(data.Model); // working
      console.log(data.DateTimeOriginal); // working
      this.photodata = data;
      console.log(this.photodata) // working
  });
  }
  console.log(this.photodata) // returns as undefined here

I have also attempted to return the data, however, that approach did not work either.

getPhotodata(file) {
    EXIF.getData(file, function() {
      const data = EXIF.getAllTags(this);
      console.log(data); // working
      console.log(data.Make); // working
      console.log(data.Model); // working
      console.log(data.DateTimeOriginal); // working
      return data;
  });
  }
console.log(getPhotodata(file)) // returns as undefined

Answer №1

It's possible that you have already found a solution to this issue, but if you're interested in exploring async programming, you might find my library exifr intriguing. I created it as a response to the lack of maintenance on exif-js for over 2 years, rendering it ineffective. Exifr utilizes promises and async/await syntax for seamless integration, allowing you to perform tasks like:

async function getExif() {
  let output = await exifr.parse(file)
  console.log(data.Make)
  console.log(data.Model)
}

You can also test out the library's playground to experiment with images and their outputs, or explore the repository and documentation.

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

How can different styles be seamlessly combined when customizing Fabric components?

Imagine I am enhancing a Fabric component by adding custom styles and wishing to combine any additional styles passed in through its props. Here's the solution I've devised: const { TextField, Fabric , IButtonProps, mergeStyleSets } = window.Fab ...

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

How can I use the Intersection Observer to load an H2 tag only when the image is visible on the page? Here is the JavaScript code I currently have: const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObser ...

Remove a row from a Jquery Jtable

I am running into difficulties when trying to delete rows, and I suspect that the issue might be related to the post[id] not being properly sent. Although the delete message appears, the row is not actually deleted. Below is the snippet of my code: JAVASC ...

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: Adding ::selected or outline did not resolve the problem as the entire button still turns blue for a ...

Having trouble with setting a default radio button selection in an Angular form within Ionic 4 framework

I am currently working on an application using Ionic to design a form that includes radio buttons. I have been attempting to set one of the radio buttons as checked by default, but so far, nothing seems to be effective. I have tried various methods, such a ...

The behavior exhibited by node.js express is quite peculiar

I am currently running an Express server. My process involves uploading an Excel File from HTML, which is then parsed by Express to perform calculations. Each row in the Excel file contains information about a User's address. For each address, our ...

What is the syntax for populating an attribute on the same line as v-for in Vue.js?

I am currently working on a simple loop utilizing Vue to iterate over an array of objects and populate table rows. <tr v-for="user in users"> <td>{user.name}</td> <td>{user.id}</td> </tr> However, I also need to as ...

Unable to create a pie chart with chartjs using JSON data

I am having trouble creating a pie chart using canvas.JS. I have already tried iterating through them in a loop. The JSON data returned looks like this: [[{"label":"belum","x":1},{"label":"sudah","x":5}]] Below is the code I am using to retrieve the JS ...

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

The dropdown div does not activate when the image is clicked

When the image in the simple dropdown is clicked, it fails to activate the dropdown feature. This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario i ...

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

Retrieve the parseJSON method using a string identifier

I am trying to serialize a C# const class into name-value pairs, which I need to access by their string names on the client side. For example: return $.parseJSON(constantClass).property; This approach is not working as expected. Is there any alternative ...

Steps for integrating custom slot properties in MUI data grids

Custom pagination has been successfully implemented using the mui datagrid component. However, when attempting to pass props for pagination using datagrid's slotProps, an issue arises stating that the type of onChange does not match. How can this be c ...

Two paths for a single Angular component

Is it feasible to create two distinct routes that reference one component? Consider the following scenario: { path: 'login', component: LoginComponent }, { path: 'user/:id/login', component: LoginComponent } I'm inquiring about t ...

Access and retrieve dynamically generated table row values with the use of AngularJS

Hi, I'm new to angularjs and I have a table where I need to dynamically add rows. I've got everything working with a bit of JQuery but I'm having trouble getting the value of dynamically created table rows. Here's my code, can someone p ...

Organizing an HTML layout

Looking for a way to sort a div structure based on a parameter, I came across a small JavaScript that seems to not work as expected. It appears that the sorting function is not parsing the values perfectly... This is the logic I am using for sorting: < ...

Is there a way to configure MaterialUI XGrid filters to target and filter by the renderCell parameters instead of the backend data source?

While utilizing MaterialUI XGrid to showcase rows of information, I am facing an issue with filtering. Currently, filtering can only be done based on the backend row values rather than what is displayed in the cell. For instance, consider a column named U ...

Angular ngFor directive is unable to iterate through nested data

I am struggling to make angular show some important information. Below is the necessary data: information = [ { title: 'title1', details: [ { id: 1, description: 'some info' }, ...

Creating a nested type using template literal syntax

Given a two-level nested type with specific properties: export type SomeNested = { someProp: { someChild: string someOtherChild: string } someOtherProp: { someMoreChildren: string whatever: string else: string } } I am looking ...

What is the best way to exchange the chosen selection within 2 select elements?

I have been trying to swap the cities in my select fields using two select elements, but for some reason, it is not working when the button is clicked: <div class="select-wrapper"> <select class="airport-select__departure"> <o ...