Back to Others
Media Architecture

Image Parameter
Handling in APIs.

Author

Amruthavalli, Deeksha

Published

December 15, 2023

Core Implementation Points

01

HTTP Request Method

Usually POST is used for sending images as it allows large data in the request body.

02

Request Headers

Setting 'Content-Type' (e.g., image/jpeg) and Authorization headers correctly.

03

Request Body

Encoding options such as base64 or binary formats like multipart/form-data.

04

Parameter Naming

Standardized naming conventions like 'image', 'file', or 'photo' as per API requirements.

05

File Upload

Using multipart/form-data encoding to send files as true binary data.

06

Authentication

Ensuring secure transmission via authorization tokens or unique credentials.

07

Endpoint URL

Targeting specific image-processing or media endpoints defined in the documentation.

08

Response Handling

Interpreting feedback on processing status, success URLs, or valid error details.

FCM Image Integration (C# Backend)

The method below demonstrates how to construct a server-side request to Firebase Cloud Messaging (FCM) using native HttpWebRequest, passing local or remote image parameters.

public string SendFCMNotification(string DeviceId, string Text, string SenderName, string path, string Img)
{
    try {
        var applicationID = "AAAAL5...your_key"; // FCM Server Key
        var senderId = "204363990788"; // Sender ID
        
        var request = (HttpWebRequest)WebRequest.Create("https://fcm.googleapis.com/fcm/send");
        request.Method = "POST";
        request.ContentType = "application/json";
        request.Headers.Add(string.Format("Authorization: key={0}", applicationID));
        request.Headers.Add(string.Format("Sender: id={0}", senderId));

        var message = new {
            to = DeviceId,
            notification = new {
                body = Text,
                title = SenderName,
                image = Img // Dynamic image parameter
            },
            data = new {
                sound = "null",
                channel_id = "null",
                clickAction = path
            }
        };

        var serializer = new JavaScriptSerializer();
        var json = serializer.Serialize(message);
        var byteArray = Encoding.UTF8.GetBytes(json);
        request.ContentLength = byteArray.Length;

        using (Stream dataStream = request.GetRequestStream()) {
            dataStream.Write(byteArray, 0, byteArray.Length);
        }

        using (var response = (HttpWebResponse)request.GetResponse()) {
            using (var reader = new StreamReader(response.GetResponseStream())) {
                return reader.ReadToEnd();
            }
        }
    } catch (Exception ex) {
        return ""; // Error handling logic
    }
}

Image Submission Logic (Angular)

Payload Structure

Images must be appended to FormData for efficient binary transmission across the network.

Response Handlers

Check for 'EXISTS' or 'SUCCESS' responses to trigger secondary notification chains.

submit(value: any) {
    var obj = [{
        BlogTitle: value.BlogTitle,
        BlogImage: this.Photo,
        Discription: value.Discription
    }];
    
    this.Blogservice.AddBlog(obj).subscribe((data: any) => {
        if (data === 'SUCCESS') {
            var UploadFile = new FormData();
            UploadFile.append("message", value.Discription);
            UploadFile.append("senderName", value.BlogTitle);
            UploadFile.append("Img", this.HomeURL + this.Photo);
            UploadFile.append("Path", "blogdetails");

            this.general.PostData("api/Farmer/sendNotification", UploadFile).subscribe();
            this.general.presentAlert("SUCCESS", "Your blog has been added successfully!.");
        }
    });
}