JavaScript Q&A Logo
JavaScript Q&A Part of the Q&A Network
Real Questions. Clear Answers.
Ask any question about JavaScript here... and get an instant response.
Q&A Logo Q&A Logo

How can I convert a Blob to a base64 string in JavaScript for uploading to a server?

Asked on Nov 16, 2025

Answer

To convert a Blob to a base64 string in JavaScript, you can use the FileReader API. This allows you to read the Blob's data as a base64-encoded string, which is useful for uploading to a server.
<!-- BEGIN COPY / PASTE -->
        function blobToBase64(blob) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onloadend = () => resolve(reader.result.split(",")[1]);
                reader.onerror = reject;
                reader.readAsDataURL(blob);
            });
        }

        // Example usage:
        const blob = new Blob(["Hello, world!"], { type: "text/plain" });
        blobToBase64(blob).then(base64String => {
            console.log(base64String); // Outputs the base64 string
        });
        <!-- END COPY / PASTE -->
Additional Comment:
  • The "blobToBase64" function returns a Promise that resolves with the base64 string.
  • "FileReader.readAsDataURL" reads the Blob and triggers the "onloadend" event when done.
  • "reader.result" contains the base64 data URL; "split(',')[1]" extracts the base64 part.
  • Always handle errors with "reader.onerror" to ensure robustness.
✅ Answered with JavaScript best practices.
← Back to All Questions

Q&A Network
The Q&A Network
JavaScript
Ask Questions / Get Answers about JavaScript!
Web Hosting
Ask Questions / Get Answers about Hosting!
AI Audio
Ask Questions / Get Answers about AI Audio!
AI Education
Ask Questions / Get Answers about AI Education!
SEO
Ask Questions / Get Answers about SEO!
Analytics
Ask Questions / Get Answers about Analytics!
DevOps
Ask Questions / Get Answers about DevOps!
WordPress
Ask Questions / Get Answers about WordPress!
Tailwind
Ask Questions / Get Answers about Tailwind!
HTML
Ask Questions / Get Answers about HTML!
Film Production
Ask Questions / Get Answers about Film Production!
AI Video
Ask Questions / Get Answers about AI Video!
CSS
Ask Questions / Get Answers about CSS!
AI Ethics
Ask Questions / Get Answers about AI Ethics!
Bootstrap
Ask Questions / Get Answers about Bootstrap!
Networking
Ask Questions / Get Answers about Networking!
Monetization
Ask Questions / Get Answers about Ad & Monetization!
AI
Ask Questions / Get Answers about AI!
AI Writing
Ask Questions / Get Answers about AI Writing!
MobileDev
Ask Questions / Get Answers about Mobile Developement!
Graphic Design
Ask Questions / Get Answers about Graphic Design!
Security
Ask Questions / Get Answers about Website Security!
IoT
Ask Questions / Get Answers about IoT!
Data Science
Ask Questions / Get Answers about Data Science!
Web Languages
Ask Questions / Get Answers about Web Languages!
AI Design
Ask Questions / Get Answers about AI Design!
AI Business
Ask Questions / Get Answers about AI Business!
Cybersecurity
Ask Questions / Get Answers about Cybersecurity!
Robotics
Ask Questions / Get Answers about Robotics!
Cloud Computing
Ask Questions / Get Answers about Cloud Computing!
AI Marketing
Ask Questions / Get Answers about AI Marketing!
Quantum
Ask Questions / Get Answers about Quantum Computing!
Chatbots
Ask Questions / Get Answers about Chatbots!
Web Development
Ask Questions / Get Answers about Web Development!
Photography
Ask Questions / Get Answers about Photography!
AI Coding
Ask Questions / Get Answers about AI Coding!
VR & AR
Ask Questions / Get Answers about VR & AR!
AI Images
Ask Questions / Get Answers about AI Images!
Performance
Ask Questions / Get Answers about Web Vitals!
Video Editing
Ask Questions / Get Answers about Video Editing!