3
Does anyone know of a plugin that allows previewing TXT, PDF, DOC, and XLS files to display on a web page?
In the example image, a PDF and an image are displayed
1 answer
3
Dude, there’s 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 configure an advanced file/upload selector control built to work especially with CSS3 Bootstrap styles. It improves file entry functionality even further by providing support for previewing a wide variety of files, namely images, text, html, video, audio, flash and objects. In addition, it includes AJAX based uploads, drag-drop files, viewing the upload progress, and selectively viewing, adding or deleting files. :
http://plugins.krajee.com/file-input
Another option would be to use this robust API: http://filepreviews.io/
Beginning
The Filepreviews.io service is composed of a very simple organized API aimed at REST.
It 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)
})
Upshot:
{
"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
}
-
1
Dude ball show, that’s what I want, too bad the other forum guys don’t understand much and think it’s not programming. I will start using http://filepreviews.io/. Vlw
-
Too bad people don’t have so much patience....
Browser other questions tagged html thumbnail
You are not signed in. Login or sign up in order to post.
Can you be more specific? tell us more about your problem and share the code you’ve produced.
– Felipe Assunção
Actually Felipe, I didn’t implement anything related, I couldn’t find anything related. I have several files in a folder, among them, pdf, xls, doc, jpg, png, among others, I need to display them in miniature, showing part or its content.
– sNniffer
+1 I think it’s a good question. I have no idea how to do it. I’m very curious to know how to do it. Too bad the question is to be closed, probably is missing "than you have ever tried".
– Franchesco