Caching images in react js

2018-10-09 16:30 Zeeshan Ali imported from Stackoverflow

I am writing an app in react js using firebase as the backend service. The images names and location is stored in the realtime database and is accessed and then the file(image) is fetched from the cloud storage and displayed on the screen.

eg.

getFile(path){
   firebase.database().ref('').child(path).once('value').then(snap =>{
       cloudStorage.child(snap.val()).getDownloadURL().then(url =>{
            this.setState({fetchedImage: url});
       });
   });
}

So the fetched image url is provided as a source to an image tag

<img src={this.state.fetchedImage}/>

Can I download this and save this image to the web storage so that I download the image again when my view re-renders?

Thanks, Zeeshan

See also questions close to this topic

TypeError: Cannot read property 'props' of undefined --reactjs

I'm having a tabcontainer component (child)uncontrolled component actually i dont know i'm doing it the right way and content component(parent)

contents.js

class Contents extends React.Component {
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
          >
            <Tab label="Wallet" />
            <Tab label="Transactions" />
            <Tab label="Add Fund" />
            <Tab label="Withdraw" />
            <Tab label="Add Bank Account" />
            <Tab label="Transfer" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
        {value === 3 && <TabContainer>Item Four</TabContainer>}
        {value === 4 && <TabContainer>Item Five</TabContainer>}
        {value === 5 && <TabContainer>Item Six</TabContainer>}
      </div>
    );
  }
}

tabcontainer.js

import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';

const TabContainer = props => {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {this.props.children}
    </Typography>
  );
};

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

export default TabContainer;

I get the following error TypeError: Cannot read property 'props' of undefined --reactjs.

I dont know whether I'm using props the right way passing in function prototype or I need class.

Can anyone lemme know where I'm going wrong.

React app throwing errors when using 'react-pdf'
I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.

One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:
```
  import  {pdfjs}  from 'react-pdf' 
window.PDFJS.workerSrc  = process.env.PUBLIC_URL + '/pdf.worker.js'
```
This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:
```
index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined
```
These were the initial comments that helped me narrow down the error: https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498

https://github.com/wojtekmaj/react-pdf/issues/291

but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!
How can i share image from my web application to Instagram?

I have create one application in React-js for edit images after editing image i want to share(post) that image in Instagram how can i do that?
How can i use Instagram developer API to post the images from my application to Instagram so that user can directly post the image that he has edited in my application.
please give me steps if it's possible because i am performing integration first time.
Dual database possibilities (Firebase & Webhosting service)

Is it possible to use two databases, example, Firebase and an online webhosting server? I am developing an app that uses the webhosting server for the data and the firebase only for the chats.

Android - recyclerView return several times the same items

I'm trying to get firebase data, but the problem is that it returns the same data several times.

imageRef = database.getInstance().getReference("Users").child(userid);
imageRef.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {


            for (DataSnapshot mData : dataSnapshot.child("images").getChildren()) {

                for (DataSnapshot mDataTwo: dataSnapshot.child("locations").getChildren()) {

                    ItemData itemData = new ItemData();

                    String mImages = mData.getValue(String.class);
                    String mLocations = mDataTwo.getValue(String.class);

                    itemData.setImages(mImages);
                    itemData.setLocations(mLocations);

                    data.add(itemData);

                }

            }
            adapter.notifyDataSetChanged();

        }

UPDATE:

This is my database structure.

"Users" : {

"X7aVfZH5oZbIaeyLm9FAjOSr5Gd2" : {
  "images" : {
    "urlImages1" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg1.jpg?alt=media&token=e26fd6a2-2be7-4a01-920e-0aed1fe06436",
    "urlImages2" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg2.jpg?alt=media&token=40165918-3b46-4b22-b0ef-255965b7855d",
    "urlImages3" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg3.jpg?alt=media&token=cfd7d00d-9b1a-44fd-80d4-a2947f7de743",
    "urlImages4" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg4.jpg?alt=media&token=995419a7-70f7-4330-b046-d06a4d54453e",
    "urlImages6" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg6.jpg?alt=media&token=ee6f566a-a9e5-4e8f-9d53-64d3f3bc97a6",
    "urlImages7" : "https://firebasestorage.googleapis.com/v0/b/anthiefy.appspot.com/o/X7aVfZH5oZbIaeyLm9FAjOSr5Gd2%2FImages%2FImg7.jpg?alt=media&token=883a3321-fbba-49bd-aae3-14b005b4cc5b"
  },
  "locations" : {
    "locations1" : "14.2830817 -89.7263953",
    "locations2" : "14.2661424 -89.7220017",
    "locations3" : "14.2846352 -89.7251991",
    "locations4" : "14.2684987 -89.7266704",
    "locations5" : "14.2684987 -89.7266704",
    "locations6" : "14.2684987 -89.7266704",
    "locations7" : "14.2684987 -89.7266704"
  }

I have tried many ways, I have also sought the solution but without any fortune. If someone can help me, very grateful.

Firebase multi location pagination with listeners
Imagine I have a denormalized dataset in Firebase, optimized for fast shallow querying (objects are not deeply nested).

It all works great until I need to fetch data based on multiple criterion.

Here is an example:

If I need to do a pagination on "nike" collection sorted by price, I'd do
```
ref.child('nike').orderByChild('price').limitToFirst(10)
```
However if I want to paginate over "nike" AND "adidas" sorted by price - it's usually suggested to create a separate table "nike_adidas" with duplicated items from both collections.
```
ref.child('nike_adidas').orderByChild('price').limitToFirst(10)
```
The problem is that there are a lot of such combinations and it's not possible to create "index tables" for all of them.

What do you do in such cases? (considering ONLY Firebase, e.g. you can't get to setup a separate ElasticSearch for such queries)

Additional requirement - I still want clients to receive updates once objects changed/moved/removed.
Each time I click an "href" link it adds the link again to the URL. Why?

I've got a button that says

<a href="home.jsp">Home</a>

and another link

<a href="CRUD/Books/Add.jsp">Add</a>

If I click Home then Add it works fine but then when I click add again the URL multiplies like this

URL: CRUD/Books/Add/CRUD/Books/Add.jsp

and I have lots of pages with the same issue what should I do to prevent this?
How to build a css framwork

I'm interested in building a new framework like bootsrap, skelton, materializecss for web designing i tried with CSS. but if there is a standers way to build a framework i need to know tools and how to do this.

SOAP Web Service - Can't generate classes from XSD

I've been following the exact steps from this tutorial. However, i keep getting the same error no matter what i try.

I have two elements that should be generated in the xsd file: GetStudentDetailsRequest and GetStudentDetailsResponse. Here is my .xsd file:

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
           targetNamespace="http://in28minutes.com/students"
           xmlns:tns="http://in28minutes.com/students" elementFormDefault="qualified">

    <xs:element name="GetStudentDetailsRequest">
        <xs:complexType>
            <xs:sequence>
                <xs:element name= "id" type="xs:int"/>
            </xs:sequence>
        </xs:complexType>
    </xs:element>

    <xs:element name="GetStudentDetailsResponse">
        <xs:complexType>
            <xs:sequence>
                <xs:element name= "StudentDetails" type="tns:StudentDetails"/>
            </xs:sequence>
        </xs:complexType>
    </xs:element>

    <xs:complexType name="StudentDetails">
        <xs:sequence>
            <xs:element name="id" type="xs:int"/>
            <xs:element name="name" type="xs:string"/>
            <xs:element name="passportNumber" type="xs:string"/>
        </xs:sequence>
    </xs:complexType>

</xs:schema>

And my pom.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.1.1.RELEASE</version>
            <relativePath/> <!-- lookup parent from repository -->
        </parent>
        <groupId>com.in28minutes.springboot.soap.web.services.example</groupId>
        <artifactId>spring-boot-tutorial-soap-web-services</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <packaging>jar</packaging>
        <name>Assignment4OnlineTrackerSystem</name>
        <description>OnlineTrackerSystem</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web-services</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>jaxb2-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>xjc</id>
                        <goals>
                            <goal>xjc</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <schemaDirectory>${project.basedir}/src/main/resources</schemaDirectory>
                    <outputDirectory>${project.basedir}/src/main/java</outputDirectory>
                    <clearOutputDir>false</clearOutputDir>
                </configuration>
            </plugin>

        </plugins>
    </build>


</project>

If i run mvn clean install i get the following error:

> Exception in thread "main" java.lang.Error: java.lang.reflect.InvocationTargetException
    at com.sun.tools.xjc.reader.Ring.get(Ring.java:113)
    at com.sun.tools.xjc.reader.xmlschema.BGMBuilder.<init>(BGMBuilder.java:147)
    at com.sun.tools.xjc.reader.xmlschema.BGMBuilder.build(BGMBuilder.java:117)
    at com.sun.tools.xjc.ModelLoader.annotateXMLSchema(ModelLoader.java:425)
    at com.sun.tools.xjc.ModelLoader.load(ModelLoader.java:174)
    at com.sun.tools.xjc.ModelLoader.load(ModelLoader.java:119)
    at com.sun.tools.xjc.Driver.run(Driver.java:333)
    at org.codehaus.mojo.jaxb2.AbstractXjcMojo.execute(AbstractXjcMojo.java:316)
    at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:134)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:207)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:153)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:145)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:116)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:80)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.java:51)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:128)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:307)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:193)
    at org.apache.maven.DefaultMaven.execute(DefaultMaven.java:106)
    at org.apache.maven.cli.MavenCli.execute(MavenCli.java:863)
    at org.apache.maven.cli.MavenCli.doMain(MavenCli.java:288)
    at org.apache.maven.cli.MavenCli.main(MavenCli.java:199)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:566)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:289)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:229)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:415)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:356)
    at org.codehaus.classworlds.Launcher.main(Launcher.java:47)
Caused by: java.lang.reflect.InvocationTargetException
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
    at com.sun.tools.xjc.reader.Ring.get(Ring.java:102)
    ... 30 more
Caused by: java.lang.Error: java.lang.reflect.InvocationTargetException
    at com.sun.tools.xjc.reader.Ring.get(Ring.java:113)
    at com.sun.tools.xjc.reader.xmlschema.BindingComponent.getClassSelector(BindingComponent.java:65)
    at com.sun.tools.xjc.reader.xmlschema.ColorBinder.<init>(ColorBinder.java:62)
    at com.sun.tools.xjc.reader.xmlschema.BindGreen.<init>(BindGreen.java:63)
    ... 35 more
Caused by: java.lang.reflect.InvocationTargetException
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
    at com.sun.tools.xjc.reader.Ring.get(Ring.java:102)
    ... 38 more
Caused by: java.lang.NoClassDefFoundError: javax/activation/MimeTypeParseException
    at java.base/java.lang.Class.getDeclaredConstructors0(Native Method)
    at java.base/java.lang.Class.privateGetDeclaredConstructors(Class.java:3138)
    at java.base/java.lang.Class.getConstructor0(Class.java:3343)
    at java.base/java.lang.Class.getDeclaredConstructor(Class.java:2554)
    at com.sun.tools.xjc.reader.Ring.get(Ring.java:100)
    at com.sun.tools.xjc.reader.xmlschema.DefaultClassBinder.<init>(DefaultClassBinder.java:98)
    at com.sun.tools.xjc.reader.xmlschema.ClassSelector.<init>(ClassSelector.java:214)
    ... 43 more
Caused by: java.lang.ClassNotFoundException: javax.activation.MimeTypeParseException
    at org.codehaus.plexus.classworlds.strategy.SelfFirstStrategy.loadClass(SelfFirstStrategy.java:50)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.unsynchronizedLoadClass(ClassRealm.java:271)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClass(ClassRealm.java:247)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClass(ClassRealm.java:239)
    ... 50 more

I've seen some suggestions to switch from java 9 to java 8, try a different jdk, but nothing seems to work.

Alternatives to client db storage in private browsing mode
I made a web service. When user logs in, the service creates the indexddb (idb) in openRequest.onupgradeneeded and writes data into the db in openRequest.onsuccess. Codes look like this,
```
export async function getCurrUser(window) {
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    let  openRequest = indexedDB.open('userData',2);
    openRequest.onsuccess =  e =>{/*write data to db*/}
    openRequest.onupgradeneeded =  e => {/*build db*/}
    openRequest.onerror=e=> {//case private browsing}
}
```
in the private browsing mode, only openRequest.onerror is called; in my case, the user can never successfully log in. Since it's impossible to write all data into localstorage, I look for suitable alternatives for storage in private browsing mode. Any suggestions are welcome.
What is the difference between database storage API and DOM storage API
From the WebView documentation, it says:
1. setDatabaseEnabled sets whether the database storage API is enabled.
2. setDomStorageEnabled sets whether the DOM storage API is enabled.
So I want to ask what is database storage API and what is DOM storage API? What are their differences?

Related questions

Caching images in react js

See also questions close to this topic