<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: hj rr</title>
    <description>The latest articles on DEV Community by hj rr (@hj_rr_54c6382012a2bb57813).</description>
    <link>https://dev.to/hj_rr_54c6382012a2bb57813</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3994843%2Fe5358a0c-47c9-4b1c-a978-b587e6ed01ba.png</url>
      <title>DEV Community: hj rr</title>
      <link>https://dev.to/hj_rr_54c6382012a2bb57813</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hj_rr_54c6382012a2bb57813"/>
    <language>en</language>
    <item>
      <title>Show OS: Universal Uploader – Zero-dependency, stream-based file uploading with transparent XHR fallback</title>
      <dc:creator>hj rr</dc:creator>
      <pubDate>Sun, 21 Jun 2026 03:45:13 +0000</pubDate>
      <link>https://dev.to/hj_rr_54c6382012a2bb57813/show-os-universal-uploader-zero-dependency-stream-based-file-uploading-with-transparent-xhr-162g</link>
      <guid>https://dev.to/hj_rr_54c6382012a2bb57813/show-os-universal-uploader-zero-dependency-stream-based-file-uploading-with-transparent-xhr-162g</guid>
      <description>&lt;p&gt;Hey everyone,&lt;br&gt;
I wanted to share an open-source library I’ve been developing to solve a persistent issue in frontend file ingestion: handling large-file uploads efficiently without blocking the main thread, consuming excessive client-side memory, or introducing heavy npm dependencies.&lt;br&gt;
The core architecture leverages Fetch Duplex streams combined with Web Streams API to achieve constant memory usage during large file transfers. For browsers lacking full duplex stream support (such as Safari), it seamlessly switches to an automated chunked XHR fallback at runtime.&lt;/p&gt;

&lt;p&gt;⚙️ Core Architecture &amp;amp; Features&lt;/p&gt;

&lt;p&gt;Constant Memory Footprint: Streams large chunks sequentially using Fetch duplex streaming where supported.&lt;/p&gt;

&lt;p&gt;Intelligent Runtime Fallback: Detects capabilities instantly and falls back to a robust, chunked XMLHttpRequest pipeline to ensure cross-browser compatibility (including Safari).&lt;/p&gt;

&lt;p&gt;Resilient Lifecycle Management: Built-in hooks for pause, resume, manual abort, and automated chunk-level retries with a configurable exponential backoff algorithm.&lt;/p&gt;

&lt;p&gt;Zero Dependencies &amp;amp; Tree-shakeable: Written entirely in vanilla TypeScript with no external runtime dependencies (npm install u/universal-uploader/core). The architecture is highly modular, ensuring that unused upload strategies are completely tree-shaken during compilation.&lt;/p&gt;

&lt;p&gt;React Primitive Included: Ships with a declarative React hook that maps the entire upload lifecycle to state primitives without causing redundant re-renders.&lt;/p&gt;

&lt;p&gt;🛠️ Why Existing Solutions Didn't Fit&lt;/p&gt;

&lt;p&gt;Most mainstream uploading libraries either rely on heavy multi-part form encodings that require buffering files entirely into browser memory, or pull in heavy polyfill architectures that bloating the initial bundle size.&lt;br&gt;
I designed this to isolate the transport layer logic via a composition-based approach, separating the stream controller from the network client. To ensure deterministic behavior, the codebase is fully covered by 127 integration/unit tests validating network failures, stream interruptions, and state transitions.&lt;/p&gt;

&lt;p&gt;🔗 Resources&lt;/p&gt;

&lt;p&gt;GitHub Repository: &lt;a href="https://github.com/jdy8739/universal-uploader" rel="noopener noreferrer"&gt;jdy8739/universal-uploader&lt;/a&gt; (MIT License)&lt;/p&gt;

&lt;p&gt;Site: &lt;a href="https://jdy8739.github.io/universal-uploader/" rel="noopener noreferrer"&gt;Universal Stream Uploader&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Live Documentation &amp;amp; Demo: Universal Stream Uploader Demo (Note: Replace with your actual demo link URL if different)&lt;/p&gt;

&lt;p&gt;NPM Package: &lt;a href="https://www.npmjs.com/package/@universal-uploader/react" rel="noopener noreferrer"&gt;u/universal-uploader/react&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I would highly appreciate technical feedback regarding the public API design, potential edge cases in specific Web Stream runtimes, or architectural suggestions for the transport pipeline.&lt;br&gt;
Thanks for reading!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>opensource</category>
      <category>performance</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
