For Workers & Pages, what is the name of the domain?
not workers & page related
What is the error message?
Failed to fetch
What is the issue or error you’re encountering
I’m building an app in React and using R2 to store my user’s image. I tested this a week ago and today when I came back to work on it, it suddenly gives me Failed to fetch errors. I haven’t done anything to the R2 bucket, not sure why this is the case. Couldn’t find anything like this online.
What are the steps to reproduce the issue?
import { S3Client, PutObjectCommand } from “@aws-sdk/client-s3”;
import * as FileSystem from ‘expo-file-system’;
import { Buffer } from ‘buffer’;
import { Platform } from ‘react-native’;
// Simple UUID generator
const generateSimpleUUID = () => {
const timestamp = new Date().getTime().toString(16);
const randomPart = Math.floor(Math.random() * 1000000000).toString(16);
return ${timestamp}-${randomPart}-${Math.random().toString(16).substring(2, 8)};
};
// Cloudflare R2 configuration
const s3Client = new S3Client({
endpoint:“REPLACE_WITH_ENDPOINT”
region: “auto”,
credentials: {
accessKeyId: “REPLACE_WITH_ACCESS_KEY_ID”,
secretAccessKey: “REPLACE_WITH_SECRET_ACCESS_KEY”,
},
forcePathStyle: true,
});
// Generate a unique filename
const generateUniqueFilename = (originalName) => {
const uniqueId = generateSimpleUUID();
return ${uniqueId};
};
// Convert file URI to binary data for upload
const readFileAsBuffer = async (fileUri) => {
try {
if (Platform.OS === ‘web’) {
const base64Data = fileUri.split(‘,’)[1];
return Buffer.from(base64Data, ‘base64’);
} else {
const base64Data = await FileSystem.readAsStringAsync(fileUri, { encoding: FileSystem.EncodingType.Base64 });
return Buffer.from(base64Data, ‘base64’);
}
} catch (error) {
console.error(‘Error reading file:’, error);
throw error;
}
};
// Upload file to Cloudflare R2
export const uploadImageToR2 = async (imageUri) => {
try {
console.log(‘[DEBUG] Starting R2 upload for:’, imageUri);
const filename = generateUniqueFilename(imageUri.split(‘/’).pop());
console.log(‘[DEBUG] Generated filename:’, filename);
const imageData = await readFileAsBuffer(imageUri);
console.log(‘[DEBUG] Converted image to buffer, size:’, imageData ? imageData.length : ‘null’);
if (!imageData) {
throw new Error(‘Failed to convert image to buffer’);
}
const command = new PutObjectCommand({
Bucket: “REPLACE_WITH_BUCKET_NAME”,
Key: filename,
Body: imageData,
ContentType: ‘image/jpeg’,
ACL: “public-read”,
});
console.log(‘[DEBUG] Sending upload command to R2’);
const result = await s3Client.send(command);
console.log(‘[DEBUG] Upload successful:’, result);
const imageUrl = https://str.plor.ing/${filename};
console.log(‘[DEBUG] Image URL:’, imageUrl);
return imageUrl;
} catch (error) {
console.error(‘[DEBUG] Error uploading to R2:’, error);
return null;
}
};
export default { uploadImageToR2 };
Screenshot of the error
