# file-upload-thumbnail

> Create thumbnails from uploading files (image/video)

Latest version **0.1.3** (published 2023-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install file-upload-thumbnail
pnpm add file-upload-thumbnail
yarn add file-upload-thumbnail
bun add file-upload-thumbnail
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-03-06 |
| First published | 2016-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Anton Pawlik |
| Maintainers | antpaw |
| Keywords | file, upload, preview, thumbnail |

## Links

- npm: https://www.npmjs.com/package/file-upload-thumbnail
- Repository: https://github.com/antpaw/file-upload-thumbnail
- Homepage: https://github.com/antpaw/file-upload-thumbnail#readme
- Issues: https://github.com/antpaw/file-upload-thumbnail/issues
- npm.io page: https://npm.io/package/file-upload-thumbnail

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-03-06
- 0.1.2 — 2023-03-06
- 0.1.1 — 2019-09-07
- 0.1.0 — 2017-08-31
- 0.0.3 — 2016-07-26

## README

# file-upload-thumbnail
[![npm version](https://badge.fury.io/js/file-upload-thumbnail.svg)](https://www.npmjs.com/package/file-upload-thumbnail) [![Build Status](https://travis-ci.org/antpaw/file-upload-thumbnail.svg?branch=master)](https://travis-ci.org/antpaw/file-upload-thumbnail)

Create thumbnails from uploading files (image/video).

Extracted from [Dropzone](http://www.dropzonejs.com/).

## Install

```bash
$ npm install --save file-upload-thumbnail
```

## Usage

Below is a example of usage.

```javascript
var FileUploadThumbnail = require('file-upload-thumbnail');
document.getElementById('file').addEventListener('change', function(e) {
  e.preventDefault();
  if (e.target.files) {
    Array.prototype.slice.call(e.target.files).forEach(function(file){
      new FileUploadThumbnail({
        maxWidth: 500,
        maxHeight: 40,
        file: file,
        onSuccess: function(src){
          document.getElementById('preview_image').src = src || '';
        }
      }).createThumbnail();
    });
  }
  e.target.value = null;
  return false;
});
```

## Options

### new Instance(options)

#### `file`
type: `File`  
the file selected from the input or a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) instance

#### `onSuccess(src)` (optional)
type: `Function`  
default: `undefined`
callback, parameter `src` is base64 `String` representing the thumbnail image

#### `onError` (optional)
type: `Function`  
default: `undefined`
callback

#### `maxWidth` (optional)
type: `Int`  
default: `undefined`  
maximal width of the thumbnail, if `undefined`, the ratio of the image will be used to calculate it.

#### `maxHeight` (optional)
type: `Int`  
default: `undefined`  
the same as `maxHeight`. If both (`maxWidth` and `maxHeight`) are `undefined`, images will not be resized.


### instance.createThumbnail()
### instance.createThumbnailFromImageFile()
### instance.createThumbnailFromVideoFile()

---
_Source: https://npm.io/package/file-upload-thumbnail · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._