URL to File/Blob in JavaScript

👉 Source code: openjavascript...
‍🎓 NEW: Earn a professional certificate in web development from Meta Inc. (course links in card below) 👇
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to fetch data from a URL of any type and turn this into a readable File/Blob in JavaScript.
#javascript #blob #file #filereader #webdevelopment #tutorial #javascript_tutorial
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡Web development professional certificates from Meta Inc.⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

[@OpenJavaScript]

Thanks for watching! 👉 Blog post with source code: openjavascript.info/2022/10/18/image-url-to-blob-in-javascript/

[@rhialicandido8644]

The best explantion of File/Blob I've seen! Thanks for the video!

[@ayoadeleke9474]

very nice video. it was concise and informative. will definitely be coming back to your profile for my tutorials!

[@OpenJavaScript]

Thanks, see you again soon then!

[@YondeCode]

Thank you ! I had headaches reading the MDN docs by myself, you helped me very much, have a good day

[@user-bj4uv8up9d]

thanks buddy I was trying since past 3 days but your video help me to get output thanks again. love you bro

[@OpenJavaScript]

That's great, glad this helped!

[@johnwayne8059]

Pretty helpful video!👍👍👍 Thanks for the work! Maybe you could stretch it a bit with giving more examples like you did with files, just with manipulate DOM-elements, just as an idea!😅😇😁

[@anton1492]

thank you very much. i finally understood BLOB!

[@OpenJavaScript]

Great, happy it helped!

[@syuo5051]

Thank you! Very useful and simple explanation as expected.

[@alanmurray4011]

Exactly what I was looking for, thank you 🙏 I’m building an app with an API and it seems the image url paths have a security token that expires within a few hours, because when I save the paths to localstorage and render them everything works fine for a few hours, but eventually the server responds with an error. Hoping this does the trick.

[@OpenJavaScript]

Yes, this should to the trick of getting the image data so you are not reliant upon the expiring URL. In case you are interested in then saving the image data in localstorage, you'll need to stringify it first. Here's a tutorial on that in case it's useful: kzbin.info/www/bejne/joubdJ2LbsqUjKM Good luck!

[@alanmurray4011]

@@OpenJavaScript I will definitely check it out, thank you. You've got yourself a new subscriber. 🙂 Keep up the great work.

[@volselongames4505]

thank you very much friend, good luck to you

[@OpenJavaScript]

Thanks, glad you enjoyed the tutorial!

[@sabinmorris6479]

thank you sir for good presentation can you help to show how can move that file to other directory using that blob scenario please? help me

[@OpenJavaScript]

You cannot specify in the browser into which folder on a user's computer you want to store the download. You just don't have permission. What you can do, however, if you are running JavaScript in Node, is use the File System module to manipulate the file system. In case you are unfamilar, here's my tutorial on that: kzbin.info/www/bejne/mqW3n4qum61kb7c

[@syntheticperson]

Very helpful. Thanks

[@OpenJavaScript]

You're welcome 😊

[@sunlirick]

thank you... 💝

[@OpenJavaScript]

You're welcome :)

[@andyidung7521]

Please do this with a video url that is most important, i believe most people want this on video url source too.

[@DevDivine]

Thanks for this helpful video, many many many and infinite many thanks to you

[@OpenJavaScript]

Infinite thanks? I'll take that!

[@user-iv3qy7fy2d]

Tell me how to download videos from BLOB url

[@piotrszczesniak]

Super informative in easy to grasp manner! Thanks - liked and subscribed :)

[@OpenJavaScript]

Thank you for reaching out to let me know. Glad you liked the video and great to have you on board as a subscriber :)

[@mattratliff2063]

Great video. So I noticed that the name that you provided for the image blob didn't appear in the browser tab when you opening the image. Is there a way to use the File object to customize the name of the browser tab to display the name of the file?

[@UzHandy]

And how we can save mp3 files from internet to device. I mean I use filesystem plugin of ionic. And it allows me to save to the storage. Can you make a new video and then share it?

[@santiagofantoni2643]

How could I save the file/blob into the image folder of my App?

[@linuxstudy1]

you are amazing man

[@OpenJavaScript]

Thanks!

[@nicholasc.5944]

you sound a lot like that one breadtuber Tom Nicholas

[@OpenJavaScript]

I had not heard of this person, but listening to some of his videos, I do agree 😂

[@victormanuelsandovalamaral]

If I want to receive a pdf by fetch, how would it be?

[@dudeyouhavenoidea]

I love you 😭😭

[@g43s]

I get file extension error, even tho my blob.type equals image/jpeg

[@OpenJavaScript]

Hard for me to diagnose without your script. But I have posted a live working example on my blog. Maybe you find this useful: openjavascript.info/2022/10/18/image-url-to-blob-in-javascript/

[@Dragon-Slay3r]

There's 2 blobs now on the right side of the window? New exit strategy? Lol

[@OpenJavaScript]

Timestamp? Maybe I was logging something earlier with a new example...

[@kavithakannan7215]

How to download blob image from facebook or instagram?