# Base64 string to Image object

**URL:** https://community.appfarm.io/t/base64-string-to-image-object/1085
**Category:** Bug reports
**Tags:** actions
**Created:** [March 1, 2024, 9:44pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085 "2024-03-01T21:44:21Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Preben](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/preben/32/545_2.png) [@Preben](https://community.appfarm.io/u/Preben)
#### Post date: [March 1, 2024, 9:44pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/1 "2024-03-01T21:44:21Z")

</div>

Good evening,

I might be getting quite late here, but I’m struggling with getting my base64 string to be converted to a png image.

I believe it worked earlier this evening, but now it suddenly is not able to create an image.

I have stripped the solution down to the exact base64 png string and still I get an error it is working on online decoders, but in Appfarm it fails. Is it a bug or a user error

**Setup create file object action node :**

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/1/1495900967f5ee849901c0428a1c891bbff3ff39.png)

**Result:**

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/a/a750292d06d568125ca97c43e1d8dca5d3ed1fd6.png)

**Example base64 string:**  
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

---

<div class="post-metadata">

### Author: ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)
#### Post date: [March 1, 2024, 9:47pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/2 "2024-03-01T21:47:45Z")

</div>

Hi!

Can you try adding “.png” to the filename (if not already included in that variable) - i.e. a function `return wastetype + "png"`?

---

<div class="post-metadata">

### Author: ![Preben](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/preben/32/545_2.png) [@Preben](https://community.appfarm.io/u/Preben)
#### Post date: [March 1, 2024, 9:49pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/3 "2024-03-01T21:49:33Z")

</div>

No difference I’m afraid…

---

<div class="post-metadata">

### Author: ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)
#### Post date: [March 1, 2024, 10:04pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/4 "2024-03-01T22:04:27Z")

</div>

It looks like you are trying to represent a binary file (png) using a pure base64 _string_?

In that case, you should return a binary value from a function: `return a2b("your-base-64-string")`. Haven’t tried that exactly, but ut should work with something in that area I believe.

---

<div class="post-metadata">

### Author: ![Preben](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/preben/32/545_2.png) [@Preben](https://community.appfarm.io/u/Preben)
#### Post date: [March 2, 2024, 2:09pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/5 "2024-03-02T14:09:57Z")

</div>

Tried it now, seems like I still get a corrupt image  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/8/8b487a32ebfb6a5aed4b9e794424d3c081d02ffc.png)

---

<div class="post-metadata">

### Author: ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)
#### Post date: [March 2, 2024, 9:37pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/7 "2024-03-02T21:37:09Z")

</div>

Hi again!

I got a suggestion/reply from a colleague with a bit more coding experience:

> When processing file data in memory in this way, the browser will create a short and local URL, as seen in the screenshot. This is a reference to a memory object and will only work within that specific browser session. If using base64 encoding, the string must start with `data:image/png;base64,` .

So, looks like you should be able to use base64 string directly, by adding `data:image/png;base64,` in the beginning of that string.

---

<div class="post-metadata">

### Author: ![Preben](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/preben/32/545_2.png) [@Preben](https://community.appfarm.io/u/Preben)
#### Post date: [March 3, 2024, 8:43am UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/8 "2024-03-03T08:43:17Z")

</div>

Thanks for the replies, still not getting it to work.

using the string directly in the custom field without success also tried the the atob(): return atob(“data:image/png;base64,”+pictureStringBase64)

![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/a/a96c5bb9b86c37a6886e07a5c288b71c287ad974.png)

---

<div class="post-metadata">

### Author: ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/aaron/32/36_2.png) [@aaron](https://community.appfarm.io/u/aaron)
#### Post date: [March 3, 2024, 6:31pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/9 "2024-03-03T18:31:10Z")

</div>

Hi Preben,

Try a function for **Custom File Content** with the following code to convert the base64 string to a blob:

```auto
const decodedData = atob('iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAGwElEQVR4Ae3cwZFbNxBFUY5rkrDTmKAUk5QT03Aa44U22KC7NHptw+DRikVAXf8fzC3u8Hj4R4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgZzAW26USQT+e4HPx+Mz+RRvj0e0kT+SD2cWAQK1gOBqH6sEogKCi3IaRqAWEFztY5VAVEBwUU7DCNQCgqt9rBKICgguymkYgVpAcLWPVQJRAcFFOQ0jUAsIrvaxSiAqILgop2EEagHB1T5WCUQFBBflNIxALSC42scqgaiA4KKchhGoBQRX+1glEBUQXJTTMAK1gOBqH6sEogKCi3IaRqAWeK+Xb1z9iN558fHxcSPS9p2ezx/ROz4e4TtIHt+3j/61hW9f+2+7/+UXbifjewIDAoIbQDWSwE5AcDsZ3xMYEBDcAKqRBHYCgtvJ+J7AgIDgBlCNJLATENxOxvcEBgQEN4BqJIGdgOB2Mr4nMCAguAFUIwnsBAS3k/E9gQEBwQ2gGklgJyC4nYzvCQwICG4A1UgCOwHB7WR8T2BAQHADqEYS2AkIbifjewIDAoIbQDWSwE5AcDsZ3xMYEEjfTzHwiK91B8npd6Q8n8/oGQ/ckRJ9vvQwv3BpUfMIFAKCK3AsEUgLCC4tah6BQkBwBY4lAmkBwaVFzSNQCAiuwLFEIC0guLSoeQQKAcEVOJYIpAUElxY1j0AhILgCxxKBtIDg0qLmESgEBFfgWCKQFhBcWtQ8AoWA4AocSwTSAoJLi5pHoBAQXIFjiUBaQHBpUfMIFAKCK3AsEUgLCC4tah6BQmDgTpPsHSTFs39p6fQ7Q770UsV/Ov19X+2OFL9wxR+rJQJpAcGlRc0jUAgIrsCxRCAtILi0qHkECgHBFTiWCKQFBJcWNY9AISC4AscSgbSA4NKi5hEoBARX4FgikBYQXFrUPAKFgOAKHEsE0gKCS4uaR6AQEFyBY4lAWkBwaVHzCBQCgitwLBFICwguLWoegUJAcAWOJQJpAcGlRc0jUAgIrsCxRCAt8J4eePq89B0ar3ZnyOnve/rfn1+400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810l8JZ/m78+szP/zI47fJo7Q37vgJ7PHwN/07/3TOv/9gu3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhg4P6H9J0maYHXuiMlrXf+vOfA33Turf3C5SxNItAKCK4lsoFATkBwOUuTCLQCgmuJbCCQExBcztIkAq2A4FoiGwjkBASXszSJQCsguJbIBgI5AcHlLE0i0AoIriWygUBOQHA5S5MItAKCa4lsIJATEFzO0iQCrYDgWiIbCOQEBJezNIlAKyC4lsgGAjkBweUsTSLQCgiuJbKBQE5AcDlLkwi0Akff//Dz6U+/I6U1/sUNr3bnytl3kPzi4bXb/cK1RDYQyAkILmdpEoFWQHAtkQ0EcgKCy1maRKAVEFxLZAOBnIDgcpYmEWgFBNcS2UAgJyC4nKVJBFoBwbVENhDICQguZ2kSgVZAcC2RDQRyAoLLWZpEoBUQXEtkA4GcgOByliYRaAUE1xLZQCAnILicpUkEWgHBtUQ2EMgJCC5naRKBVkBwLZENBHIC/4M7TXIv+3PS22d24qvdQfL3C/7N5P5i/MLlLE0i0AoIriWygUBOQHA5S5MItAKCa4lsIJATEFzO0iQCrYDgWiIbCOQEBJezNIlAKyC4lsgGAjkBweUsTSLQCgiuJbKBQE5AcDlLkwi0AoJriWwgkBMQXM7SJAKtgOBaIhsI5AQEl7M0iUArILiWyAYCOQHB5SxNItAKCK4lsoFATkBwOUuTCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAvyrwDySEJ2VQgUSoAAAAAElFTkSuQmCC');
const arrayBuffer = new ArrayBuffer(decodedData.length);
const uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < decodedData.length; i++) {
  uint8Array[i] = decodedData.charCodeAt(i);
}
const blob = new Blob([arrayBuffer], { type: 'image/png' });
return blob;

```

---

<div class="post-metadata">

### Author: ![Preben](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/preben/32/545_2.png) [@Preben](https://community.appfarm.io/u/Preben)
#### Post date: [March 3, 2024, 6:43pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/10 "2024-03-03T18:43:24Z")

</div>

That works , thanks!

But is this how it should be solved or is it a bug?  
I know we had to use a similar statement when downloading PDF using base 64 last year.

---

<div class="post-metadata">

### Author: ![aaron](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/aaron/32/36_2.png) [@aaron](https://community.appfarm.io/u/aaron)
#### Post date: [March 3, 2024, 6:47pm UTC](https://community.appfarm.io/t/base64-string-to-image-object/1085/11 "2024-03-03T18:47:53Z")

</div>

I don’t believe there’s a bug here. But we’ll look into the optimal way to solve this need and let you know if we identify an improvement.

Aaron
