QraphQL ImageInput help

[MazenMustafa]

Hi All,       

          Is there a way to set the "src" attribute of ImageInput in GraphQL to base64 data urlor a generated url using window.URL.createObjectURL(imageFile)). I tried it but no way! I would highly appreciate your help.

Kind Regards,

Mazen

[SBD_]

Hey @MazenMustafa,

The API will only provide an image URL, but you might be able to find a JS library to convert the URL to base64.

[MazenMustafa]

Hi @SBD_ , Thanks for your reply, I appreciate it. Yes, I found a JS library to covert into base64. However when I place it in the "src" property, it does not work! So, would you please make sure if the "src" property accepts base64?

[SBD_]

This is a browser/HTML thing. This thread might help you troubleshoot: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html

Can you provide an example of it not working? Let me know if I'm missing something.

[MazenMustafa]

@SBD_  I appreciate your help. I tried it again but it's not working when placing base64 image into the src property of ImageInput, attached the debugger details for the example I tested, If I place a url , it works. 

This is the example source code:

                <PageActions

                  primaryAction={[

                    {

                      content: 'Save',

                      onAction: () => {

                        // console.log(files)

                        const productInput = {

                            title: title,

                            images: files.map( (file, index) => (

                              {

                                altText: file.name,

                                src: image  //State Variable 

                              }

                              )),

                            bodyHtml: bodyHtml,

                          };

                          console.log(productInput);

                          handleSubmit({

                              variables: { input: productInput },

                        });

                      }

                    }

                  ]}

                />

[SBD_]

Hey @MazenMustafa,

Apologies, I misunderstood your goal. You'll need to provide a URL to the imageInput  (more info).