Mastering Cloudflare R2 Storage: Zero Egress Object Storage Solution#

1
name = "r2-storage-app"
2
main = "src/index.ts"
3
compatibility_date = "2025-01-10"
4

5
[[r2_buckets]]
6
binding = "STORAGE"
7
bucket_name = "my-storage-bucket"
8
preview_bucket_name = "preview-storage-bucket"
9

10
# Optional: Custom domain for public access
11
[[routes]]
12
pattern = "cdn.yourdomain.com/*"
13
zone_name = "yourdomain.com"
14

15
# Environment variables
16
[vars]
17
ALLOWED_ORIGINS = "https://yourdomain.com"
18
MAX_FILE_SIZE = "104857600" # 100MB in bytes

1
import { Router } from 'itty-router';
2

3
export interface Env {
4
  STORAGE: R2Bucket;
5
  ALLOWED_ORIGINS: string;
6
  MAX_FILE_SIZE: string;
7
}
8

9
const router = Router();
10

11
// CORS middleware
12
const corsHeaders = (origin: string, env: Env) => ({
13
  'Access-Control-Allow-Origin': env.ALLOWED_ORIGINS.includes(origin) ? origin : '',
14
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
15
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
16
  'Access-Control-Max-Age': '86400',
17
});
18

19
// File upload endpoint
20
router.post('/upload', async (request: Request, env: Env) => {
21
  try {
22
    const contentType = request.headers.get('content-type') || '';
23

24
    // Handle multipart form data
25
    if (contentType.includes('multipart/form-data')) {
26
      const formData = await request.formData();
27
      const file = formData.get('file') as File;
28

29
      if (!file) {
30
        return new Response('No file provided', { status: 400 });
31
      }
32

33
      // Validate file size
34
      if (file.size > parseInt(env.MAX_FILE_SIZE)) {
35
        return new Response('File too large', { status: 413 });
36
      }
37

38
      // Generate unique filename
39
      const timestamp = Date.now();
40
      const filename = `${timestamp}-${file.name}`;
41
      const key = `uploads/${filename}`;
42

43
      // Upload to R2
44
      const object = await env.STORAGE.put(key, file.stream(), {
45
        httpMetadata: {
46
          contentType: file.type,
47
        },
48
        customMetadata: {
49
          uploadedBy: request.headers.get('x-user-id') || 'anonymous',
50
          originalName: file.name,
51
          uploadedAt: new Date().toISOString(),
52
        },
53
      });
54

55
      return new Response(
56
        JSON.stringify({
57
          success: true,
58
          key: object.key,
59
          size: object.size,
60
          etag: object.etag,
61
          url: `/files/${key}`,
62
        }),
63
        {
64
          status: 201,
65
          headers: { 'Content-Type': 'application/json' },
66
        }
67
      );
68
    }
69

70
    // Handle direct binary upload
71
    const buffer = await request.arrayBuffer();
72
    const key = `uploads/${Date.now()}-file`;
73

74
    await env.STORAGE.put(key, buffer, {
75
      httpMetadata: {
76
        contentType: contentType,
77
      },
78
    });
79

80
    return new Response(JSON.stringify({ success: true, key }), {
81
      status: 201,
82
      headers: { 'Content-Type': 'application/json' },
83
    });
84
  } catch (error) {
85
    console.error('Upload error:', error);
86
    return new Response('Upload failed', { status: 500 });
87
  }
88
});
89

90
// File retrieval endpoint
91
router.get('/files/*', async (request: Request, env: Env) => {
92
  try {
93
    const url = new URL(request.url);
94
    const key = url.pathname.replace('/files/', '');
95

96
    // Check if object exists
97
    const object = await env.STORAGE.get(key);
98

99
    if (!object) {
100
      return new Response('File not found', { status: 404 });
101
    }
102

103
    // Handle range requests for video streaming
104
    const range = request.headers.get('range');
105
    if (range) {
106
      const bytes = range.replace(/bytes=/, '').split('-');
107
      const start = parseInt(bytes[0], 10);
108
      const end = bytes[1] ? parseInt(bytes[1], 10) : object.size - 1;
109

110
      const chunk = await env.STORAGE.get(key, {
111
        range: { offset: start, length: end - start + 1 },
112
      });
113

114
      return new Response(chunk.body, {
115
        status: 206,
116
        headers: {
117
          'Content-Range': `bytes ${start}-${end}/${object.size}`,
118
          'Accept-Ranges': 'bytes',
119
          'Content-Length': String(end - start + 1),
120
          'Content-Type': object.httpMetadata?.contentType || 'application/octet-stream',
121
        },
122
      });
123
    }
124

125
    // Return full object
126
    return new Response(object.body, {
127
      headers: {
128
        'Content-Type': object.httpMetadata?.contentType || 'application/octet-stream',
129
        'Content-Length': String(object.size),
130
        'ETag': object.etag,
131
        'Cache-Control': 'public, max-age=3600',
132
      },
133
    });
134
  } catch (error) {
135
    console.error('Retrieval error:', error);
136
    return new Response('Error retrieving file', { status: 500 });
137
  }
138
});
139

140
// List files endpoint
141
router.get('/list', async (request: Request, env: Env) => {
142
  try {
143
    const url = new URL(request.url);
144
    const prefix = url.searchParams.get('prefix') || '';
145
    const limit = parseInt(url.searchParams.get('limit') || '100');
146
    const cursor = url.searchParams.get('cursor') || undefined;
147

148
    const listed = await env.STORAGE.list({
149
      prefix,
150
      limit,
151
      cursor,
152
      include: ['httpMetadata', 'customMetadata'],
153
    });
154

155
    const files = listed.objects.map(obj => ({
156
      key: obj.key,
157
      size: obj.size,
158
      uploaded: obj.uploaded.toISOString(),
159
      etag: obj.etag,
160
      metadata: obj.customMetadata,
161
    }));
162

163
    return new Response(
164
      JSON.stringify({
165
        files,
166
        truncated: listed.truncated,
167
        cursor: listed.cursor,
168
        delimitedPrefixes: listed.delimitedPrefixes,
169
      }),
170
      {
171
        headers: { 'Content-Type': 'application/json' },
172
      }
173
    );
174
  } catch (error) {
175
    console.error('List error:', error);
176
    return new Response('Error listing files', { status: 500 });
177
  }
178
});
179

180
// Delete file endpoint
181
router.delete('/files/*', async (request: Request, env: Env) => {
182
  try {
183
    const url = new URL(request.url);
184
    const key = url.pathname.replace('/files/', '');
185

186
    await env.STORAGE.delete(key);
187

188
    return new Response(JSON.stringify({ success: true }), {
189
      headers: { 'Content-Type': 'application/json' },
190
    });
191
  } catch (error) {
192
    console.error('Delete error:', error);
193
    return new Response('Error deleting file', { status: 500 });
194
  }
195
});
196

197
export default {
198
  async fetch(request: Request, env: Env): Promise<Response> {
199
    return router.handle(request, env);
200
  },
201
};

1
// Generate presigned URL for direct browser upload
2
router.post('/presigned-url', async (request: Request, env: Env) => {
3
  try {
4
    const { filename, contentType } = await request.json();
5

6
    // Generate unique key
7
    const key = `uploads/${Date.now()}-${filename}`;
8

9
    // Create presigned URL (valid for 1 hour)
10
    const url = await env.STORAGE.createMultipartUpload(key, {
11
      httpMetadata: { contentType },
12
    });
13

14
    return new Response(
15
      JSON.stringify({
16
        uploadUrl: url,
17
        key,
18
        expires: new Date(Date.now() + 3600000).toISOString(),
19
      }),
20
      {
21
        headers: { 'Content-Type': 'application/json' },
22
      }
23
    );
24
  } catch (error) {
25
    console.error('Presigned URL error:', error);
26
    return new Response('Error generating upload URL', { status: 500 });
27
  }
28
});

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>R2 Direct Upload</title>
5
</head>
6
<body>
7
  <div id="upload-container">
8
    <input type="file" id="file-input" multiple />
9
    <button id="upload-btn">Upload Files</button>
10
    <div id="progress"></div>
11
    <div id="results"></div>
12
  </div>
13

14
  <script>
15
    class R2Uploader {
16
      constructor(apiEndpoint) {
17
        this.apiEndpoint = apiEndpoint;
18
        this.chunkSize = 5 * 1024 * 1024; // 5MB chunks
19
      }
20

21
      async uploadFile(file) {
22
        const progressBar = this.createProgressBar(file.name);
23

24
        try {
25
          // For large files, use multipart upload
26
          if (file.size > this.chunkSize) {
27
            return await this.multipartUpload(file, progressBar);
28
          }
29

30
          // For small files, use simple upload
31
          return await this.simpleUpload(file, progressBar);
32
        } catch (error) {
33
          console.error('Upload error:', error);
34
          progressBar.setError(error.message);
35
          throw error;
36
        }
37
      }
38

39
      async simpleUpload(file, progressBar) {
40
        const formData = new FormData();
41
        formData.append('file', file);
42

43
        const xhr = new XMLHttpRequest();
44

45
        return new Promise((resolve, reject) => {
46
          xhr.upload.addEventListener('progress', (e) => {
47
            if (e.lengthComputable) {
48
              const percentComplete = (e.loaded / e.total) * 100;
49
              progressBar.update(percentComplete);
50
            }
51
          });
52

53
          xhr.addEventListener('load', () => {
54
            if (xhr.status === 201) {
55
              const response = JSON.parse(xhr.responseText);
56
              progressBar.setComplete(response.url);
57
              resolve(response);
58
            } else {
59
              reject(new Error(`Upload failed: ${xhr.statusText}`));
60
            }
61
          });
62

63
          xhr.addEventListener('error', () => {
64
            reject(new Error('Network error'));
65
          });
66

67
          xhr.open('POST', `${this.apiEndpoint}/upload`);
68
          xhr.send(formData);
69
        });
70
      }
71

72
      async multipartUpload(file, progressBar) {
73
        // Initiate multipart upload
74
        const initResponse = await fetch(`${this.apiEndpoint}/multipart/init`, {
75
          method: 'POST',
76
          headers: { 'Content-Type': 'application/json' },
77
          body: JSON.stringify({
78
            filename: file.name,
79
            contentType: file.type,
80
            size: file.size,
81
          }),
82
        });
83

84
        const { uploadId, key } = await initResponse.json();
85

86
        // Upload chunks
87
        const chunks = Math.ceil(file.size / this.chunkSize);
88
        const parts = [];
89

90
        for (let i = 0; i < chunks; i++) {
91
          const start = i * this.chunkSize;
92
          const end = Math.min(start + this.chunkSize, file.size);
93
          const chunk = file.slice(start, end);
94

95
          const partResponse = await this.uploadPart(
96
            key,
97
            uploadId,
98
            i + 1,
99
            chunk
100
          );
101

102
          parts.push({
103
            partNumber: i + 1,
104
            etag: partResponse.etag,
105
          });
106

107
          progressBar.update(((i + 1) / chunks) * 100);
108
        }
109

110
        // Complete multipart upload
111
        const completeResponse = await fetch(`${this.apiEndpoint}/multipart/complete`, {
112
          method: 'POST',
113
          headers: { 'Content-Type': 'application/json' },
114
          body: JSON.stringify({
115
            key,
116
            uploadId,
117
            parts,
118
          }),
119
        });
120

121
        const result = await completeResponse.json();
122
        progressBar.setComplete(result.url);
123
        return result;
124
      }
125

126
      async uploadPart(key, uploadId, partNumber, chunk) {
127
        const response = await fetch(`${this.apiEndpoint}/multipart/part`, {
128
          method: 'PUT',
129
          headers: {
130
            'Content-Type': 'application/octet-stream',
131
            'X-Upload-Id': uploadId,
132
            'X-Part-Number': String(partNumber),
133
            'X-Key': key,
134
          },
135
          body: chunk,
136
        });
137

138
        return response.json();
139
      }
140

141
      createProgressBar(filename) {
142
        const container = document.getElementById('progress');
143
        const progressDiv = document.createElement('div');
144
        progressDiv.className = 'progress-item';
145
        progressDiv.innerHTML = `
146
          <div class="filename">${filename}</div>
147
          <div class="progress-bar">
148
            <div class="progress-fill" style="width: 0%"></div>
149
          </div>
150
          <div class="progress-text">0%</div>
151
        `;
152
        container.appendChild(progressDiv);
153

154
        return {
155
          update(percent) {
156
            progressDiv.querySelector('.progress-fill').style.width = `${percent}%`;
157
            progressDiv.querySelector('.progress-text').textContent = `${Math.round(percent)}%`;
158
          },
159
          setComplete(url) {
160
            progressDiv.querySelector('.progress-text').textContent = 'Complete';
161
            progressDiv.querySelector('.progress-text').innerHTML +=
162
              `<a href="${url}" target="_blank">View</a>`;
163
          },
164
          setError(message) {
165
            progressDiv.querySelector('.progress-text').textContent = `Error: ${message}`;
166
            progressDiv.style.color = 'red';
167
          },
168
        };
169
      }
170
    }
171

172
    // Initialize uploader
173
    const uploader = new R2Uploader('/api');
174

175
    document.getElementById('upload-btn').addEventListener('click', async () => {
176
      const files = document.getElementById('file-input').files;
177

178
      for (const file of files) {
179
        try {
180
          await uploader.uploadFile(file);
181
        } catch (error) {
182
          console.error(`Failed to upload ${file.name}:`, error);
183
        }
184
      }
185
    });
186
  </script>
187

188
  <style>
189
    #upload-container {
190
      max-width: 600px;
191
      margin: 50px auto;
192
      padding: 20px;
193
      border: 1px solid #ddd;
194
      border-radius: 8px;
195
    }
196

197
    .progress-item {
198
      margin: 10px 0;
199
      padding: 10px;
200
      background: #f5f5f5;
201
      border-radius: 4px;
202
    }
203

204
    .progress-bar {
205
      height: 20px;
206
      background: #e0e0e0;
207
      border-radius: 10px;
208
      overflow: hidden;
209
      margin: 5px 0;
210
    }
211

212
    .progress-fill {
213
      height: 100%;
214
      background: #4CAF50;
215
      transition: width 0.3s;
216
    }
217

218
    .filename {
219
      font-weight: bold;
220
      margin-bottom: 5px;
221
    }
222

223
    .progress-text {
224
      font-size: 14px;
225
      color: #666;
226
    }
227
  </style>
228
</body>
229
</html>

1
// Server-side multipart upload handler
2
interface MultipartUpload {
3
  uploadId: string;
4
  key: string;
5
  parts: Array<{ partNumber: number; etag: string }>;
6
}
7

8
const activeUploads = new Map<string, MultipartUpload>();
9

10
router.post('/multipart/init', async (request: Request, env: Env) => {
11
  const { filename, contentType, size } = await request.json();
12

13
  const key = `uploads/${Date.now()}-${filename}`;
14
  const uploadId = crypto.randomUUID();
15

16
  // Store upload info (in production, use D1 or Durable Objects)
17
  activeUploads.set(uploadId, {
18
    uploadId,
19
    key,
20
    parts: [],
21
  });
22

23
  return new Response(
24
    JSON.stringify({ uploadId, key }),
25
    { headers: { 'Content-Type': 'application/json' } }
26
  );
27
});
28

29
router.put('/multipart/part', async (request: Request, env: Env) => {
30
  const uploadId = request.headers.get('X-Upload-Id');
31
  const partNumber = parseInt(request.headers.get('X-Part-Number') || '0');
32
  const key = request.headers.get('X-Key');
33

34
  if (!uploadId || !partNumber || !key) {
35
    return new Response('Missing required headers', { status: 400 });
36
  }
37

38
  const upload = activeUploads.get(uploadId);
39
  if (!upload) {
40
    return new Response('Upload not found', { status: 404 });
41
  }
42

43
  // Upload part to R2
44
  const partKey = `${key}.part${partNumber}`;
45
  const buffer = await request.arrayBuffer();
46

47
  const object = await env.STORAGE.put(partKey, buffer);
48

49
  // Track part
50
  upload.parts.push({ partNumber, etag: object.etag });
51

52
  return new Response(
53
    JSON.stringify({ partNumber, etag: object.etag }),
54
    { headers: { 'Content-Type': 'application/json' } }
55
  );
56
});
57

58
router.post('/multipart/complete', async (request: Request, env: Env) => {
59
  const { uploadId, key, parts } = await request.json();
60

61
  const upload = activeUploads.get(uploadId);
62
  if (!upload) {
63
    return new Response('Upload not found', { status: 404 });
64
  }
65

66
  // Combine parts
67
  const partKeys = parts
68
    .sort((a, b) => a.partNumber - b.partNumber)
69
    .map(p => `${key}.part${p.partNumber}`);
70

71
  const chunks = await Promise.all(
72
    partKeys.map(k => env.STORAGE.get(k))
73
  );
74

75
  // Concatenate chunks
76
  const blobs = await Promise.all(
77
    chunks.map(c => c?.blob())
78
  );
79

80
  const combinedBlob = new Blob(blobs.filter(b => b !== undefined));
81

82
  // Upload combined file
83
  await env.STORAGE.put(key, combinedBlob.stream());
84

85
  // Clean up parts
86
  await Promise.all(
87
    partKeys.map(k => env.STORAGE.delete(k))
88
  );
89

90
  activeUploads.delete(uploadId);
91

92
  return new Response(
93
    JSON.stringify({ success: true, key, url: `/files/${key}` }),
94
    { headers: { 'Content-Type': 'application/json' } }
95
  );
96
});

1
import { Resizer } from '@cf/image-resizer';
2

3
router.get('/images/*', async (request: Request, env: Env) => {
4
  const url = new URL(request.url);
5
  const key = url.pathname.replace('/images/', '');
6
  const width = parseInt(url.searchParams.get('w') || '0');
7
  const height = parseInt(url.searchParams.get('h') || '0');
8
  const quality = parseInt(url.searchParams.get('q') || '85');
9

10
  // Check if thumbnail exists
11
  const thumbnailKey = `thumbnails/${width}x${height}/${key}`;
12
  let object = await env.STORAGE.get(thumbnailKey);
13

14
  if (!object && (width || height)) {
15
    // Generate thumbnail
16
    const original = await env.STORAGE.get(key);
17
    if (!original) {
18
      return new Response('Image not found', { status: 404 });
19
    }
20

21
    // Use Cloudflare Image Resizing
22
    const resized = await fetch(`https://example.com/cdn-cgi/image/width=${width},height=${height},quality=${quality}/${key}`, {
23
      cf: {
24
        image: {
25
          width,
26
          height,
27
          quality,
28
          format: 'auto',
29
        },
30
      },
31
    });
32

33
    const resizedBuffer = await resized.arrayBuffer();
34

35
    // Cache thumbnail
36
    await env.STORAGE.put(thumbnailKey, resizedBuffer, {
37
      httpMetadata: {
38
        contentType: 'image/webp',
39
        cacheControl: 'public, max-age=31536000',
40
      },
41
    });
42

43
    object = await env.STORAGE.get(thumbnailKey);
44
  }
45

46
  if (!object) {
47
    object = await env.STORAGE.get(key);
48
    if (!object) {
49
      return new Response('Image not found', { status: 404 });
50
    }
51
  }
52

53
  return new Response(object.body, {
54
    headers: {
55
      'Content-Type': object.httpMetadata?.contentType || 'image/jpeg',
56
      'Cache-Control': 'public, max-age=3600',
57
      'ETag': object.etag,
58
    },
59
  });
60
});

1
router.get('/stream/*', async (request: Request, env: Env) => {
2
  const url = new URL(request.url);
3
  const key = url.pathname.replace('/stream/', '');
4

5
  // Get video metadata
6
  const object = await env.STORAGE.head(key);
7
  if (!object) {
8
    return new Response('Video not found', { status: 404 });
9
  }
10

11
  const range = request.headers.get('range');
12
  if (!range) {
13
    // Return video metadata for player
14
    return new Response(
15
      JSON.stringify({
16
        duration: object.customMetadata?.duration,
17
        size: object.size,
18
        type: object.httpMetadata?.contentType,
19
      }),
20
      { headers: { 'Content-Type': 'application/json' } }
21
    );
22
  }
23

24
  // Parse range header
25
  const matches = range.match(/bytes=(\d+)-(\d*)/);
26
  if (!matches) {
27
    return new Response('Invalid range', { status: 416 });
28
  }
29

30
  const start = parseInt(matches[1], 10);
31
  const end = matches[2] ? parseInt(matches[2], 10) : Math.min(start + 1024 * 1024, object.size - 1);
32

33
  // Stream video chunk
34
  const chunk = await env.STORAGE.get(key, {
35
    range: { offset: start, length: end - start + 1 },
36
  });
37

38
  if (!chunk) {
39
    return new Response('Failed to retrieve chunk', { status: 500 });
40
  }
41

42
  return new Response(chunk.body, {
43
    status: 206,
44
    headers: {
45
      'Content-Range': `bytes ${start}-${end}/${object.size}`,
46
      'Accept-Ranges': 'bytes',
47
      'Content-Length': String(end - start + 1),
48
      'Content-Type': object.httpMetadata?.contentType || 'video/mp4',
49
      'Cache-Control': 'public, max-age=3600',
50
    },
51
  });
52
});
53

54
// Generate HLS playlist for adaptive streaming
55
router.get('/hls/:key/playlist.m3u8', async (request: Request, env: Env) => {
56
  const { key } = request.params;
57

58
  // Get available quality levels
59
  const qualities = await env.STORAGE.list({
60
    prefix: `transcoded/${key}/`,
61
  });
62

63
  const playlist = `#EXTM3U
64
#EXT-X-VERSION:3
65
${qualities.objects.map(obj => {
66
  const quality = obj.key.split('/').pop()?.replace('.m3u8', '');
67
  const bandwidth = quality === '1080p' ? 5000000 :
68
                   quality === '720p' ? 2500000 :
69
                   quality === '480p' ? 1000000 : 500000;
70

71
  return `#EXT-X-STREAM-INF:BANDWIDTH=${bandwidth},RESOLUTION=${quality}
72
/hls/${key}/${quality}.m3u8`;
73
}).join('\n')}`;
74

75
  return new Response(playlist, {
76
    headers: {
77
      'Content-Type': 'application/vnd.apple.mpegurl',
78
      'Cache-Control': 'public, max-age=3600',
79
    },
80
  });
81
});