Back

How do I encode an image from storage to base64?

  • 0
  • Flutter
  • Storage
  • Cloud
havoc
16 Mar, 2024, 17:36

I'm trying to forward an image in storage via email as an attachment, but either the email is not sent (Response returns The attachment content must be base64) if I put data:$mimeType;base64, before the $image or it's sent, but the attachment is unviewable, either in preview mode, or after downloading it (it has the wrong size too).

Here's my code (I'm using purely REST API at this point)

TypeScript
Future _testEmail()async {
  String path = "storage/buckets/$bucketId/files/$docId/preview";
  var response = await _httpService.get(path);
    if (response?.statusCode == 200 && response?.data != null) {
      
      // grab data as Uint8List
      image = const Utf8Encoder().convert(response?.data);
      // encode to base64 for attaching
      final img = base64Encode(image);
      //get Mime Type
      final type = response?.headers.value("Content-Type");

      _sendEmail($firstName, $lastName, $recipient, img, type!);
    } else {
      debugPrint("Ooooooooppppppsssss!!!");
    }
}
TL;DR
Developers are having trouble encoding an image from storage to base64 for email attachments. The solution involves ensuring there's a space after the comma in the attachment content, and correctly encoding the image to base64 before attaching it to the email.
havoc
16 Mar, 2024, 17:36
TypeScript
void _sendEmail(String firstName, String lastName, String recipient,
      String image, String mimeType) async {
    const path = "send";
    final ext = mimeType.split("/")[1];
    String fileName = (ext == 'png') ? "$name.png" : "$name.jpg";

    final data = {
      "personalizations": [
        {
          "to": [
            {
              "name": "Email Recipient",
              "email": recipient
            }
          ]
        }
      ],
      "from": {"email": "sender@gmail.com"},
      "subject": "Test Email with Attachment",
      "content": [
        {
          "type": "text/html",
          "value":
              "Sample email with attachment from $fname $lname."
        }
      ],
      "attachments": [
        {
          "content": "data:$mimeType;base64,$image", // generates the attachment must be base64
          // "content": image,                       // email is sent, but wrong size & unusable
          "filename": fileName,
          "type": mimeType
        }
      ]
    };

    
    final response = await _httpEmail.post(path, data);  // sending email via REST API

    if (response?.statusCode == 202 && response?.data != null) {
      print("Email sent!");
    } else {
      print("Status Code: ${response?.statusCode.toString()}");
      print("Response Data: ${response?.data.toString()}");
    }
  }

Any insight is highly appreciated.

Steven
16 Mar, 2024, 17:46

This might be highly dependent on whatever you're using to send the email

Steven
16 Mar, 2024, 17:47

Maybe in the data, you need a space after the comma?

havoc
16 Mar, 2024, 17:51

For emails with attachments, I'm using Sendgrid

havoc
16 Mar, 2024, 17:51

Will try... 😄

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more