Download Any File with Vanilla JavaScript | Download Image or Video in HTML CSS & JavaScript
HTML-код
- Опубликовано: 17 май 2022
- 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 (...
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.
can we download from youtube?
@@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
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
Sir,How can I fix this problem?
Exactly what i was looking for. You are perfect.
Hope you enjoyed the video
Nice website with good UI to download images. Learnt a lot.Thank you😇
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!
This is beaficul I love your projects🧡🔥
Really useful tutorial. Thank you very much.
Nicely done man.
More muscle to you n I'm looking forward to more of your work.
Much appreciated
This is a great website with a good design, thank you so much !!
Just awesome ❤️..... Love from NEPAL 🇳🇵 ✌️
Thanks
Thank you very much sir for making such a video
I am feeling blessed to find this channel :)
Happy to hear that!
you're the best thanks i will tell my friends to subscribe to your channel.
Simple code with beautiful logics💐
Thanks a lot 😊
Just Awesome 😍
Amazing Effort 💖
Thank you
I very like it . Thank you so much for your help....
Happy to help
Gajab 😊😊👍👍👍
Thank you! 🙂
Nice work man
Thank you.. Keep watching
Awesome Sir.
Thanks a ton
best project in javascript
Bro it would be much better if you could display the image before download .
Anyway you did great job 👏. Appreciate it
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!
@@CodingNepal thanks bro I'll try it.
If it works, i am gonna soon let you know it. Thanks again bro 🙏❤💯
@@CodingNepal bro thank you so much. it really worked fine like i wanted. thanks again and again. i really appreciated your great work.
Exeptional Video.... Keep Up The Good Work....
Thanks, will do!
Going to add that to my project
Great!
this video is very helpfull
Happy to hear that!
Hi CodingNepal, do you know how to make a site that gives live scores from roland garros? cordially
Using api you can make it easily
Awesome 👍😎❤️
Thanks ✌️
This is so wonderful Sir I love UI and functionality 💯💯🥰
My pleasure
I have errors with access fetch cross origin no Access-Control-Allow-Origin when i uploaded to github page..
How can i fix this?
Thanks
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
Great Job man , how can do that with a RUclips link video ??
can be this possible in blogger? what should i do? copy and paste this?
thank you bro
You're welcome!
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
Great suggestion! I'll think on it.
I wish Coding Nepal would make a video of add to cart tutorial 🤞
Here is the video of it: ruclips.net/video/Ee-eHfG2GpQ/видео.html
Thank you
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?
Plz create a Add Cart system beautiful degine and perfectly secured
thx
Great video!
Maybe a stupid question: Why do you declare the variable downloadBtn without any keyword? Isn't it necessary?
Both variables are declared with the const keyword. You can declare multiple variables by using commas. Like this: const a = 1, b = 2;
@@CodingNepal Ah, ok, good to know. And I didn't see the comma 😁 Thank you for your quick reply!
I would like to download videos from youtube and instagram is it possible?
hii, can you Video Downloader and converter WordPress Theme????
where you host this file
Sir ise Insta gram ke video hoge download?
good
Is youtube video is allowed to download
Does It Work For RUclips Videos?
can't download from youtube etc. always getting blocked
Hello bro why it is noy downloading the image its says tht this website is not ready to download blaaa blaaaa... Plzzz help me...
Does this download yt videos?
Nice video bro, But how to download yuotube videos using this downloader
Is it ok with the mp3?
can we download RUclips videos as well?
how to solve cors error ?? please guide me
my code return error no cors , can you help me ?
Sir can you make taturial on facebook video downloader or youtube video downloader
this cant download a youtube video?
Ek help chahiye mil sakti hai kya, maine ek theme banayi hai uske menu me search icon nhi lga paa raha hoon
You can watch my navigation with search bar video for this
Which should i learn next js or express js
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.
Make a cps test
can not download video file?
can youtube videos be downloaded?
Pls make a video on making a custom video player
With best UI
Okay, I'll think on it!
Thanks
sir why not download any file ,only show error
download button is not working pls fix it
Hola disculpa, no se puede descargar nada,
sir my js is not working properly
Can we download youtube videos.?
can this download youtube videos.If not then please make a video creating a such website.
👍
Hi bro please create Forum website
Can I complete this project with Android 8 mobile?
yes use spck editor
Please let video display under the download button too
You can simply create a tag and pass tempURL value as video src.
You give best if you speaking sir 😭
I have a code to download a video from RUclips 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?
Did you make it with vanilla JavaScript or NodeJS/ExpressJS
l make it using html css javascript only
@@CodingNepal this only work for images
but I can't download video file. ?
😮💨
Source code please. By the way good work
Source codes will be uploaded soon on my website www.codingnepalweb.com
Source codes has been uploaded. Download or copy codes from here - www.codingnepalweb.com/download-file-from-url-with-javascript/
Or u can just do ctrl + s
😭Anyone help me to solve "blob: null/be226c2f-0b42-445f-881b-84a057c39c71", and say why the "URL.createObjectURL(file)" not working. Thank you.
Can i download youtube video with this tool !?
no
Plz this is not working for me...
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.
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.
@@CodingNepal i want to convert same ui into social media downloader like yt vedio , insta. Twitter
I need its js
can I download youtube video this project
No, you can't because you'll get a cors error even if you get the direct link of the video.
@@CodingNepal yes! it is also showing an error in case I try to download any image from Amazon
why so?
this code is not working
URL na aauni site ko.lagi banam na euta
Url naaune site ko vannale..?
Can we download youtube videos using this??
No, you can't because you'll get a cors error even if you get the direct link of the video.
@@CodingNepal ok, now i understand 😉
can bulk?
Bulk.. Can you explain more?
@@CodingNepal bulk download or multiple download
@@lewster7id no there is only one input field so you can download one file at once
but how to download videos 😢
pdfs are getting download
Sir
It also work with TikTok link ?
No
😆😆🤣
@@ap_information7679 ?
URL.createObjectURL please explain
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
What does Nepal mean ?
Nepal is a country where I belong.
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
Please provide source code still no
Source codes has been uploaded. Download or copy codes from here - www.codingnepalweb.com/download-file-from-url-with-javascript/
Mine don't work, maybe I wrong type the code :D
Maybe you've tried to download those file which you haven't access to download
@@CodingNepal Now work very well! thanks again :)
Help me plz..#codenepal
But u can give preview of file
You mean live demo link of this project..?
Yes
Hope you pin me
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)"