Normal Programming Mistake


    1.4.2 • Public • Published

    widjet-file-upload Build Status codecov

    A widget to display and upload files in a form.


    npm install --save widjet-file-upload


    import widgets from 'widjet'
    import 'widjet-file-upload'
    widgets('file-preview', 'input[type="file"]', {on: 'load'})
    widgets('file-versions', 'input[type="file"][data-versions]', {
      on: 'load',
      versionsProvider: (el) =>
          ? JSON.parse(el.getAttribute('data-versions'))
          : {},
      versionBoxesProvider: (el) =>
          ? JSON.parse(el.getAttribute('data-version-boxes'))
          : {}
      onVersionsChange: (input, versions) =>
        console.log('versions of', input, 'have been changed to', versions)

    This package exports two widgets, file-preview and file-versions.

    The former is used to provide a preview of a file picked using a file input.

    The latter is used to edit various versions of an uploaded image.

    Both widgets works on a file input, but file-versions will require that you enable file-preview beforehand on an input to be effective.

    File Preview

    The file-preview widget wraps a file input into a file-input div that will be used to display a file preview and various information about the picked file. It also listens to the change event and will attempt to generate a preview for that file based on the defined previewers.


    The file-preview widget rely on the FileReader API and will be constrained by its support. This can be handled using the following condition:

    widgets('file-preview', 'input[type="file"]', {
      on: 'load',
      if: window.FileReader != undefined


    Name Type Description
    previewers array An array of custom previewers to use. See below for documentation on how previewers work.
    wrap function A function that takes the target element as attribute and should wrap it into the preview component. The function must return the generated wrapper element.
    previewSelector string A CSS selector string to retrieve the preview container where appending the generated previews.
    nameMetaSelector string A CSS selector string to retrieve the element where the picked file name should be displayed.
    mimeMetaSelector string A CSS selector string to retrieve the element where the picked file mime type should be displayed.
    dimensionsMetaSelector string A CSS selector string to retrieve the element where the picked file dimensions should be displayed. This element will only be filled if the picked file is an image.
    sizeMetaSelector string A CSS selector string to retrieve the element where the picked file size on disk should be displayed.
    progressSelector string A CSS selector string to retrieve the progress bar element used to display the preview generation progress.
    resetButtonSelector string A CSS selector string to retrieve the button used to clear the field of its value.
    formatSize function A function that takes a file size as an integer and should return a humanized version of that size.
    formatDimensions function A function that takes an image element and should return a humanized version of its dimensions.

    Custom Previewers

    A previewer is an array containing two functions. The first function is the predicate that, with an object as input, will tell whether the preview can be generated using the second function.

    The function takes also an object as input and must returns a Promise that will resolve with the generated preview. The promise might resolve with either a DOM node or undefined if there's no preview for the file (this is the default behaviour of the catch all previewer).

    The object passed to the two functions have the following properties:

    Name Type Description
    file File The file for which generating the preview.
    onprogress function A function that be used to notify the widget of the preview generation progress.

    Here's an example with a previewer that handles text files and will generates a pre tag with the file content:

    const textPreviewer = [o => o.file.type === 'text/plain', getTextPreview]
    function getTextPreview ({file, onprogress}) {
      return new Promise((resolve, reject) => {
        const reader = new window.FileReader()
        reader.onload = (e) => {
          const pre = document.createElement('pre')
          pre.textContent =
        reader.onerror = reject
        reader.onprogress = onprogress

    Default Previewers

    Currently, there's only two default previewers, the image previewer that will match for image file types (image/jpeg, image/png, image/gif, image/bmp and image/svg+xml mime types) and the catch all previewer that doesn't generate preview.

    The package also comes with a couple of default preview functions that are not part of the default previewers:

    import {getTextPreview, getPDFPreview} from 'file-preview'
    const previewers = [
      [o => o.file.type === 'application/pdf', getPDFPreview],
      [o => o.file.type === 'text/plain', getTextPreview]
    widgets('file-preview', 'input[type="file"]', {on: 'load', previewers})

    Returns a pre tag with the file content.


    Returns an iframe with the PDF file in its src attribute as a data-uri. This allow browsers with PDF display ability to render the PDF file without the need to bring a PDF2HTML library.


    npm i widjet-file-upload

    DownloadsWeekly Downloads






    Unpacked Size

    466 kB

    Total Files


    Last publish


    • abe33