If (confirm('you wanna save this image?')). Return false // Prevent default action and stop event propagation SaveImageAs1(element.nameProp, element.href) Is there a way to do this using client-side programming only? It allows web applications to access files on the user's device in a way that is similar to how native applications do it.I need the browser to download the image files just as it does while clicking on an Excel sheet. The download path is based on the browser settings - for example by default Chrome will download to your downloads folder. The File System Access API is a proposed web API that provides a consistent, high-level interface for reading and writing files on the user's local device. Now, as we have a file blob, we have two ways to download it. Blob goes firstĪs we already know what's a Blob, let's have a look at how to download any data just using JavaScript Blob API.Ĭonsider having a JSON format object which contains some application configurations: const configuration = įirstly we have to convert out configuration object into a Blob: const myBlobFile = new Blob( Whenever that link is clicked, it will download the file in a new tab/window. The Fileinterface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system. Blobs can represent data that isn't necessarily in a JavaScript-native format.

MDN says: The Blob object represents a blob, which is a file-like object of immutable, raw data they can be read as text or binary data or converted into a ReadableStream so its methods can be used for processing the data. However, the Blob API and the new File System Access API now allow us to easily and efficiently download any file using JavaScript with just a click of a button.

In the past, if you needed to store data on your computer while working with JavaScript, you may have had to use server-side code or complex HTML.

Javascript download file on click