---
title: "File Transfers: A Small Demonstration with WebRTC, React and Redux"
description: Learn how to use Redux and React with WebRTC to create a file transferring application, Watch a demo and more.
---

[Skip to content](https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux#main-content)

![WebRTC.ventures](https://blog.webrtc.ventures/hubfs/logo-main-light.svg)

- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
  
  Show submenu for WebRTC Services 
  
    - [Assess](https://webrtc.ventures/services/assess/)
    - [Build](https://webrtc.ventures/services/build/)
    - [Integrate](https://webrtc.ventures/services/integrate/)
    - [Test](https://webrtc.ventures/services/test/)
    - [Manage](https://webrtc.ventures/services/manage/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
  
  Show submenu for Our Partners 
  
    - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
  
  Show submenu for Stories of Success 
  
    - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
    - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
    - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
    - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
    - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
    - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
    - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
  
  Show submenu for WebRTC Resources 
  
    - [WebRTC Live](https://webrtc.ventures/webrtc-live/)
    - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
    - [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
    - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
  
  Show submenu for About Us 
  
    - [Blog](https://webrtc.ventures/blog/)
    - [Our Team](https://webrtc.ventures/our-team/)
    - [Jobs](https://webrtc.ventures/jobs/)

Open main navigation

Close main navigation

- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
  
  Show submenu for WebRTC Services 
  
    - [Assess](https://webrtc.ventures/services/assess/)
    - [Build](https://webrtc.ventures/services/build/)
    - [Integrate](https://webrtc.ventures/services/integrate/)
    - [Test](https://webrtc.ventures/services/test/)
    - [Manage](https://webrtc.ventures/services/manage/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
  
  Show submenu for Our Partners 
  
    - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
  
  Show submenu for Stories of Success 
  
    - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
    - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
    - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
    - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
    - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
    - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
    - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
  
  Show submenu for WebRTC Resources 
  
    - [WebRTC Live](https://webrtc.ventures/webrtc-live/)
    - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
    - [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
    - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
  
  Show submenu for About Us 
  
    - [Blog](https://webrtc.ventures/blog/)
    - [Our Team](https://webrtc.ventures/our-team/)
    - [Jobs](https://webrtc.ventures/jobs/)
- [Contact us](https://webrtc.ventures/contact/)

[Contact us](https://webrtc.ventures/contact/)

 Apr 17, 2018 12:00:00 AM

# File Transfers: A Small Demonstration with WebRTC, React and Redux

[Fernando Vasquez](https://blog.webrtc.ventures/author/fernando-vasquez)

Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux)

We’re always trying to find new ways to communicate with other people, but even with the progress we have made, something as essential as sharing files is still so cumbersome to do. We always need to upload the file to a server and then send it to ourselves for later usage. Let’s face it, it’s not always as simple as sending a message to a peer, there’s always something else involved. But, this is changing due to the capacity that WebRTC provides with it’s data channels. In this blogpost I hope to provide you with a clearer picture on how data channels work in WebRTC, using a simple peer to peer connection to setup a chat and establish basic file transfers.

![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/file-transfer.gif?width=928&height=688&name=file-transfer.gif) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/file-transfer.gif?width=928&height=688&name=file-transfer.gif)

 Two tabs sharing files and messaging each other.

In line with traditional WebRTC fashion, this demo consists of a small signaling server made with Express.js, Node.js and Websockets. On the client side we have a stack that will help us visualize this process in depth, which consists of React.js and Redux, put together to form a pretty simple peer to peer messaging application that will be able to transfer files too. This method of communication of course has its advantages and disadvantages, which will be covered in this blog post.

## Why React and Redux?

We use React and Redux to separate the user interface from the actions that are needed to connect with another peer, a responsive UI that could easily change it’s elements state on certain conditions and that was also pretty convenient for the use-case in question. Another benefit to using both of these libraries in the beginning of the demo was that it made it really easy to follow the whole process that occurs when two browsers try to establish a connection via WebRTC. This was an important reason for this decision, since one of our objectives of this demo is to make WebRTC as easy as possible to follow.

Redux logs will indicate whenever a user receives messaging from the serve and offers from the other end of the peer connection and so on. In this way it provides the whole picture of what goes on behind a simple WebRTC chat application with file transfers.

 

![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/log.gif?width=538&height=728&name=log.gif) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/log.gif?width=538&height=728&name=log.gif)

 A redux logger, detailing each step of the WebRTC connection

## Advantages

- WebRTC is secure by design, every bit of traffic going through WebRTC’s data channels is encrypted by default. The signaling used to communicate with the server is done via a secure websocket, which means that the little traffic there is between server and clients is encrypted by nature too.
- Peer to Peer, since the signaling server is only ever used to establish initial terms for the WebRTC connection to take place, the actual conversation and file transfers with the receptor peer are completely private and there’s no intermediary between both endpoints, this is thanks to WebRTC’s integration with most browsers in recent years.
- Multiplatform by default, since WebRTC has been in the market for a few years now, almost all internet browser providers have updated and implemented WebRTC on their own browsers, making this available on many platforms by default and without having to make an extra effort to accommodate incompatibilities.

## Disadvantages

- There’s a limit to how many files your browser can handle with this method of file transferring, since they’re stored in your browser before they’re downloaded.
- It would be impractical to connect more than two users at one time, in this case it would be more convenient to have an intermediary server to relay the information to other peers, always with WebRTC. Check this [article](https://webrtc.ventures/2017/11/a-guide-to-webrtc-media-servers-open-source-options/) to [know more about media servers](https://webrtc.ventures/2017/11/a-guide-to-webrtc-media-servers-open-source-options/) and how they can connect multiple peers without an issue
- Despite the advancements in WebRTC adoption, there are still a few browsers that do not fully support WebRTC specifications, but that age is coming to an end and is only a small percentage.

## Try it yourself!

You can find the [demo working live here](https://proto.webrtc.ventures/file-transfer-demo/), if you want to take a closer look to the source code.

Check out the repository by following this [link](https://github.com/agilityfeat/file-transfer-demo). Just open the demo and use it on several browsers or several tabs, you will be connected with one of the other users at random when you “Open” the data channel.

## Contact us to build or improve your WebRTC Communications Platform!

Do you want to build your own [communications platform](https://webrtc.ventures/custom-applications/) based on WebRTC? Do you need more information on how to have WebRTC work in your web application?  We have an experienced team ready & happy to help you out.  [Contact us today!](https://webrtc.ventures/contact/)

 

[CPaaS](https://blog.webrtc.ventures/tag/cpaas), [Managed Services](https://blog.webrtc.ventures/tag/managed-services), [Events](https://blog.webrtc.ventures/tag/events), [Video Conferencing](https://blog.webrtc.ventures/tag/video-conferencing), [Real Time Weekly](https://blog.webrtc.ventures/tag/real-time-weekly), [WebRTC Architecture](https://blog.webrtc.ventures/tag/webrtc-architecture), [Broadcasting](https://blog.webrtc.ventures/tag/broadcasting), [Medical](https://blog.webrtc.ventures/tag/medical), [WebRTC Live](https://blog.webrtc.ventures/tag/webrtc-live), [Showcase](https://blog.webrtc.ventures/tag/showcase), [Thoughts](https://blog.webrtc.ventures/tag/thoughts), [Vonage](https://blog.webrtc.ventures/tag/vonage), [Daily](https://blog.webrtc.ventures/tag/daily), [Jobs](https://blog.webrtc.ventures/tag/jobs), [Contact Centers](https://blog.webrtc.ventures/tag/contact-centers), [Telehealth](https://blog.webrtc.ventures/tag/telehealth), [Education](https://blog.webrtc.ventures/tag/education), [Technical](https://blog.webrtc.ventures/tag/technical), [General](https://blog.webrtc.ventures/tag/general), [Story of success](https://blog.webrtc.ventures/tag/story-of-success), [The WebRTC.ventures Blog](https://blog.webrtc.ventures/tag/the-webrtc-ventures-blog), [Testing](https://blog.webrtc.ventures/tag/testing), [Gaming](https://blog.webrtc.ventures/tag/gaming), [DevOps](https://blog.webrtc.ventures/tag/devops), [Symbl.ai](https://blog.webrtc.ventures/tag/symbl-ai)

## Related posts

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Stream-a-Remote-Screen-with-WebRTC.png?height=200&name=Stream-a-Remote-Screen-with-WebRTC.png)](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

## [Stream a Remote Screen with WebRTC](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

[webrtc](https://blog.webrtc.ventures/author/webrtc) 

 Aug 27, 2019 12:00:00 AM

Rafael Viscarra, one of our engineers, wrote a blog post about using WebRTC to stream a remote...

[Read more](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Telehealth-Starter-Kit-Series_-Appointment-Reminders.png?height=200&name=Telehealth-Starter-Kit-Series_-Appointment-Reminders.png)](https://blog.webrtc.ventures/2019/08/telehealth-starter-kit-series-appointment-reminders)

## [Telehealth Starter Kit Series: Appointment Reminders](https://blog.webrtc.ventures/2019/08/telehealth-starter-kit-series-appointment-reminders)

[Paige Long](https://blog.webrtc.ventures/author/paige-long) 

 Aug 15, 2019 12:00:00 AM

Welcome to our telehealth starter kit blog series! For the rest of the summer, we’ll focus on one...

[Read more](https://blog.webrtc.ventures/2019/08/telehealth-starter-kit-series-appointment-reminders)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/ArinSime_WebRTCBoston.png?height=200&name=ArinSime_WebRTCBoston.png)](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

## [WebRTC Boston Recap](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

[ArinSime](https://blog.webrtc.ventures/author/arinsime) 

 Mar 9, 2016 12:00:00 AM

I originally posted this article on RealTimeWeekly.co – sign up for free weekly news on the latest...

[Read more](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

### WebRTC.Ventures Services

...

- Assess
- Build
- Integrate
- Test
- Deploy & Manage

### Contact Us

...

**Video should be an opportunity, not a headache.**   
 We’re here to build, integrate, assess and optimize, test, and even deploy and manage your live video application. 

[Contact us](https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux#contact)

### WebRTC Live

...

 View [past episodes](https://blog.webrtc.ventures/webrtc-live/) of our webinar interview series about the latest webRTC use cases and technical updates. Join our mailing list to learn about upcoming episodes! 

![WebRTC Live](https://blog.webrtc.ventures/hs-fs/hubfs/Template%20Images/widged-bannet.webp?height=90&name=widged-bannet.webp)

![logo-main-light](https://blog.webrtc.ventures/hubfs/logo-main-light.svg "logo-main-light")

We’re one of the few agencies in the world dedicated to WebRTC development. This dedication and experience is why so many people trust us to help bring live video application dreams to life.

 

### Let's get started!

###### **[Contact us today](https://webrtc.ventures/contact/)**

**[info@webrtc.ventures](mailto:info@webrtc.ventures)**

<https://www.linkedin.com/company/webrtc-ventures> <https://www.youtube.com/@WebrtcVentures>

### Join our mailing list

We don't e-mail often (a few times a month max), and it will be worth it when we do! Of course, we respect your privacy and will not share your contact information.

© 2023 WebRTC.ventures, an [AgilityFeat](https://agilityfeat.com/) company / [Privacy Policy](https://webrtc.ventures/privacy-policy//)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Fernando Vasquez",
    "url" : "https://blog.webrtc.ventures/author/fernando-vasquez"
  },
  "dateModified" : "2024-04-03T18:21:41.290Z",
  "datePublished" : "2018-04-17T04:00:00.000Z",
  "headline" : "File Transfers: A Small Demonstration with WebRTC, React and Redux",
  "mainEntityOfPage" : {
    "@id" : "https://blog.webrtc.ventures/2018/04/file-transfers-small-demonstration-webrtc-react-redux",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg"
    }
  }
}
```