### Installing js-untar via NPM

Source: https://github.com/invokit/js-untar/blob/master/README.md

This snippet demonstrates how to install the `js-untar` library using the Node Package Manager (NPM). This command adds `js-untar` as a dependency to your project, making it available for use in your JavaScript applications.

```Shell
npm install js-untar
```

--------------------------------

### Extracting Tar Files with js-untar Progress and Success Callbacks

Source: https://github.com/invokit/js-untar/blob/master/README.md

This example shows how to use `js-untar` to extract content from an `ArrayBuffer`. It demonstrates chaining the `.progress()` method to handle individual files as they are extracted, and the `.then()` method to process all extracted files upon completion of the untar operation. The `sourceBuffer` should contain the binary data of the tar file.

```JavaScript
import untar from "js-untar";

// Load the source ArrayBuffer from a XMLHttpRequest (or any other way you may need).
var sourceBuffer = [...];

untar(sourceBuffer)
.progress(function(extractedFile) {
	... // Do something with a single extracted file.
})
.then(function(extractedFiles) {
	... // Do something with all extracted files.
});
```

--------------------------------

### Displaying Extracted Image using getBlobUrl()

Source: https://github.com/invokit/js-untar/blob/master/README.md

This example demonstrates how to use the `getBlobUrl()` method of an extracted `File` object. This method returns a unique `ObjectUrl` that can be directly assigned to the `src` attribute of an `<img>` tag or similar HTML elements, allowing easy display or use of the extracted binary data in the browser.

```JavaScript
document.getElementById("targetImageElement").src = file.getBlobUrl();
```

--------------------------------

### Extracting Tar Files with js-untar using Promise.then for All Callbacks

Source: https://github.com/invokit/js-untar/blob/master/README.md

This snippet illustrates an alternative way to handle the `js-untar` operation's outcomes using a single `.then()` call with three arguments: a success callback for all extracted files, an error callback for handling failures, and a progress callback for individual files. This provides a more traditional Promise-based interface for managing the extraction lifecycle.

```JavaScript
untar(sourceBuffer).then(
	function(extractedFiles) { // onSuccess
		... // Do something with all extracted files.
	},
	function(err) { // onError
		... // Handle the error.
	},
	function(extractedFile) { // onProgress
		... // Do something with a single extracted file.
	}
);
```

--------------------------------

### Initiating File Untarring on Click in JavaScript

Source: https://github.com/invokit/js-untar/blob/master/example/index.html

This function is triggered by a user interaction, likely a button click, to initiate the untarring process. It first resets the GUI's error display, then reads the selected file from an input element as an ArrayBuffer using FileReader. Upon successful reading, it calls an external `untar` function and handles both success (displaying extracted files) and failure (calling `onTarError`).

```JavaScript
function clickedUntar(e) {\n  // Reset GUI\n  document.getElementById('errorMessage').style.display = 'none';\n  // Get the uploaded File\n  const uploadedFile = document.getElementById('fileInput').files[0];\n  const reader = new FileReader();\n  reader.onload = function (event) {\n    untar(reader.result).then(\n      function (extractedFiles) {\n        // onSuccess\n        document.getElementById('results').textContent = JSON.stringify(extractedFiles, null, 2);\n      },\n      function (err) {\n        onTarError('Untar Error', err);\n      }\n    )\n  };\n  reader.onerror = function (event) {\n    console.log('FileReader Error', event);\n    onTarError('FileReader Error', event);\n  };\n  reader.readAsArrayBuffer(uploadedFile);\n}
```

--------------------------------

### Handling Untar Errors in JavaScript

Source: https://github.com/invokit/js-untar/blob/master/example/index.html

This function displays an error message on the web page when an untar operation fails. It clears any previous results and makes the error message visible, formatting it with a given title and the error details. It's a utility for user feedback.

```JavaScript
'use strict';\nfunction onTarError(title, err) {\n  // onError\n  document.getElementById('results').textContent = '';\n  document.getElementById('errorMessage').textContent = title + ' : \\n' + err;\n  document.getElementById('errorMessage').style.display = 'inherit';\n}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.