A small JS no-dependency library for a cool download experience

A small JS no-dependency library for a cool download experience

JS File Downloader is a simple no dependency library you will be able to download file from browser and show downloading status.

JS File Downloader

🌟Please remember to star this github repo if you like it. Thank you! ❤️

Introduction

JS File Downloader is a simple no dependency library you will be able to download file from browser and show downloading status.

Browser Compatibility

JS File Downloader supports all browsers that are [ES5-compliant] (http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).

Installing with package manager

With a package manager (recomanded):

npm install js-file-downloader --save 

Basic usage

import JsFileDownloader from 'js-file-downloader';

const fileUrl = 'http://...';

new JsFileDownloader({ 
    url: fileUrl
  })
  .then(function () {
    // Called when download ended
  })
  .catch(function (error) {
    // Called when an error occurred
  });

Use without a package manager

Download this library from https://github.com/AleeeKoi/js-file-downloader/releases

<script src="/path/to/js-file-downloader.min.js"></script>
<script>
  // Then somewhere in your code
  new jsFileDownloader({ url: 'https://github.alessandropellizzari.it/test/apedesign-bg.png' })
    .then(function () {
      // Called when download ended
    })
    .catch(function (error) {
      // Called when an error occurred
    });
</script>

Options:

process (for checking download status)

A function to call every time a process event is called. Function receive an Event Object as input.

function process (event) {
  if (!event.lengthComputable) return; // guard
  var downloadingPercentage = Math.floor(event.loaded / event.total * 100);
  // what to do ...
};

new JsFileDownloader({ 
  url: '...',
  process: process
})
headers (of request)

If you need to customize request header data you can pass an array of objects like following example:

new JsFileDownloader({ 
  url: '...',
  headers: [
    { name: 'Authorization', value: 'Bearer ABC123...' }
  ]
})
filename

Setting this String you can force output file name

mobileDisabled

Boolean value (default false) to enable/disable library on mobile browsers.

timeout (ms)

Integer value (default 40000) defining how much ms attend before stop download action.

autoStart

Boolean value (default true) to enable/disable automatically starting the download. When the value is true the constructor returns a Promise, however when it's set to false, the constructor doesn't return anything and the download can be started by calling the start() method on the object.

Example with autoStart set to true

new JsFileDownloader({ 
  url: '...',
  autoStart: true
})

Example with autoStart set to false

const download = new JsFileDownloader({ 
  url: '...',
  autoStart: false
});

download.start()
  .then(function(){
      // success 
  })
  .catch(function(error){
      // handle errors
  });
forceDesktopMode

Boolean value (default false) to force desktop mode even on mobile devices for downloading files.

new JsFileDownloader({ 
  url: '...',
  forceDesktopMode: true
})
withCredentials

This is a Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.

new JsFileDownloader({ 
  url: '...',
  withCredentials: true
})
method

The HTTP request method to use, such as "GET", "POST", "PUT", etc. (default "GET") Ignored for non-HTTP(S) URLs.

new JsFileDownloader({ 
  url: '...',
  method: 'POST'
})
nameCallback

You could pass a callback to customize final name, the function receive as 1st argument the name automatically extracted.

new JsFileDownloader({ 
  url: '...',
  nameCallback: function(name) {
    return 'i-am-prefix-' + name;
  }
})

Download Details:

Author: AleeeKoi

Source Code: https://github.com/AleeeKoi/js-file-downloader

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.