![](\"https://raw.githubusercontent.com/johndatserakis/file-upload-with-preview/master/public/file-upload-with-preview.jpg\")
\n ![\"NPM](\"https://img.shields.io/npm/v/file-upload-with-preview.svg\")
\n ![\"NPM](\"https://img.shields.io/npm/dm/file-upload-with-preview.svg\")
\n ![\"License\"](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n \n ![\"Tweet\"](\"https://img.shields.io/twitter/url/https/github.com/johndatserakis/file-upload-with-preview.svg?style=social\")
\n
yarn add file-upload-with-preview\n
Button to reset the instance
\nMain container for the instance
\nDisplay panel for the images
\nHidden input
\nVisible input
\nThe id you set for the instance
Generated using TypeDoc
Generated using TypeDoc
🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.
\n\n \n \n \n \n \n
yarn add file-upload-with-preview\nOr, you can include it through the browser.
\n<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/file-upload-with-preview/dist/style.css"
/>
<script src="https://unpkg.com/file-upload-with-preview/dist/index.js"></script>\nThis is a simple frontend utility meant to help the file-upload process on your website.
\nIt is written in pure JavaScript using TypeScript and has no dependencies. You can check out the live demo here.
\nFor the most part, browsers do a good job of handling image-uploads. That being said - I find the ability to show our users a preview of their upload can go a long way in increasing the confidence in their upload.
\nfile-upload-with-preview aims to address the issue of showing a preview of a user's uploaded image in a simple to use package.
multiple gridcachedFileArray (always will be an array) property of your FileUploadWithPreview object.FileUploadWithPreview object with its own uniqueId - this way you can have multiple file-uploads on the same page. You also can just use a single input designated with a multiple property to allow multiple files on the same input.This library looks for a specific HTML element to display the file-upload. Simply add the below div to your HTML. Make sure to populate your unique id in the data-upload-id attribute.
<div class="custom-file-container" data-upload-id="my-unique-id"></div>\nThen, initialize your file-upload in the JavaScript like below:
\nimport { FileUploadWithPreview } from 'file-upload-with-preview';
import 'file-upload-with-preview/dist/style.css';
const upload = new FileUploadWithPreview('my-unique-id');\nUsage with Next.js / Tailwind :
\n'use client';
import { useEffect } from 'react';
import { FileUploadWithPreview } from 'file-upload-with-preview';
import 'file-upload-with-preview/dist/style.css';
export default function Uploader() {
useEffect(() => {
const upload = new FileUploadWithPreview('my-unique-id');
}, []);
return <div className="custom-file-container" data-upload-id="my-unique-id"></div>;
}\nIf you're importing directly in the browser, use the following instead:
\n<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/file-upload-with-preview/dist/style.css"
/>
</head>
<body>
<div class="custom-file-container" data-upload-id="my-unique-id"></div>
<script src="https://unpkg.com/file-upload-with-preview/dist/index.js"></script>
</body>
</html>\nThen initialize like this:
\nconst upload = new FileUploadWithPreview.FileUploadWithPreview('my-unique-id');\nThen when you're ready to use the user's file for an API call or whatever, just access the user's uploaded file/files in the cachedFileArray property of your initialized object like this:
upload.cachedFileArray;\nYou can optionally trigger the image browser and clear selected images programmatically. There are additional methods on the class if you'd like to take a look at the source code.
\nupload.emulateInputSelection(); // to open image browser
upload.resetPreviewPanel(); // clear all selected images\nYou may also want to capture the event when an image is selected.
\nimport { Events, ImageAddedEvent } from 'file-upload-with-preview';
window.addEventListener(Events.IMAGE_ADDED, (e: Event) => {
const { detail } = e as unknown as ImageAddedEvent;
console.log('detail', detail);
});\nThe cachedFileArray property is always an array. So if you are only allowing the user to upload a single file, you can access that file at cachedFileArray[0] - otherwise just send the entire array to your backend to handle it normally.
Make sure to pass in multiple: true in your options if you want to allow the user to select multiple images.
View the full docs here.
\n\n\nSee the full example in the ./example/index.ts folder. See the top of this README for some links to a few live CodeSandbox's.
If you are supporting a browser like IE11, one way to add a polyfill for fetch and promise is by adding the following in the bottom of your index.html:
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>\n# Install dependencies
yarn
# Watch changes during local development
yarn dev
# Run tests
yarn test
# Build library
yarn build\nGo ahead and fork the project! Submit an issue if needed. Have fun!
\n\n\nGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional backgroundBackground image for image grid
\n\nDEFAULT_BACKGROUND_IMAGE
\nOptional basePlaceholder image
\n\nDEFAULT_BASE_IMAGE
\nOptional successAlternate file upload image
\n\nDEFAULT_SUCCESS_FILE_ALT_IMAGE
\nOptional successPDF upload image
\n\nDEFAULT_SUCCESS_PDF_IMAGE
\nOptional successVideo upload image
\n\nDEFAULT_SUCCESS_VIDEO_IMAGE
\nGenerated using TypeDoc
Options to customize the library
\nOptional acceptType of files to accept in your input
\n\n'*'
\nOptional imagesConfigurable images for the library
\nOptional maxSet a maximum number of files you'd like the component to deal with. Must be > 0 if set. By default there is no limit.
0
\nOptional multipleSet to true if you want to allow the user to selected multiple images. Will use grid view in the image preview if set.
false
\nOptional presetProvide an array of image paths to be automatically uploaded and displayed on page load (can be images hosted on server or URLs)
\n\n[]
\nOptional showShow a delete button on images in the grid
\n\ntrue
\nOptional textConfigurable text for the library
\nGenerated using TypeDoc
Optional browseBrowse button text
\n\n"Browse"
\nOptional choosePlaceholder text
\n\n"Choose file..."
\nOptional labelMain input label text
\n\n"Upload"
\nOptional selectedCount descriptor text. Defaults to ${ n } files selected.
"files selected"
\nGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
yarn add file-upload-with-preview\n
Currently selected files
\n\nDefault
[]
\n