<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq" -->

---
title: Send large files from frontend to the backend | daily.dev
description: Learn how to send large files from frontend to backend using FileReader in JavaScript. Split the file into small chunks and stream them to the backend. Send...
canonical: https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Send large files from frontend to the backend | daily.dev
og:description: Learn how to send large files from frontend to backend using FileReader in JavaScript. Split the file into small chunks and stream them to the backend. Send...
og:url: https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq
og:image: https://api.daily.dev/og/posts/wAEtHoTjq.png
og:image:alt: Send large files from frontend to the backend
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Send large files from frontend to the backend

**[Medium](https://daily.dev/sources/medium_js)** · 2 min read · 187 upvotes · 9 comments

## Summary

Learn how to send large files from frontend to backend using FileReader in JavaScript. Split the file into small chunks and stream them to the backend. Send the file name as a query parameter for unique identification.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://hsnice16.medium.com/send-large-files-from-frontend-to-the-backend-2f5f2414cc7c?source=rss------javascript-5>

## Community discussion

Top comments from developers on daily.dev.

**@shagool** · 12 upvotes

> i would suggest sending the file to a CDN from frontend in addition to this POST then the CDN will respond with the files metadata that include the url then send that url to you backend that will store in your database , this will assist you in the long run as cdn do more than storing but also file optimisation etc , check out cloudinary it has a really generous free tier

**@jimish** · 1 upvotes

> You should match checksum for uploaded file in order to check that all pieces are uploaded correctly.

**@kazimkayhan** · 1 upvotes

> This is a helpful article for anyone looking to implement file uploads in their web application.

**@abdullahabid69** · 0 upvotes

> amazing

**@bradscript** · 0 upvotes

> You can also use the new stream API. a File object has now access to a stream via the stream method (const stream = file.stream()). Then you can read it chunk by chunk by using the default stream reader that comes with every stream (const reader = stream.getReader()) with the read method (const {value, done} = await reader.read()). You loop until "done" is true.

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#javascript](https://daily.dev/tags/javascript), [#backend](https://daily.dev/tags/backend), [#frontend](https://daily.dev/tags/frontend)

[View this post on daily.dev](https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Send large files from frontend to the backend","url":"https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq"},"datePublished":"2023-03-18T23:39:09.661Z","dateModified":"2024-04-15T12:32:45.601Z","description":"Learn how to send large files from frontend to backend using FileReader in JavaScript. Split the file into small chunks and stream them to the backend. Send...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3c0f012a28eedc6b9fefd6c019567011?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3c0f012a28eedc6b9fefd6c019567011?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":9,"discussionUrl":"https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":187},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"keywords":"javascript,backend,frontend","timeRequired":"PT2M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Send large files from frontend to the backend"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq","comment":[{"@type":"Comment","text":"i would suggest sending the file to a CDN from frontend in addition to this POST then the CDN will respond with the files metadata that include the url then send that url to you backend that will store in your database , this will assist you in the long run as cdn do more than storing but also file optimisation etc , check out cloudinary it has a really generous free tier","datePublished":"2023-03-19T03:11:05.155Z","url":"https://daily.dev/posts/wAEtHoTjq#c-omgIFTOyk","author":{"@type":"Person","name":"Mashaole Mogale","url":"https://daily.dev/shagool","image":"https://avatars.githubusercontent.com/u/40543693?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":12}},{"@type":"Comment","text":"You should match checksum for uploaded file in order to check that all pieces are uploaded correctly.","datePublished":"2023-03-19T05:40:25.850Z","url":"https://daily.dev/posts/wAEtHoTjq#c-d9vFY06XZ","author":{"@type":"Person","name":"Jimish Gamit","url":"https://daily.dev/jimish","image":"https://lh3.googleusercontent.com/a-/AOh14GhbRvOwH9FY1HgVxuZBZRUS1vy_saBRYaC7fvLuNw=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is a helpful article for anyone looking to implement file uploads in their web application.","datePublished":"2023-03-19T01:20:42.978Z","url":"https://daily.dev/posts/wAEtHoTjq#c-QcFyXasHR","author":{"@type":"Person","name":"Kazim Kayhan","url":"https://daily.dev/kazimkayhan","image":"https://media.daily.dev/image/upload/s--RoJXAdtF--/f_auto/v1740551202/avatars/avatar_dIP83Ddz6O0k58erdOIba"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"amazing","datePublished":"2023-03-19T16:14:23.211Z","url":"https://daily.dev/posts/wAEtHoTjq#c-wkk4O6b70","author":{"@type":"Person","name":"Abdullah Abid","url":"https://daily.dev/abdullahabid69","image":"https://lh3.googleusercontent.com/a/AEdFTp6D2k1fyQNa_50HBbmj8BXOgjL9RASymysBFyDI=s96-c"}},{"@type":"Comment","text":"You can also use the new stream API. a File object has now access to a stream via the stream method (const stream = file.stream()). Then you can read it chunk by chunk by using the default stream reader that comes with every stream (const reader = stream.getReader()) with the read method (const {value, done} = await reader.read()). You loop until “done” is true.","datePublished":"2023-03-20T17:01:52.613Z","url":"https://daily.dev/posts/wAEtHoTjq#c-e3Pi3LHfq","author":{"@type":"Person","name":"Brad Script","url":"https://daily.dev/bradscript","image":"https://lh3.googleusercontent.com/a/AGNmyxa6VWuPQ61O9XqervTJsjgnpAo4hQHFURZ3ZVeG=s96-c"}}]}
```