Show thumbnails of files [closed]

Man, there is the Bootstrap File Input:

HTML 5 for Bootstrap 3.x with preview for multiple files, offers multiple selection, and more. The plugin allows you a simple way to set up an advanced file upload / upload control built to work especially with CSS3 Bootstrap styles. It enhances file entry functionality even further by offering support for previewing a wide variety of files, ie, images, text, html, video, audio, and flash objects. In addition, it includes AJAX-based uploads, drag-drop files, viewing the upload progress, and selectively viewing, adding, or deleting files. :

link

Another option would be to use this robust API: link

Getting Started

The FilePreviews.io service is composed of a very simple, organized REST-oriented API.

Can be used to request a preview, which happens asynchronously. The returned results are useful for different scenarios, allowing you to view the requested metadata and check if they are available, or use webhooks.

JSON will be returned in all responses from the API, including errors.

Basic example:

Code:

import FilePreviews from 'filepreviews'

const fp = new FilePreviews({
  debug: true,
  apiKey: 'XXXX-YOUR-SERVER-KEY-HERE-XXXX',
  apiSecret: 'XXXX-YOUR-SERVER-SECRET-KEY-HERE-XXXX'
})

const options = {
  pages: "all",
  format: "png"
}

fp.generate('https://www.filepicker.io/api/file/asTSNPAiR4qnknj7UgAP', options (err, result) => {
  if (err) throw new Error(err)
  console.log(result)
})

Result:

{
  "id": "46d6fbcf-83be-47ee-9eb1-2579f1d1a306",
  "url": "https://api.filepreviews.io/v2/previews/46d6fbcf-83be-47ee-9eb1-2579f1d1a306/",
  "status": "success",
  "preview": {
    "url": "https://s3.amazonaws.com/demo.filepreviews.io/dcc8ad4e46ffecf17474466cba8fa9de9c7beda2fb0518d8fe5440b4ee38db81/46d6fbcf-83be-47ee-9eb1-2579f1d1a306_original_1.png",
    "size": {
      "height": "842",
      "width": "595"
    },
    "page": 1,
    "original_size": {
      "height": "842",
      "width": "595"
    },
    "requested_size": "original",
    "resized": false
  },
  "thumbnails": [
    {
      "url": "https://s3.amazonaws.com/demo.filepreviews.io/dcc8ad4e46ffecf17474466cba8fa9de9c7beda2fb0518d8fe5440b4ee38db81/46d6fbcf-83be-47ee-9eb1-2579f1d1a306_original_1.png",
      "size": {
        "height": "842",
        "width": "595"
      },
      "page": 1,
      "original_size": {
        "height": "842",
        "width": "595"
      },
      "requested_size": "original",
      "resized": false
    }
  ],
  "original_file": {
    "metadata": {
    },
    "encoding": "binary",
    "name": "JSday Recife",
    "extension": "pdf",
    "total_pages": 1,
    "size": 39736,
    "type": "application",
    "mimetype": "application/pdf"
  },
  "user_data": null
}