13 replies

Streaming file from Client to Server to S3

I am working on a side project in which i need to upload data to an s3 bucket.
The user will select a large file on the React frontend and upload it. The file is sent to an Express.js server that will pipe/stream the chunks to an s3 bucket as soon as they arrive.

Is the

formData

formData

that i send from the client to server a

readableStream

readableStream

const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>

const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>

TTC

Theo's Typesafe Cult•2y ago•

13 replies

harshcut

Streaming file from Client to Server to S3

formData

formData

that i send from the client to server a

readableStream

readableStream

const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>

const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>

Streaming file from Client to Server to S3

Similar Threads

Streaming file from Client to Server to S3

Similar Threads

Similar Threads

Similar Threads