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

<script>
	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) {
					console.error(err.message);
				}
			} finally {
				uploading = false;
			}
		};
</script>

<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>

		<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} />
		</div>
	</form>
</div>

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