Implement File Upload with Functions

Learn how to create secure file upload functionality using Azion Functions and Object Storage to handle file uploads at the edge with optimal performance.

View as Markdown

This guide demonstrates how to implement secure file upload functionality using Azion Functions and Object Storage. By handling file uploads at the edge, you can provide faster upload speeds and better user experience while maintaining security and scalability.

This demonstration shows how to leverage Functions for file upload operations while ensuring security best practices and optimal performance at the edge.

Requirements

Before you begin, ensure you have:

Code

This is a code example of how to use Functions with Object Storage to implement a file upload functionality. The complete code example you can find in this GitHub repository.

import type { AzionBucketObject, AzionStorageResponse } from "azion/storage";
import { createObject } from "azion/storage";
import { Hono } from "hono";
import { fire } from "hono/service-worker";
const app = new Hono();
app.post("/upload", async (c) => {
const body = await c.req.parseBody();
const file = body["file"]; // File | string
// First check if file is a valid File object
if (
!file ||
typeof file !== "object" ||
typeof file.arrayBuffer !== "function"
) {
return c.json({ message: "Invalid file" }, 400);
}
// Check if file size exceeds 2MB limit
const maxSize = 2 * 1024 * 1024; // 2MB
if (file.size > maxSize) {
return c.json({ message: "File size exceeds 2MB limit" }, 413);
}
try {
const { data: newObject, error }: AzionStorageResponse<AzionBucketObject> =
await createObject({
bucket: process.env.BUCKET_NAME!,
key: file.name,
// @ts-expect-error content is wrongly typed
content: await file.arrayBuffer(),
});
if (error) {
throw new Error(error.message);
}
if (newObject) {
console.log(`Object created with key: ${newObject.key}`);
} else {
console.error("Failed to create object", error);
}
// @ts-expect-error content is wrongly typed
const content = new Uint8Array(newObject.content);
return c.body(content, {
status: 200,
headers: {
"Content-Type": file.type,
"Content-Disposition": `attachment; filename="${newObject?.key}"`,
"Content-Length": newObject?.size?.toString() ?? "0",
},
});
} catch (error) {
console.error("Error uploading file:", error);
return c.json({ message: "Error uploading file" }, 500);
}
});
fire(app);

Deploying to Azion

Step 1: Authenticate with Azion

  1. Log in to your Azion account via CLI:
azion login
  1. Follow the authentication prompts to connect your CLI with your Azion account.

Step 2: Deploy the Function

Deploy your file upload application to Azion’s edge network:

azion deploy

The deployment process will:

  • Upload your Function code
  • Configure the applications
  • Set up the necessary routing rules
  • Configure storage permissions
  • Provide you with a unique domain

Step 3: Configure storage permissions

  1. Access Azion Console > Object Storage
  2. Select your storage bucket
  3. Configure appropriate permissions for your Function to read/write files

Step 4: Access your application

After deployment, you’ll receive a domain like https://xxxxxxx.map.azionedge.net. Your file upload application will be available at this URL within a few minutes after DNS propagation.

Understanding the implementation

File upload process

The file upload Function typically handles:

  1. Request validation: Checking file types, sizes, and security
  2. Multipart form parsing: Processing multipart/form-data requests
  3. File processing: Validating and preparing files for storage
  4. Storage upload: Saving files to Object Storage
  5. Response generation: Returning upload status and file information

Security considerations

  • File type validation: Only allow specific file types
  • Size limits: Enforce maximum file size restrictions
  • Virus scanning: Implement malware detection when possible
  • Access control: Validate user permissions before uploads
  • Input sanitization: Clean file names and metadata

Key benefits

  • Performance: Upload processing at the edge reduces latency
  • Scalability: Automatically scales with demand
  • Global reach: Edge locations provide worldwide coverage
  • Cost efficiency: Optimized data transfer and storage costs

Testing your file upload application

Step 1: Test file upload functionality

  1. Navigate to your deployed application
  2. Use the upload form to test various file types
  3. Verify files are successfully stored in your Object Storage bucket
  4. Test file size limits and type restrictions

Step 2: Test security features

  1. File type validation: Try uploading restricted file types
  2. Size limits: Test with files exceeding your size limit
  3. Malicious files: Test with files containing suspicious content
  4. Path traversal: Verify file name sanitization

Step 3: Performance testing

  1. Upload speed: Test with various file sizes
  2. Concurrent uploads: Test multiple simultaneous uploads
  3. Error handling: Test network interruptions and failures

Common use cases

  • Document management: Upload and store business documents
  • Image galleries: Handle photo and image uploads
  • Media content: Process video and audio file uploads
  • Form attachments: Handle file attachments in web forms
  • Data import: Process CSV and data file uploads

Troubleshooting

Common issues and solutions

  • Upload failures: Check file size limits and allowed types
  • Storage errors: Verify bucket permissions and configuration
  • Performance issues: Optimize file processing and storage operations
  • Security concerns: Review file validation and sanitization logic

Error handling best practices

  1. Clear error messages: Provide specific feedback to users
  2. Logging: Implement comprehensive error logging
  3. Retry mechanisms: Handle temporary failures efficiently
  4. Progress indicators: Show upload progress for large files

Advanced features

Implementing file processing

You can extend the basic upload functionality with:

  • Image resizing: Automatically resize uploaded images
  • Format conversion: Convert files to different formats
  • Metadata extraction: Extract and store file metadata
  • Thumbnail generation: Create preview images

Adding authentication

Implement user authentication to secure file uploads:

// Example authentication check
function authenticateUser(request) {
const authHeader = request.headers.get('Authorization');
// Implement your authentication logic
return validateToken(authHeader);
}

Next steps

  • Explore advanced file processing techniques
  • Implement file deletion and management features
  • Add user authentication and authorization
  • Integrate with other Azion products like Cache
  • Monitor upload performance and optimize accordingly
Learn more about Object Storage Learn more about Functions