Blobs and Blob URLs | JavaScript Tutorial

👉 Blog post: openjavascript...
⚡ Need hosting for a website, WordPress blog or Node.js app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to create Blob objects using the Blob constructor, from user input or an external URL and create a Blob URL from the resulting blob data using URL.createObjectURL().
A Blob URL functions like a normal URL on a HTML page without the need for a server.
Use case examples featured in the video include how to start a client-side download from data held in a blob object, preview a user-uploaded image and generated a URL to an image edited with the HTML Canvas API.
#blob #blobs #url #createObjectURL #revokeObjectURL #javascript #javascript_tutorial

[@OpenJavaScript]

Thanks for watching!
👉 More about blobs: openjavascript.info/2022/10/17/what-is-a-blob-object-in-javascript/

[@blutube9916]

Thanks for the video, helps me to understand blobs and using them. With drily written tutorials I sometimes find it hard to absorb the same info.
I am learning about this, to store images in IndexDB. And to be able to get them and show them again to the user where they can download them if the need to.

[@konstantinkonorev5225]

Thanks a lot mate for a good explanation. That's time to add it to my playlist not to forget about those people who help everybody to be better. My OG!

[@kuoyulu6714]

Thanks alot, this tutorial is great, and easy to understand!

[@sodiqayilara1519]

Nice, wrote some code using blobs recently, didn't understand what I was doing, but now I get it. Thanks.

[@Pagegift]

You are a very cool guy!
Thank you for the lesson!
Now I know how to get images

[@OpenJavaScript]

Thanks, glad you found this useful!

[@vellenger]

Buen Tutorial, lo aplicare de seguro en algún momento, me sera de utilidad. Gracias

[@OpenJavaScript]

De nada!
Es sorprendente que útil este metodo es para trabajar con ficheros en JS.

[@HarshSingh-hk8fe]

what an incredible tutorial learnt alot. relly thankyou sir for this tutorial

[@PracticalMindset]

As a indian 🇮🇳 student : Understanding your English is hard then javascript .
😅😅

[@kaustavroy6542]

This was fantastic 😍 thanks.

[@sherifezzat4983]

Great thanks for sharing ❤️
Can you please put these JavaScript Tutorials into a playlist and number them? That would be easy to follow! Thanks again 😊

[@OpenJavaScript]

Great idea!
The number of videos is growing now so I'll review them and order them thematically into playlists (also in the right order where appropriate)

[@sherifezzat4983]

Thanks so much ❤️

[@user-cm9ik9sn4l]

Bro *how to access an image file from my Google drive and convert it to Blob object?*

[@johnwayne8059]

Great videos!👍👍👍

[@Ronald__75g]

Don't miss the exclusive interview with Binance's CEO for a glimpse into the future

[@jemrl]

Thanks, do you have a working example of video/mp4 blobs? Do you use MediaSource? Thanks

[@aryanandakumar7936]

Great tutorial. What to do if I have different types of files and want to generate blobs and blob urls?

[@reefgb77]

Great tutorial video

[@OpenJavaScript]

Thank you!

[@ROSHANKUMAR-rl6bf]

hi can u make a video on how to show progressbar using fetch , i have been looking for it all over the places couldnot find any,

[@cloudsystem3740]

thank you very much 🙏

[@OpenJavaScript]

You are welcome!

[@ajaygulani3086]

What a great video!! One question: If someone were to look at the source they would see the original URL that is being fetched, how do you hide this?

[@sodiqayilara1519]

It's quite hard to hide any code that is shipped to the client. If you want to hide it, run the logic on the server and hide your secret in environmental variables.

[@rpseries1473]

Bro how can hide or change url or stream url to change in blob url

[@OpenJavaScript]

A blob URL is created from blob/file data held in memory in JavaScript.
So to create a blob URL from a regular one you would need to get whatever resource is at the original URL in blob format and then create a blob URL from it.
This tutorial shows you how to read a URL resource to a blob: ruclips.net/video/cP5E0b21f_Y/видео.html
With the resulting blob, you can create a blob URL with the following code:
const blobURL = URL.createObjectURL(blob);

[@psyferinc.3573]

sanks