10 Useful HTML File Upload Tips

[[351004]]

The ability to upload files is a key requirement for many web and mobile applications. From uploading photos to social media to posting resumes to job portals, file uploads are everywhere.

As a web developer, we must know that HTML provides native file upload support with a little help from JavaScript. In HTML5, the File API is added to the DOM. With it, we can read FileList and the File objects in it, which solves multiple use cases for files, i.e. loading files locally or sending them over the network to a server for processing, etc.

In this article, we will discuss 10 uses of HTML file upload support, I hope you find it useful.

If at any time you would like to use these file upload features, you can find them here:

HTML file upload demo: https://html-file-upload.netlify.app/

The source code for this demo is in my Github repository, please feel free to follow me and keep updating the code with examples, and give a 👍 if you find it useful.

Source code repository: https://github.com/atapas/html-file-upload

1. Single file upload

We can specify the input type as file to use the file uploader functionality in our web application.

 <input type= "file" id= "file-uploader" >

The input file type enables users to upload one or more files via a button, by default it allows uploading a single file using the operating system's native file browser.

After the upload is successful, the File API can use simple JavaScript code to read the File object. To read the File object, we need to listen to the change event of the file uploader.

First, get the file uploader instance by ID

 const fileUploader = document.getElementById( 'file-uploader' );

Then add a change event listener to read the file object after the upload is complete. We get the uploaded file information from the event.target.files property.

 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files);
 });

Watch the output in the browser console and notice that the File objects in the FileList array have all the metadata information for the uploaded files.

Here is the code page for the same example for further study

CodePen: https://codepen.io/atapas/pen/rNLOyRm

 <div>
 <h1>Single file upload</h1>
  <input type= "file" id= "file-uploader" >
 <p>Upload the file and view the output in the browser console. </p>
 <p id= "feedback" ></p>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files); 
   
  const feedback = document.getElementById( 'feedback' );
  const msg = `File ${files[0]. name } uploaded successfully!`;
 feedback.innerHTML = msg;
 });

2. Upload multiple files

We can upload multiple files at once. To do this, we just need to add an attribute called multiple to the input file tag.

 <input type= "file" id= "file-uploader" multiple />

Now, the file browser will allow you to upload one or more files to upload. Just like the previous example, you can add a change event handler to capture the uploaded file information. Did you notice that FileList is an array? Yes, for multiple file uploads, the array will have the following information:

Below is a link to a CodePen that explores multiple file uploads.

CodePen: https://codepen.io/atapas/pen/MWeamYp

 <div>
 <h1>Multiple file uploads</h1>
  <input type= "file" id= "file-uploader" multiple>
 <p>Upload multiple files and view the output in the browser console</p>
 <p id= "feedback" ></p>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files); 
   
 // show the upload feedback
  const feedback = document.getElementById( 'feedback' );
  const msg = `${files.length} file(s) uploaded successfully!`;
            feedback.innerHTML = msg;
 });

3. Understand file metadata

Whenever we upload a file, the File object has metadata information like file name, size, last updated time, type etc. This information is useful for further validation and decision making.

 // Get the file uploader by id
 const fileUploader = document.getElementById( 'file-uploader' ); 
 
 // Listen for change events and read metadata
 fileUploader.addEventListener( 'change' , (event) => {
 // Get the FileList array
  const files = event.target.files; 
 
 // Loop through the files and get the metadata
 for (const file of files) {
 const name = file.name ;
    const type = file.type ? file.type: 'NA' ;
 const size = file.size ;
    const lastModified = file.lastModified;
    console.log({ file, name , type, size , lastModified});
 }
 });

Here is the output for a single file upload:

Use this CodePen to explore further

CodePen: https://codepen.io/atapas/pen/gOMaRJv

 <div>
  <h1> Read File Metadata</h1>
  <input type= "file" id= "file-uploader" >
 <p id= "feedback" ></p>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files); 
   
 for (const file of files) {
 const name = file.name ;
    const type = file.type ? file.type : 'NA' ;
 const size = file.size ;
    const lastModified = file.lastModified;
    console.log({file, name , type, size , lastModified}); 
     
    const feedback = document.getElementById( 'feedback' );
    const msg = ` File Name : ${ name } <br/>
              File Size : ${ size } <br/>
              File type: ${type} <br/>
              File Last Modified: ${new Date (lastModified)}`; 
               
 feedback.innerHTML = msg;
 }
 });

4. Understand the file accept attribute

We can use the accept attribute to restrict the types of files to be uploaded. You may want to only allow png format images to be browsed when users upload their profile pictures.

 <input type= "file" id= "file-uploader" accept= ".jpg, .png" multiple>

In the above code, the file browser will only allow files with extensions jpg and png.

Note that in this case the file browser will automatically set the file selection type to Custom instead of All. However, you can always change it back to All Files if needed.

Explore the accept attribute with this CodePen

CodePen: https://codepen.io/atapas/pen/OJXymRP

 <div>
 <h1>Only .png and .jpg files can be selected</h1>
  <input type= "file" id= "file-uploader" accept= ".jpg, .png" multiple>
  <p>Upload files and see the output   in browser console
 </div>

 const fileUploader = document.getElementById( 'file-uploader' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files);
 });

5. Manage file content

You can display the file contents after the file has been successfully uploaded. For profile pictures, it can be confusing if you don't show the uploaded image to the user immediately after uploading.

We can use the FileReader object to convert the file into a binary string. Then add a load event listener to get the binary string when the file is successfully uploaded.

 // Get an instance of FileReader
 const reader = new FileReader(); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
 const file = files[0]; 
 
 // Get the file object after uploading and read it
 // data as a URL binary string
 reader.readAsDataURL(file); 
 
 // After loading, process the string
  reader.addEventListener( 'load' , (event) => {
 // Here we create an image tag and add the image
    const img = document.createElement( 'img' );
    imageGrid.appendChild(img);
    img.src = event.target.result;
 img.alt = file.name ;
 });
 });

Try selecting an image file in the CodePen below and see it render.

CodePen: https://codepen.io/atapas/pen/zYBvdjZ

 <div>
 <h1>Show file contents</h1>
  <input type= "file" id= "file-uploader" accept= ".jpg, .jpeg, .png" >
  <div id= "image-grid" ></div>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' );
 const reader = new FileReader();
 const imageGrid = document.getElementById( 'image-grid' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
 const file = files[0];
 reader.readAsDataURL(file); 
   
  reader.addEventListener( 'load' , (event) => {
    const img = document.createElement( 'img' );
    imageGrid.appendChild(img);
    img.src = event.target.result;
 img.alt = file.name ;
 });
 });

6. Verify file size

As we can see, we can read the size metadata of the file, which can actually be used for file size validation, where you might allow users to upload image files up to 1MB in size. Let’s see how we can achieve this.

 //Listener for file upload change event
 fileUploader.addEventListener( 'change' , (event) => {
 // Read the file size
  const file = event.target.files[0];
 const size = file.size ; 
 
 let msg = '' ; 
 
 // Check if the file size is greater than 1MB and prepare a message.
 if ( size > 1024 * 1024) {
      msg = `<span style= "color:red;" >The allowed file size   is 1MB. The file you are trying to upload is   of ${returnFileSize( size )}</span>`;
 } else {
      msg = `<span style= "color:green;" > A ${returnFileSize( size )} file has been uploaded successfully. </span>`;
 } 
 
 // Display a message to the user
 feedback.innerHTML = msg;
 });

Try uploading files of different sizes to see how the validation works.

CodePen: https://codepen.io/atapas/pen/pobjMKv

 <div>
 <h1>Check file size</h1>
  <input type= "file" id= "file-uploader" > 
   
 <div id= "feedback" ></div
 </div>

 const fileUploader = document.getElementById( 'file-uploader' );
 const feedback = document.getElementById( 'feedback' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const file = event.target.files[0];
  console.log( 'file' , file); 
   
 const size = file.size ;
  console.log( 'size' , size );
 let msg = '' ; 
   
 if ( size > 1024 * 1024) {
    msg = `<span style= "color:red;" >The allowed file size   is 1MB. The file you are trying to upload is   of ${returnFileSize( size )}</span>`;
 } else {
    msg = `<span style= "color:green;" > A ${returnFileSize( size )} file has been uploaded successfully. </span>`;
 }
 feedback.innerHTML = msg;
 }); 
 
 function returnFileSize(number) {
 if(number < 1024) {
 return number + 'bytes' ;
  } else if(number >= 1024 && number < 1048576) {
 return (number/1024).toFixed(2) + 'KB' ;
  } else if(number >= 1048576) {
 return (number/1048576).toFixed(2) + 'MB' ;
 }
 }

7. Display file upload progress

Better usability is to let your users know the progress of the file upload. Now, we know FileReader and the events for reading and loading files.

 const reader = new FileReader();

FileReader has another event called progress to let us know how much has been loaded. We can use the HTML5 progress tag to create a progress bar with this information.

 reader.addEventListener( 'progress' , (event) => {
  if (event.loaded && event.total) {
 // Calculate the completion percentage
    const percent = (event.loaded / event.total) * 100;
 // Set the value to the progress component
 progress.value = percent;
 }
 });

Why don’t you try uploading a larger file and see how the progress bar works in the CodePen below? Give it a try.

CodePen: https://codepen.io/atapas/pen/eYzpwYj

 <div>
  <h1>File upload progress</h1>
  <input type= "file" id= "file-uploader" > 
   
 <div id= "feedback" ></div> 
   
 <label id= "progress-label"   for = "progress" ></label>
  <progress id= "progress" value= "0"   max = "100" > </progress>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' );
 const feedback = document.getElementById( 'feedback' );
 const progress = document.getElementById( 'progress' ); 
 
 const reader = new FileReader(); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
 const file = files[0];
 reader.readAsDataURL(file); 
   
  reader.addEventListener( 'progress' , (event) => {
    if (event.loaded && event.total) {
      const percent = (event.loaded / event.total) * 100;
      progress.value = percent;
      document.getElementById( 'progress-label' ).innerHTML = Math.round(percent) + '%' ; 
       
 if (percent === 100) {
        let msg = `<span style= "color:green;" >File <u><b>${file. name }</b></u> has been uploaded successfully.</span>`;
        feedback.innerHTML = msg;
 }
 }
 });
 });

8. What about directory upload?

Can we upload entire directories? Well, it is possible, but there are some limitations. There is a non-standard property called webkitdirectory (at least at the time of writing this article) that allows us to upload entire directories.

Although initially implemented only for WebKit-based browsers, WebKitDirectory is also available in Microsoft Edge and Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no other choice.

You can specify this property as

 <input type= "file" id= "file-uploader" webkitdirectory />

This will allow you to select a folder (aka directory)

Users must provide confirmation information to upload a directory.

Once the user clicks the Upload button, the upload will take place. An important thing to note here is that the FileList array will contain information about all the files in the upload directory in a flat structure. But the key is that for each File object, the webkitRelativePath property will have the directory path.

For example, let's consider a main directory and other folders and files under it,

Now, the File object will have the webkitRelativePath populated as

You can use it to present folders and files in any UI structure of your choice. Use this CodePen to explore further.

CodePen: https://codepen.io/atapas/pen/dyXYRKp

 <div>
 <h1>Upload directories</h1>
  <input type= "file" id= "file-uploader" webkitdirectory /> 
   
 <ul id= "pathList" ></ul>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' );
 const pathList = document.getElementById( 'pathList' ); 
 
 function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
 }
 } 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
  console.log( 'files' , files); 
   
  removeAllChildNodes(pathList); 
   
  [...files].forEach((file, index ) => {
    let path = document.createElement( 'li' );
    path.innerHTML = file.webkitRelativePath;
    pathList.appendChild(path);
 });
 });

9. Let's drag and drop upload

Not supporting drag and drop functionality for file uploads is kind of an old fashioned way of doing things, isn’t it? Let’s see how to achieve this in a few simple steps.

First, create a drop zone and an optional area to display the uploaded file content. We will use an image as the file to be dropped here.

 <div id= "container" >
  <h1>Drag & Drop an Image</h1>
 <div id= "drop-zone" >
 DROP HERE
 </div> 
 
 <div id= "content" >
    Your image to appear here..
 </div>
 </div>

Get the drag and content areas by their respective IDs.

 const dropZone = document.getElementById( 'drop-zone' );
 const content = document.getElementById( 'content' );

Add a dragover event handler to show the effect of the content being copied.

 dropZone.addEventListener( 'dragover' , event => {
 event.stopPropagation();
 event.preventDefault();
  event.dataTransfer.dropEffect = 'copy' ;
 });

Next, we define what we want to do when the image is dropped. We will need a drop event listener to handle this.

 dropZone.addEventListener( 'drop' , event => {
 // Get the file
  const files = event.dataTransfer.files; 
 
 // Now, we can do everything possible to display the file contents in an HTML element, such as a DIV.
 });

Try dragging and dropping an image file in the CodePen example below and see how it works, and don’t forget to look at the code to render the dragged and dropped image.

CodePen: https://codepen.io/atapas/pen/ExyVoXN

 <div id= "container" >
  <h1>Drag & Drop an Image</h1>
  <div id= "drop-zone" > DROP HERE </div>
  <div id= "content" >Your image to appear here.. </div>
 </div>

 const dropZone = document.getElementById( 'drop-zone' );
 const content = document.getElementById( 'content' ); 
 
 const reader = new FileReader(); 
 
 if (window.FileList && window.File) {
  dropZone.addEventListener( 'dragover' , event => {
 event.stopPropagation();
 event.preventDefault();
    event.dataTransfer.dropEffect = 'copy' ;
 }); 
   
  dropZone.addEventListener( 'drop' , event => {
 content.innerHTML = '' ;
 event.stopPropagation();
 event.preventDefault();
    const files = event.dataTransfer.files;
 console.log(files); 
     
    reader.readAsDataURL(files[0]); 
   
    reader.addEventListener( 'load' , (event) => {
      content.innerHTML = '' ;
      const img = document.createElement( 'img' );
      img.style.height = '400px' ;
      img.style.width = '400px' ;
      content.appendChild(img);
      img.src = event.target.result;
 img.alt = file.name ; 
       
 });
 });
 }

10. Use objectURLs to process files

There is a special method called URL.createObjectURL() that can create a unique URL from a file, and you can also release it using the URL.revokeObjectURL() method.

The DOM URL.createObjectURL() and URL.revokeObjectURL() methods let you create simple URL strings that can be used to reference any data that can be referenced using a DOM file object, including local files on the user's computer.

A simple usage of an object URL is:

img.src = URL.createObjectURL(file);

Use this CodePen to explore object URLs further. Tip: Compare this method to the one mentioned earlier in #5.

 <div>
 <h1>Use Object URL</h1>
  <input type= "file" id= "file-uploader" accept= ".jpg, .jpeg, .png" > 
   
  <div id= "image-grid" ></div>
 </div>

 const fileUploader = document.getElementById( 'file-uploader' );
 const reader = new FileReader();
 const imageGrid = document.getElementById( 'image-grid' ); 
 
 fileUploader.addEventListener( 'change' , (event) => {
  const files = event.target.files;
 const file = files[0]; 
   
  const img = document.createElement( 'img' );
 imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
 img.alt = file.name ;
 });

Finish

Many times, native HTML functionality is more than enough to handle the use case at hand. I find that file uploads provide a lot of nice options by default.

Original article: https://dev.to/atapas/10-useful-html-file-upload-tips-for-web-developers-2d1d

This article is reprinted from the WeChat public account "Front-end Full Stack Developer". You can follow it through the QR code below. To reprint this article, please contact the WeChat public account "Front-end Full Stack Developer".