File upload is a common functionality many web applications provide to users. With file upload functionality, you may want to provide the users with the ability to view it on your web page. But the question remains:
How to display uploaded files in HTML using JavaScript? Also, how you can conveniently and efficiently achieve that.
This article describes how you can use a JavaScript file uploader and how Filestack can help you display the uploaded files easily with their components and API.
- How to Upload Files in JavaScript?
- Can You Use Filestack to Integrate a File Uploader?
- How Do I Display Uploaded Files in HTML Using JavaScript?
- Using Filestack
- How can Filestack help you?
How to Upload Files in JavaScript?
Let’s first see how you can upload files in JavaScript. The most common file types users need to upload are images and PDF documents.
First, you must add functionality to select the files from your desired location.
There are a few ways you can upload a file in JavaScript. If you use pure JavaScript, you can add the following HTML5 file selector and an upload button on your web page:
| <input id=“upload” type=“file” name=“upload” /> <button id=“btnUpload” onclick=“fileUpload()”> Upload File</button> Then you need to write the JavaScript function that triggers the file upload. <script> async function fileUpload() { let data= new FormData(); data.append(“file”, upload.files[0]); await fetch(‘/upload.php, { method: “POST”, body: data }); } </script> |
Finally, you must write the server-side code to handle the file upload. If you want to learn how to upload a CSV file in React JS, read this article.
Can You Use Filestack to Integrate a File Uploader?
However, writing file upload functionality from scratch can take time, especially if you want to achieve a sleek design for your uploader.
The easiest way to add file upload functionality for your UI is by using a third-party file upload library.
For example, you can use the Filestack File picker and its File API to get files selected, uploaded, and ready for delivery.
You just have to include our JavaScript SDK UMD module of Filestack API in your application code to start using the Filestack File Picker. For example:
| <script src=“//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js”></script> |
Then you can configure the client with your API Key:
| const client = filestack.init(YOUR_API_KEY); client.picker().open(); |
Once you have integrated the File Picker, you can use its API for uploading files anywhere you want. You just use JavaScript to provide one HTTP request from the file to upload the file into the cloud. The following is a sample API request you need to send to upload the file into the cloud.
| curl -X POST \ –data-binary @filename.png \ –header “Content-Type:image/png” \ “https://www.filestackapi.com/api/store/S3?key=MY_API_KEY” The following is a sample response you get from it. { “url”: “https://cdn.filestackcontent.com/s7tdGfE5RRKFUxwsZoYv”, “size”: 8331, “type”: “image/png”, “filename”: “watermark.png”, “key”: “a1RyBxiglW92bS2SRmqM_watermark.png” } Also, you can use a URL as a file name for this API. |
How Do I Display Uploaded File in HTML Using JavaScript?
Once you have designed your file upload functionality, you need to find a way to display the uploaded file in HTML using JavaScript. Some websites may need to display to the user as and when the user uploaded the document.
Some websites may click on the uploaded document and let users preview the uploaded file in a separate window.
Whatever way you want to display the file, you want to achieve that with less coding. Let’s see how to display an image in pure JavaScript.
First, create the place where you want to display the uploaded file:
| <div id =‘display_file’ > <div> const file = document.querySelector(‘#upload’); Var uploadedFile = “”; file.addEventListener(‘change’ , function () { const reader = new FileReader(); reader.addEventeListener (‘load’, function () { uploadedFile = reader.result; document.querySelector(‘#display_file’).style.backgroundImage = url ({uploadedFile}); reader.readDataURL(this.files[0]); }) }) |
Read this article to learn how to read uploaded file content in JavaScript.
Using Filestack
The above code will display the uploaded image file within the webpage. However, there are many easy ways you can do that using a third-party JavaScript library in many easy ways.
For example, Filestack offers a document viewer from which you can display the uploaded file to the user in the browser.
It combines its processing engine with a custom solution built on Mozilla’s PDF.js and supports many file types, including PDF files (PDF), PowerPoint files (PPT, PPTX), Excel files (XLS, XLSX), Word files (DOC, DOCX, Image files (gif, tiff, jpg, jpeg, png), and more.
To view the files in HTML, you need to include the following file in your HTML code as an iframe element. For example:
| <iframe style=“width:100%;height:600px;” src=“https://cdn.filestackcontent.com/preview/SGe380ViQ7W8efiX6sdG”> </iframe> |
Then you can use the Filestack JavaScript client for a convenient preview method to generate and embed these URLs.
Not only this simple functionality, but you can also introduce some more advanced functionalities to your file preview part.
Suppose you have uploaded a PDF file that has many pages in it or a large image, and you can only see a part of the image file when loaded into your preview page.
Then, you need to add a slider that enables your clients to navigate the file easily, and an image slider is the best solution to achieve that.
For example, you can also use Filestack to preview files in the browser in a slide view. Use the following slide processing API task by embedding it into an iframe element:
https://cdn.filestackcontent.com/slide/HANDLE
How can Filestack help you display uploaded files in HTML using JavaScript?
Previewing or displaying the uploaded files is an essential functionality many websites need to provide.
As discussed in this article, there are many ways you can achieve that. Using pure JavaScript and HTML, you can introduce a simple file picker, upload, and view functionalities. But it is convenient if you choose a third-party file uploader and upload API.
However, the reality of most JavaScript file upload APIs is not up to expectations. Filestack provides the functionality to display uploaded files in HTML using JavaScript, from which you can give intuitive file upload with a powerful API and file viewer you can integrate into your application.
