Convert a file to Base64 using ImageUpload about ct-material-kit-pro-react

[Crael94]

Hello @einazare,

Thank you for this answer, I found a solution, here is my code:

imageUpload.jsx

handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      this.setState({
        file: file,
        base64: reader.result
      });
      this.handleSubmit()
    };
  }

In this function the issue was reader.readAsDataURL(file) (line 33). It has to be before the onloadend. Then the reader.result is the a base64 string of the file.

I hope I can help someone !

[einazare]

Hello there, @Crael94 ,

Thank you for your interest in working with our products.
Sorry for this late response, since I am a Christian I've had some free days for the Easter Holiday:

• https://www.calendar-12.com/holidays/easter
• https://www.officeholidays.com/religious/orthodox/orthodox_easter.php

At the moment we haven't worked with back-end logic, and we do not really know how you would submit something to your back-end. This being said, without knowing I believe that the handleSubmit should be called inside the reader.onloadend function. Also, you should change the code inside the handleSubmit function - it is a blank function, it doesn't do anything. And, since this is React that we are talking about, most definitely this function should have an Ajax call to a REST API. But once again, we are just front-end developers. There may be more to this.

Hope this will help.

All the best,
Manu

[einazare]

Hello again, @Crael94 ,

I will leave this issue open. As you've said it, maybe it will help someone.

All the best,
Manu

[alcalcides]

Thank you so much for your help

[piedrucci]

@Crael94 this is great!, it works for me. very helpful.. thanks so much