---
title: "Open local image files (JPG, PNG, TIFF) using JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-local-storage/"
md_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-local-storage.md"
last_updated: "2026-05-30T02:20:01.405Z"
description: "Learn how to open local PDF, MS Office, and image files using JavaScript in this comprehensive guide. Simple steps for developers and enthusiasts."
---

# Open local image files using JavaScript

### PDF

[PDF](https://www.nutrient.io/guides/web/open-a-document/from-local-storage.md)

### MS Office

[MS Office](https://www.nutrient.io/guides/web/open-a-document/office-from-local-storage.md)

### Image

[Image](https://www.nutrient.io/guides/web/open-a-document/image-from-local-storage.md)

In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s [local storage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it.

First export the document as an `ArrayBuffer`, and then store it as a Base64 string:

```js

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
	base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]);
}
window.localStorage.setItem('document', base64EncodedDocument);

```

You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to [`NutrientViewer.load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load):

```js

// Standalone mode: loads document from local storage
const base64EncodedDocument = window.localStorage.getItem('document');
NutrientViewer.load({
	container: "#pspdfkit",

	// `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
	document: `data:application/pdf;base64,${base64EncodedDocument}`
}).then((instance) => {
		console.log("Document loaded from local storage");
	}).catch((error) => {
		console.error("Failed to load document:", error);
	});

```

Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system?

Since uploaded files are received as `File` objects that share the `Blob` API, you can proceed similarly to how you do with `Blob`:

```js

// Standalone mode: loads file from user's local file system
// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
NutrientViewer.load({
	container: "#pspdfkit",

	document: documentFileObjectUrl
}).then((instance) => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
		console.log("File loaded successfully");
	}).catch((error) => {
		URL.revokeObjectURL(documentFileObjectUrl);
		console.error("Failed to load file:", error);
	});

```

It’s also possible to set the initial conditions of the viewer in the same configuration object by setting the [`initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState) property. For example, if you want to open a document on page 2 with the thumbnails sidebar open, do it like this:

```js

// Standalone mode: loads file with custom initial view state
// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
NutrientViewer.load({
	container: "#pspdfkit",

	document: documentFileObjectUrl,
	initialViewState: new NutrientViewer.ViewState({
		pageIndex: 2,
		sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
	})
}).then((instance) => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
		console.log("File loaded on page 2 with thumbnails");
	}).catch((error) => {
		URL.revokeObjectURL(documentFileObjectUrl);
		console.error("Failed to load file:", error);
	});

```

Here’s a complete example that accepts all Standalone-supported input file formats:

```html

<html>
	<head>
		<title>Open local file system PDF</title>
		<style>
			html,
			body {
				height: 100%;
			}
			#pspdfkit {

				height: 90%;
			}
		</style>
	</head>
	<body>
		<input
			type="file"
			accept="application/pdf,image/png,image/jpeg,image/tiff"
		/>
		<div id="pspdfkit"></div>
		<script
			src="/node_modules/pspdfkit/dist/pspdfkit.js"
			type="text/javascript"
		></script>
		<script type="text/javascript">
			document.addEventListener("change", function (event) {
				if (event.target.files.length === 1) {
					const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
					// Standalone mode: loads file with custom initial view state
					NutrientViewer.load({
						container: "#pspdfkit",

						document: documentFileObjectUrl,
						initialViewState: new NutrientViewer.ViewState({
							pageIndex: 2,
							sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
						})
					}).then((instance) => {
							// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
							URL.revokeObjectURL(documentFileObjectUrl);
							console.log("File loaded successfully");
						}).catch((error) => {
							URL.revokeObjectURL(documentFileObjectUrl);
							console.error("Failed to load file:", error);
						});
				}
			});
		</script>
	</body>
</html>

```

## Loading options

Open files in any [supported file format](https://www.nutrient.io/guides/web/about/file-type-support.md).

`NutrientViewer.load()` accepts the following configuration options:

- [`annotationTooltipCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.annotationTooltipCallback)

- [`customRenderers`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.customRenderers)

- [`electronicSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.electronicSignatures)

- [`annotationPresets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#annotationPresets)

- [`autoSaveMode`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#autoSaveMode)

- [`baseUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#baseUrl)

- [`container`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#container)

- [`customFonts`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#customFonts) (Standalone only)

- [`disableForms`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableForms)

- [`disableHighQualityPrinting`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableHighQualityPrinting)

- [`disableOpenParameters`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableOpenParameters)

- [`disableTextSelection`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableTextSelection)

- [`disableWebAssemblyStreaming`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableWebAssemblyStreaming) (Standalone only)

- [`document`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#document) (Standalone only)

- [`editableAnnotationTypes`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#editableAnnotationTypes)

- [`enableAutomaticLinkExtraction`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableAutomaticLinkExtraction) (Standalone only)

- [`enableServiceWorkerSupport`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableServiceWorkerSupport)

- [`formFieldsNotSavingSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#formFieldsNotSavingSignatures)

- [`headless`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#headless)

- [`initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState)

- [`instantJSON`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#instantJSON) (Standalone only)

- [`isEditableAnnotation`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableAnnotation)

- [`isEditableComment`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableComment)

- [`licenseKey`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#licenseKey) (Standalone only)

- [`locale`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#locale)

- [`maxDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxDefaultZoomLevel)

- [`maxPasswordRetries`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxPasswordRetries)

- [`minDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#minDefaultZoomLevel)

- [`overrideMemoryLimit`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#overrideMemoryLimit) (Standalone only)

- [`password`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#password)

- [`populateInkSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateInkSignatures)

- [`populateStoredSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateStoredSignatures)

- [`preventTextCopy`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#preventTextCopy)

- [`printMode`](https://www.nutrient.io/api/web/modules/NutrientViewer.html#.PrintMode)

- [`renderPageCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#renderPageCallback)

- [`serverUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#serverUrl)

- [`signal`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#signal)

- [`stampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#stampAnnotationTemplates)

- [`standaloneInstancesPoolSize`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#standaloneInstancesPoolSize) (Standalone only)

- [`styleSheets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#styleSheets)

- [`theme`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#theme)

- [`toolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarItems)

- [`toolbarPlacement`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarPlacement)

- [`trustedCAsCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#trustedCAsCallback) (Standalone only)

- [`XFDF`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDF) (Standalone only)

- [`XFDFKeepCurrentAnnotations`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDFKeepCurrentAnnotations) (Standalone only)

**Example**

```js

NutrientViewer.load({
  container: "#pspdfkit",

  document: documentUrl,
  toolbarItems: NutrientViewer.defaultToolbarItems.filter(item => item.type!== "print"),
  initialViewState: new NutrientViewer.ViewState({
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
  })
}).then((instance) => {
    console.log("Document loaded successfully");
  }).catch((error) => {
    console.error("Failed to load document:", error);
  });

```
---

## Related pages

- [Open documents from Document Engine](/guides/web/open-a-document/from-document-engine.md)
- [Open PDFs from Base64 in the browser using JavaScript](/guides/web/open-a-document/from-base64-data.md)
- [Open PDFs using DWS Viewer API](/guides/web/open-a-document/from-dws-viewer-api.md)
- [Open and display PDFs from a Blob using JavaScript](/guides/web/open-a-document/from-blob.md)
- [Open PDFs from an ArrayBuffer using JavaScript](/guides/web/open-a-document/from-arraybuffer.md)
- [Open local PDF files using JavaScript](/guides/web/open-a-document/from-local-storage.md)
- [Open image files from an array buffer using JavaScript](/guides/web/open-a-document/image-from-arraybuffer.md)
- [Open and display PDF files from a remote URL using JavaScript](/guides/web/open-a-document/from-remote-url.md)
- [Open Base64 image files using JavaScript](/guides/web/open-a-document/image-from-base64-data.md)
- [Open image files from a Blob using JavaScript](/guides/web/open-a-document/image-from-blob.md)
- [Open and display PDFs in the browser using JavaScript](/guides/web/open-a-document.md)
- [Open image files from a URL using JavaScript](/guides/web/open-a-document/image-from-remote-url.md)
- [Open Base64 MS Office files using JavaScript](/guides/web/open-a-document/office-from-base64-data.md)
- [Opening specific pages in PDFs using JavaScript](/guides/web/features/open-parameters.md)
- [Open MS Office files from an ArrayBuffer using JavaScript](/guides/web/open-a-document/office-from-arraybuffer.md)
- [Open MS Office files from a Blob using JavaScript](/guides/web/open-a-document/office-from-blob.md)
- [Temporary storage for PDF downloads](/guides/web/open-a-document/temp-storage.md)
- [Open local MS Office files using JavaScript](/guides/web/open-a-document/office-from-local-storage.md)
- [Open MS Office files from a URL using JavaScript](/guides/web/open-a-document/office-from-remote-url.md)