CF Images - direct upload request isn't working and giving a 400 error

Could someone help me understand why my upload via direct upload isn’t working? I tried it using the simple html shown in here and it works but can’t figure out why its not working using fetch

	const handleUpload = async () => {
			try {
				uploading = true;
				if (!files || files.length === 0) {
					alert('You must select an image to upload.');
				const file = files[0];
				const preSignedUrl = await getPreSignedUrl();
				if (preSignedUrl.uploadURL) {
					const formData = new FormData();
					formData.append('file', file);
					formData.append('metadata', '');
					const options = {
						method: 'POST',
						headers: {
							'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001'
						body: formData
					const response = await fetch(preSignedUrl.uploadURL, options);
					if (!response.ok) {
						alert(`Upload failed with status ${response.status}`);
			} catch (err) {
				if (err instanceof Error) {
			} finally {
				uploading = false;

<div class="mx-auto px-4 lg:px-6">
	<form on:submit|preventDefault={handleUpload}>
		<div class="flex justify-between px-3">
			<Button type="submit" variant="secondary">Upload image</Button>

		<div class="mt-6 grid w-full max-w-sm items-center gap-1.5">
			<Label for="avatar">Profile picture</Label>
			<Input id="avatar" type="file" on:change={handleFileChange} />

This topic was automatically closed after 15 days. New replies are no longer allowed.