search

uploadcare / uploadcare-js-api-clients

JavaScript library for work with Uploadcare API
https://uploadcare.com/docs/start/api/
MIT License
60 stars 14 forks source link

Running into `TypeError: source.on is not a function` when using Sveltekit #527

Closed plattegruber closed 8 months ago

plattegruber commented 8 months ago

Describe the bug

👋🏽 I'm running into a reproducible issue. Hopefully this is just me missing something simple.

I'm seeing an exception TypeError: source.on is not a function when trying to save an image in a Sveltekit project. Full trace:

TypeError: source.on is not a function
    at DelayedStream.create (...\node_modules\delayed-stream\lib\delayed_stream.js:33:10)
    at CombinedStream.append (...\node_modules\combined-stream\lib\combined_stream.js:45:37)
    at FormData.append (...\node_modules\form-data\lib\form_data.js:75:3)
    at buildFormData (.../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:383:18)
    at retryIfFailed.retryNetworkErrorMaxTimes.retryNetworkErrorMaxTimes (.../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:520:15)
    at .../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:464:44
    at runAttempt (.../@uploadcare/upload-client/dist/esm/index.node.mjs:91:16)
    at retrier (.../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:96:12)
    at retryIfFailed (.../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:464:12)
    at base (.../node_modules/@uploadcare/upload-client/dist/esm/index.node.mjs:512:12)
  1. Initialize a Sveltekit project as described: https://kit.svelte.dev/docs/creating-a-project
  2. Create a simple +page.svelte file: 
    <form method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit">Submit</button>
</form>
  3. Wire up a +page.server.js file: 
    
import { uploadFile } from '@uploadcare/upload-client';
import { UPLOADCARE_API_KEY } from '$env/static/private';

export const actions = { default: async({request}) => { let formData = await request.formData(); let file = formData.get('file'); await uploadFile(file, { publicKey: UPLOADCARE_API_KEY, }); } }



### Expected behavior
A successful file upload.

### Code / screenshots

<!-- Include a self-contained, copy-pastable example that generates the issue if possible. -->
I don't have a small, self-contained example, but I do have a repo that recreates the issue: https://github.com/plattegruber/uploadcare-sveltekit-recreation

You can clone and open in a codespace, and run `npm run dev -- --open`.

<!-- Screenshots (if applicable). -->

### Environment

 - Library version: 6.14.1
 - Language/framework version:
 - OS version:
nd0ut commented 8 months ago

Hey @plattegruber, thanks for the feedback.

Currently, upload-client doesn't support native Node's FormData and File instances as an input source. You need to convert them to the Buffer before:

    let file = formData.get("file");
    let arrayBuffer = await file.arrayBuffer();
    let buffer = Buffer.from(arrayBuffer);
plattegruber commented 8 months ago

Hey @plattegruber, thanks for the feedback.

Currently, upload-client doesn't support native Node's FormData and File instances as an input source. You need to convert them to the Buffer before:

    let file = formData.get("file");
    let arrayBuffer = await file.arrayBuffer();
    let buffer = Buffer.from(arrayBuffer);

Thanks @nd0ut! That makes sense, I appreciate the help.