Download Any File with Vanilla JavaScript | Download Image or Video in HTML CSS & JavaScript

Подписаться 224 тыс.

Просмотров 72 тыс.

50% 1

Download Any File with Vanilla JavaScript | Download Image or Video in HTML CSS & JavaScript
In this video, I've shown you how to build a File Downloader with Vanilla JavaScript. This tool is made with pure JavaScript no server-side language is used to create it. To download a file, you've to paste a valid URL of the file and click the download button. The file should be publicly accessible to download.
Download Source Codes From Here
www.codingnepalweb.com
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Deep Sea by Vendredi
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...

Опубликовано:

17 май 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 166

@CodingNepal Год назад

If you get an error like this: Blocked by CORS policy: No Access-Control-Allow-Origin header is present. This is a cors (cross-origin resource sharing) error that means the browser blocked the request because the site you're trying to access doesn't allow you to access it. So, in this video, I've shown you how to download a publicly accessible file from a URL using vanilla JavaScript. You can try downloading files from sites like pixels, pixaby because this site allows you for it. Also, remember file URLs must have their valid extension at the end of a URL like .jpg, .png to download it.

@abodfta6159 Год назад

can we download from youtube?

@abhinabbaruah1353 Год назад

@@abodfta6159 no, I feel if you wish to take time for this project, then you're just wasting your time, or just learn from him. This project is just a useless because pexels can allow download directly without this project

@slayengaming2629 Год назад

Hey Coding Nepal, I face a failed to fetch error in my local system but when I go to my browser preview i simply download the image I wanted same I can't download Image when I used this in my webaite that is hosted on netlify

@kailashdatascience6482 Год назад

Sir,How can I fix this problem?

@emirhankayabas 2 года назад

Exactly what i was looking for. You are perfect.

@CodingNepal 2 года назад

Hope you enjoyed the video

@shreyaslakshman9162 Год назад

Nice website with good UI to download images. Learnt a lot.Thank you😇

@adeptussilicium2821 Год назад

I am search a lot, and here is solution for my problem (function, what i can use for download all files from Object with links). Thanks!

@swordzio Год назад

This is beaficul I love your projects🧡🔥

@tazul8 Год назад

Really useful tutorial. Thank you very much.

@mohandakliamara5237 Год назад

This is a great website with a good design, thank you so much !!

@josephuzoma9257 2 года назад

Nicely done man. More muscle to you n I'm looking forward to more of your work.

@CodingNepal 2 года назад

Much appreciated

@RevanthRajeshC390 Год назад

Thank you very much sir for making such a video

@yubiroaster6285 2 года назад

Just awesome ❤️..... Love from NEPAL 🇳🇵 ✌️

@CodingNepal 2 года назад

Thanks

@lokendrayadav9442 2 года назад

I am feeling blessed to find this channel :)

@CodingNepal 2 года назад

Happy to hear that!

@timelesshrsoftware Год назад

you're the best thanks i will tell my friends to subscribe to your channel.

@Vigyal Год назад

Simple code with beautiful logics💐

@CodingNepal Год назад

Thanks a lot 😊

@sujon-ahmed Год назад

Just Awesome 😍

@LesParodieBrosFan 2 года назад

Hi CodingNepal, do you know how to make a site that gives live scores from roland garros? cordially

@Crypto_Block_ 8 месяцев назад

Using api you can make it easily

@Hataken999 Год назад

I have errors with access fetch cross origin no Access-Control-Allow-Origin when i uploaded to github page.. How can i fix this?

@FLStudioKey Год назад

can be this possible in blogger? what should i do? copy and paste this?

@josue8526 Год назад

I very like it . Thank you so much for your help....

@CodingNepal Год назад

Happy to help

@codingcinemax 2 года назад

Amazing Effort 💖

@CodingNepal 2 года назад

Thank you

@allrounder3234 Год назад

This is not working in your case you r downloading some files with extension like at the end test.pdf or .MP4 i tried all links not getting download throwing an error

@sarkariexpress345 2 года назад

Gajab 😊😊👍👍👍

@KriptoBilgileri Год назад

hii, can you Video Downloader and converter WordPress Theme????

@thekhabrisidnaaz Год назад

where you host this file

@ytatest399 Год назад

Thanks a lot for creating this video, but I have a problem, I can't download the mp4 video, can you tell me pls how?

@ourielperez1646 Год назад

Thank you! 🙂

@anshulbindua9230 2 года назад

Nice work man

@CodingNepal 2 года назад

Thank you.. Keep watching

@clubzmedia 2 года назад

Is youtube video is allowed to download

@codewithaarzoo Год назад

how to solve cors error ?? please guide me

@nehanshpatil6699 2 года назад

Awesome Sir.

@CodingNepal 2 года назад

Thanks a ton

@bayzedtalks786 Год назад

best project in javascript

@ID-Thousand Год назад

Bro it would be much better if you could display the image before download . Anyway you did great job 👏. Appreciate it

@CodingNepal Год назад

Sorry for that but you can do that by adding some lines of code. In HTML file before ending of tag.. paste this code: Inside CSS code, in the end... paste this code: .preview-img{ display: none; margin-top: 30px; justify-content: center; } form input:valid ~ .preview-img{ display: flex; } .preview-img img{ max-width: 100%; max-height: 300px; object-fit: contain; } In JavaScript file, after line.no 2.. paste this code: fileInput.addEventListener("input", e => { document.querySelector(".preview-img img").src = e.target.value; }); Let me know if it didn't work!

@ID-Thousand Год назад

@@CodingNepal thanks bro I'll try it. If it works, i am gonna soon let you know it. Thanks again bro 🙏❤💯

@ID-Thousand Год назад

@@CodingNepal bro thank you so much. it really worked fine like i wanted. thanks again and again. i really appreciated your great work.

@elephantfilmsoficial Год назад

I would like to download videos from youtube and instagram is it possible?

@mkstn4241 2 года назад

Does It Work For RU-vid Videos?

@reyearlgalos7430 Год назад

Is it ok with the mp3?

@CreativeTutorialsWeb 2 года назад

This is so wonderful Sir I love UI and functionality 💯💯🥰

@CodingNepal 2 года назад

My pleasure

@PuppyLovePics4710 Год назад

Does this download yt videos?

@antjeplatte144 2 года назад

Great video! Maybe a stupid question: Why do you declare the variable downloadBtn without any keyword? Isn't it necessary?

@CodingNepal 2 года назад

Both variables are declared with the const keyword. You can declare multiple variables by using commas. Like this: const a = 1, b = 2;

@antjeplatte144 2 года назад

@@CodingNepal Ah, ok, good to know. And I didn't see the comma 😁 Thank you for your quick reply!

@gumnam4253 Год назад

can we download RU-vid videos as well?

@prathmeshbatane8740 Год назад

Sir ise Insta gram ke video hoge download?

@ahamednirar5737 Год назад

Hello bro why it is noy downloading the image its says tht this website is not ready to download blaaa blaaaa... Plzzz help me...

@pass096lauter_4 Год назад

can't download from youtube etc. always getting blocked

@jhmesseroux Год назад

Great Job man , how can do that with a RU-vid link video ??

@zachfenton608 2 года назад

Going to add that to my project

@CodingNepal 2 года назад

Great!

@qwertasdfg1967 2 года назад

Which should i learn next js or express js

@CodingNepal 2 года назад

NextJs is a frontend framework and ExpressJS is a backed framework based on NodeJS. So, you should decide whether you want to go with backend or frontend or both.

@kratos1918 Год назад

my code return error no cors , can you help me ?

@TechHelperManish 2 года назад

Plz create a Add Cart system beautiful degine and perfectly secured

@rachmadbudianto8434 Год назад

can youtube videos be downloaded?

@juniasbeding105 Год назад

this cant download a youtube video?

@foodtastebd Год назад

can not download video file?

@khennethpuerto2085 2 года назад

I wish Coding Nepal would make a video of add to cart tutorial 🤞

@CodingNepal 2 года назад

Here is the video of it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ee-eHfG2GpQ.html

@khennethpuerto2085 2 года назад

Thank you

@mohamadmawed9136 2 года назад

The person I have benefited the most from, you are very wonderful, waiting for the source code. I have a request that I don't know if you can implement it for me. I want a schedule of matches and the standings of the teams with the live score for each match in addition to the World Cup. I want them html css javascript I know that it is a big request, but I hope for a response from the Almighty All love and respect to you

@CodingNepal 2 года назад

Great suggestion! I'll think on it.

@mdhossen7082 2 года назад

this video is very helpfull

@CodingNepal 2 года назад

Happy to hear that!

@coding3645 2 года назад

Awesome 👍😎❤️

@CodingNepal 2 года назад

Thanks ✌️

@nadevnimnath7021 2 года назад

Exeptional Video.... Keep Up The Good Work....

@CodingNepal 2 года назад

Thanks, will do!

@kartik.jangra 5 месяцев назад

Can we download youtube videos.?

@TingtangTV5730 Год назад

Nice video bro, But how to download yuotube videos using this downloader

@sayantanbiswas9702 Год назад

can this download youtube videos.If not then please make a video creating a such website.

@ArunBabuji132 2 года назад

sir why not download any file ,only show error

@Sandy-WebFlow Месяц назад

sir my js is not working properly

@Sweetft 2 года назад

download button is not working pls fix it

@nikafutkaradze569 2 года назад

thank you bro

@CodingNepal 2 года назад

You're welcome!

@AmjadAli-lx7ut Год назад

Sir can you make taturial on facebook video downloader or youtube video downloader

@DMLTips 2 года назад

Hola disculpa, no se puede descargar nada,

@64_bit_coding 2 года назад

Make a cps test

@scienca7893 Год назад

Thanks

@sarkariexpress345 2 года назад

Ek help chahiye mil sakti hai kya, maine ek theme banayi hai uske menu me search icon nhi lga paa raha hoon

@CodingNepal 2 года назад

You can watch my navigation with search bar video for this

@user-mv1jr4gw9c 2 года назад

I have a code to download a video from RU-vid that was made using JavaScript, but when I click on the download button, it does not download the video, I don't know where the problem is, can I talk to you via WhatsApp to send the error image and try to solve the error?

@CodingNepal 2 года назад

Did you make it with vanilla JavaScript or NodeJS/ExpressJS

@user-mv1jr4gw9c 2 года назад

l make it using html css javascript only

@AtomTCP 2 года назад

@@CodingNepal this only work for images

@mahmoudmedo1475 2 года назад

Can I complete this project with Android 8 mobile?

@Hashiiem Год назад

yes use spck editor

@dex_code_yt 2 года назад

Pls make a video on making a custom video player With best UI

@CodingNepal 2 года назад

Okay, I'll think on it!

@dex_code_yt 2 года назад

Thanks

@motasam8122 Год назад

but I can't download video file. ? 😮‍💨

@sylessss 2 года назад

Or u can just do ctrl + s

@harunwarsame3027 Год назад

Plz this is not working for me...

@skeeterstudies8109 2 года назад

Please let video display under the download button too

@CodingNepal 2 года назад

You can simply create a tag and pass tempURL value as video src.

@GBalasooriya Год назад

😭Anyone help me to solve "blob: null/be226c2f-0b42-445f-881b-84a057c39c71", and say why the "URL.createObjectURL(file)" not working. Thank you.

@user-zo2ez3ci7b 9 месяцев назад

I need its js

@onee 2 года назад

Why would you need such a website? All the links you've provided will download things by simply pressing CTRL+S or right click and "Save as image/video"... Unless of course this also works on websites where those buttons are blocked. Then that's another story.

@CodingNepal 2 года назад

I think you didn't understand the purpose of this video. Let's assume you've an image site.. What you'll do for user to download images..? Right click and save or you provide a download button that will download that image. Obviously, for the user convinent you'll provide a download button and there this video codes and concepts can be used.

@user-we8vm6xt1j Год назад

@@CodingNepal i want to convert same ui into social media downloader like yt vedio , insta. Twitter

@tzjzjzjz Год назад

thx

@Riythmix 2 года назад

Hi bro please create Forum website

@Jitender294 2 года назад

can I download youtube video this project

@CodingNepal 2 года назад

No, you can't because you'll get a cors error even if you get the direct link of the video.

@artistakalyan Год назад

@@CodingNepal yes! it is also showing an error in case I try to download any image from Amazon why so?

@kushwahashivbhan8269 2 года назад

You give best if you speaking sir 😭

@abdellatif.x8127 2 года назад

Can i download youtube video with this tool !?

@lewster7id 2 года назад

@premodsuraweera Год назад

this code is not working

@mohamedapoalmkarem6869 11 месяцев назад

but how to download videos 😢

@looser1220 Год назад

pdfs are getting download

@dhruvdalal878 2 года назад

Can we download youtube videos using this??

@CodingNepal 2 года назад

No, you can't because you'll get a cors error even if you get the direct link of the video.

@ap_information7679 Год назад

@@CodingNepal ok, now i understand 😉

@muhammedrafeeque3541 2 года назад

good

@numericalwallah9174 2 года назад

URL.createObjectURL please explain

@CodingNepal 2 года назад

URL.createObjectURL creates a URL of the passed object. This url is stored in the document window. You can read this MDN documentation for detailed information: developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

@kids2051 2 года назад

Source code please. By the way good work

@CodingNepal 2 года назад

Source codes will be uploaded soon on my website www.codingnepalweb.com

@CodingNepal 2 года назад

Source codes has been uploaded. Download or copy codes from here - www.codingnepalweb.com/download-file-from-url-with-javascript/

@lewster7id 2 года назад

can bulk?

@CodingNepal 2 года назад

Bulk.. Can you explain more?

@lewster7id 2 года назад

@@CodingNepal bulk download or multiple download

@CodingNepal 2 года назад

@@lewster7id no there is only one input field so you can download one file at once

@ThanHtutZaw3 2 года назад

Sir It also work with TikTok link ?

@CodingNepal 2 года назад

@ap_information7679 Год назад

😆😆🤣

@ThanHtutZaw3 Год назад

@@ap_information7679 ?

@allrounder3234 Год назад

Ohh it is downloading only those files which we can download by one click free not downloading youtubee vedioes or Instagram any image or vedio....Google pixel images vedioes this is not soo good

@KoblanJumanazarov Месяц назад

What does Nepal mean ?

@CodingNepal Месяц назад

Nepal is a country where I belong.

@sltechslider5565 2 года назад

Please provide source code still no

@CodingNepal 2 года назад

Source codes has been uploaded. Download or copy codes from here - www.codingnepalweb.com/download-file-from-url-with-javascript/

@drshantosh7323 2 года назад

URL na aauni site ko.lagi banam na euta

@CodingNepal 2 года назад

Url naaune site ko vannale..?

@minbahadur9000 2 года назад

👍

@maurov6861 2 года назад

Mine don't work, maybe I wrong type the code :D

@CodingNepal 2 года назад

Maybe you've tried to download those file which you haven't access to download

@maurov6861 2 года назад

@@CodingNepal Now work very well! thanks again :)

@anshulbindua9230 2 года назад

But u can give preview of file

@CodingNepal 2 года назад

You mean live demo link of this project..?

@anshulbindua9230 2 года назад

Yes

@harunwarsame3027 Год назад

Help me plz..#codenepal

@Vikash-mb9zi 2 года назад

Hope you pin me

@artistakalyan Год назад

Why is it showing an error?? "dwnld.js:10 Uncaught (in promise) TypeError: Failed to fetch at fetchFile (dwnld.js:10:2) at HTMLButtonElement. (dwnld.js:6:2)"