GET CONSULTING SUPPORT

Sign Up Free
Log In

Retrieve and Display File Metadata

 

Access comprehensive file metadata through Filestack’s JavaScript SDK immediately after upload. Pull file dimensions, MIME types, size, EXIF data, and storage location to build custom file management dashboards, enforce upload policies, or trigger downstream processing workflows based on file properties.

 
Sign Up Free
Plans & Pricing

Try it yourself:

The metadata() method of the client class retrieves a file’s metadata using its handle (ID).

Result

 
 

Terminal

 
 
npm install filestack-js tslib

HTML

CSS

#demo-parent{
 display: flex;
 gap:10px;
}

index.mjs

 
import * as filestack from "filestack-js";
//Replace Your_API_key with you API Key from DevPortal dev.filestack.com/login/
const client = filestack.init("Your_API_key");

//get the file handle
const element = document.getElementById('my-file'); 
const handleValue = element.getAttribute('data-handle'); 
	
//Get File Metadata
client.metadata(handleValue, {
  size: true,
  mimetype: true,
  filename: false,
  width: true,
  height: true,
  uploaded: false,
  writeable: false,
  cloud: false,
  sourceUrl: false,
  md5: false,
  sha1: false,
  sha224: false,
  sha256: false,
  sha384: false,
  sha512: false,
  location: false,
  path: false,
  container: false,
  exif: false,

}).then((response) => {
  let content = "
File Metadata
    ";
  for (const [key, value] of Object.entries(response)) {
    content += `
  • ${key}: ${value}`;
  }
  content += "
";
	      
  //display metadata    
  document.getElementById('my-file-data').innerHTML = content;
    
}).catch((error) => {
  console.error(error);
});

Start building your own file upload solution today.

Sign Up Free
Plans & Pricing

PREVIEW

Users can preview their uploaded files directly inside the File Picker.

CONNECT TO 20+ CLOUD DRIVES

Connect your app directly to AWS, Facebook, Dropbox, Instagram, and more.

PROGRESS BAR UPLOADS

Give your users confidence that their files are on the way to the right destination.

MULTI-FILE UPLOADS

Let your users upload multiple files at one time for speed and simplicity.

CUSTOM CSS

Filestack blends seamlessly into your website or app. Ask about white-labeling.

CLIENT-SIDE CROP

Users can crop files to perfection before sending them to your website or app.

UNLIMITED UPLOADING

Upload any file type, from any local or cloud source, at any scale.

WEBSITES & HTML

Filestack can even load web content from any public URL and capture the rendered page as an image. Perfect for generating screenshots, previews, or converting HTML-based content into other formats.

SECURE CLOUD STORAGE

Store uploads directly in your cloud storage for ease and accessibility.

"Being smart here, in my opinion, is seriously looking at Filestack to give you a fantastic uploading experience, while you spend your time on your product vision, not already-solved problems."

— CHRIS COYIER, FOUNDER OF CSS-TRICKS & CODEPEN