[Image Editor Plugin] Cannot read property '1' of null

Forge Component
(0)
Published on 25 Aug by André Gonçalves
0 votes
Published on 25 Aug by André Gonçalves

I am developing a mobile app that features image editing so I used this plugin but I am encountering an error Cannot read property '1' of null during the actual editing part of the image.

This is the error log details:


I debugged the client action and the error appeared right after stepped over the action EditImageFromBase64.


Any help would be deeply appreciated.

Hi Katrina,

Can you share the values of the properties passed to EditImageFromBase64?

Regards,

Daniel

Hi Daniël,

I just passed the current image (as binary data) from my List of LocalFileImages. The binary data is then converted to Base64 using the action BinaryDataToBase64, which is also included in the plugin.  


Then the converted value (Base64) is what I passed as property to EditImageFromBase64 action.

Hi Katrina,

Did you check in debugger that the base64 returned from the binary to base64 is a valid base64 string?

You can google for online base64 string validators.

Regards,

Daniel

Hi Katrina, 


Thanks for reporting the issue. After checking if the base64 is valid, like Daniël suggested, if it is valid, can you please provide the OML?

Thanks! 

Another question, are you able to test in an iOS device?

There's also a sample app that you can download and test. Please notice the screen property Base64Image in the HomeScreen, that has a default value of "data:image/jpeg (...)". 

Can check? 

Thanks :)

Hi Daniël,

I don't know how to get the binary data from the entity's "View Data", but I checked and compared the value with BinaryToBase64 action of the BinaryData extension and they are completely the same. I tested the returned value and as per base64.guru, it is a valid Base64 string.

Hi André,


Attached is the OML file for your review.

I did not test it in iOS since I am not an iOS user and there is no device available for testing.

I already reviewed the sample app you provided, does this mean that the plugin only works for .jpeg files? I am currently testing the plugin with .svg files. These .svg files are from slides of an uploaded presentation which are then converted to images.

Hi André,

The image editor opens now, the Base64 value to pass should start with "data:image/jpeg;base64," then the base64 result. Only problem is that the image does not display in the editor.. 



Does this mean the base64 string has an issue? I already validated the base64 and it was valid. I also used an online decoder from base64 to file and it returned the image as expected. 


Any help would be deeply appreciated.

Hi Katrina!

I’ll check ASAP. I think that the problem is related with the SVG. If you use a jpeg image, does it work? 


SVG is a XML format to support scaled vector graphics. The browser engine will interpreter the xml and draw the graphics. For sure this will not work as a JPEG image which is just a binary or a binary converted to base64 string.

Thanks Daniel.

My suggestion is to convert the svg file to a base64 string until I find a better solution. 

Does it work for you Katrina?

Hi Daniël and André,

I forgot to tell you that I already changed the files I use from .svg to .jpg. The editor opens but the image (which is already in .jpg) does not display which was what I replied earlier. 

Thanks Katrina.

I’ll check your oml ASAP and I’ll let you know my conclusions! :)

André Gonçalves wrote:

Thanks Katrina.

I’ll check your oml ASAP and I’ll let you know my conclusions! :)

Hi Andre

I'm facing the same problem when the EditfromCamera is triggered image does not display in the editor, below is my client action.  thank you for your help :) 

Katrina, can you please also send the _Core module?

Thanks!


Katrina, can you please also send the _Core module?

Thanks!

Hi André,

Please refer to the attached oml.



Hi Katrina, 

Can you please retry with the latest version of the plugin? You can now remove the "data:image/jpeg;base64,", making sure that the base64 string start with a slash /.

Let me know if it works :)


Hi Katrina, 

Can you please retry with the latest version of the plugin? You can now remove the "data:image/jpeg;base64,", making sure that the base64 string start with a slash /.

Let me know if it works :)

Hi André,

I still encounter the same result. I tried removing the "data:image/jpeg;base64," but the error went back to "Cannot read property 1 of null". So I included it but the editor still displayed a blank image. 


Hi Katrina! 

Have you updated the component to the latest version? Which version do you have installed in your environment?

Hi Katrina!

Just released version 1.0.2 that automatically validates if a given base64 string is valid. 

Let me know if this helps!

Hi André,

Sorry for the delayed response. I have updated the plugin to 1.0.2 and the error is still "Cannot read property 1 of null". Kindly see image below.

I am sure I used the latest version since I also included the ValidateBase64 to my action. I have attached the latest .oml and the extracted base64 string value of the image above for your review.