Image Upload Process
Understanding how event image uploads work in Kommunity
Overview
Kommunity uses Amazon S3 for storing images with presigned URLs to securely handle direct browser-to-S3 uploads. This document explains how the image upload flow works and how to implement it in your applications.
How It Works
The image upload process involves three main steps:
- Generate Presigned URL: Request a presigned S3 URL from our API
- Upload to S3: Upload the image directly to S3 using the presigned URL
- Get CDN URL: Store the resulting CDN URL for future use
API Endpoint
To get a presigned URL, make a POST request to our upload URL endpoint:
POST /api/v1/images/upload-url
Header: x-kommunity-api-key: YOUR_API_KEY
Response
{
"success": true,
"upload_url": "https://s3-bucket-url.amazonaws.com/uuid?presigned-params",
"image_url": "https://cdn.kommunity.app/uuid"
}
upload_url
: Use this URL to upload your file via PUT requestimage_url
: The CDN URL where your image will be accessible after upload
Client Implementation
Here's how to implement the upload process:
Get the presigned URL
First, request a presigned URL from the API:
const getUploadUrl = async () => {
const response = await fetch("/api/v1/images/upload-url", {
method: "POST",
headers: {
"x-kommunity-api-key": "YOUR_API_KEY",
},
});
return await response.json();
};
Upload the image to S3
Next, use the presigned URL to upload the image directly to S3:
const uploadImage = async (file) => {
// Get the presigned URL
const { upload_url, image_url } = await getUploadUrl();
// Upload directly to S3
const uploadResponse = await fetch(upload_url, {
method: "PUT",
body: file,
headers: {
"Content-Type": file.type,
},
});
if (!uploadResponse.ok) {
throw new Error("Upload failed");
}
// Return the CDN URL
return image_url;
};
Use the uploaded image
Finally, use the returned CDN URL in your application:
const handleImageUpload = async (event) => {
const file = event.target.files[0];
if (!file) return;
try {
const imageUrl = await uploadImage(file);
// Save the URL to your state or form data
setFormData((prev) => ({
...prev,
eventImage: imageUrl
}));
// Example: Update UI to show the uploaded image
setImagePreview(imageUrl);
} catch (error) {
console.error("Image upload failed:", error);
// Handle the error appropriately
}
};
This URL is now permanently accessible and can be stored in your database with event details.