Why I can't load an image in tui image editor in react

Hello,

My question is related to tui image editor which is free and open source.

I’m trying to load an image in tui after clicking the thumbnail image. And you can see the most related parts of the codes:

ImageContet.js

import React from 'react';
const ImageContext = React.CreateContext('null');
export default ImageContext;

ImageUpload.js

return (
            <ImageContext.provider value={this.state.selectedFile.name}>
            <div>
                <div style={mystyle} onClick={this.onNavToEditor}/>
                <h1>File Upload Demo</h1>
                <div >{this.state.uploadResult} onClick={this.onNavToEditor}</div>
                <div>
                    <input type="file" onChange={this.onFileChange} />
                    <input type="text" value={this.state.value} onChange={this.onDescriptionChange} />
                    <button onClick={this.onFileUpload}>
                        Upload!
                    </button>
                 
                </div>

                {this.listItems()}
               
                </div>
            </ImageContext.provider>
        );

ImageEditor.js

//using the context
    const currentImage = React.UseContext(ImageContext);


    //defining the function for loading the images
    openImage = () => {
        loadImageFromFile(currentImage);

    };

    componentDidMount()
    {
        this.openImage();
    };

You can see I shared the image name via context to ImageEditor.js and then tried to load it.

more details on loading image in tui:

thanks,

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.