How to choose between `window.URL.createObjectURL()` and `window.webkitURL.createObjectURL()` based on browser?

When working with file blobs in JavaScript, different browsers may support different implementations of createObjectURL(). Modern browsers use window.URL.createObjectURL(), while older WebKit browsers used window.webkitURL.createObjectURL().

Browser Compatibility Issue

The webkitURL prefix was used in older versions of Chrome and Safari, while modern browsers have standardized on URL.createObjectURL().

Creating a Cross-Browser Wrapper Function

To handle both cases, create a wrapper function that checks for browser support:

<script>
function createObjectURL(file) {
   if (window.URL && window.URL.createObjectURL) {
      return window.URL.createObjectURL(file);
   } else if (window.webkitURL) {
      return window.webkitURL.createObjectURL(file);
   } else {
      return null;
   }
}

// Example usage with a file input
function handleFileSelect(event) {
   const file = event.target.files[0];
   if (file) {
      const url = createObjectURL(file);
      if (url) {
         console.log("Object URL created:", url);
         // Use the URL for image preview, etc.
         const img = document.createElement('img');
         img.src = url;
         document.body.appendChild(img);
      } else {
         console.log("Browser doesn't support createObjectURL");
      }
   }
}
</script>

<input type="file" onchange="handleFileSelect(event)" accept="image/*">

Modern Approach

In current web development, you can safely use window.URL.createObjectURL() as it's supported by all modern browsers:

<script>
// Modern approach - works in all current browsers
function createObjectURL(file) {
   return URL.createObjectURL(file);
}

// Example with error handling
function safeCreateObjectURL(file) {
   try {
      return URL.createObjectURL(file);
   } catch (error) {
      console.error("Failed to create object URL:", error);
      return null;
   }
}

console.log("URL API supported:", typeof URL !== 'undefined');
</script>

Comparison Table

Don't Forget to Revoke URLs

Always clean up object URLs to prevent memory leaks:

<script>
const file = new Blob(['Hello World'], {type: 'text/plain'});
const url = URL.createObjectURL(file);

console.log("Created URL:", url);

// Clean up when done
setTimeout(() => {
   URL.revokeObjectURL(url);
   console.log("URL revoked");
}, 3000);
</script>

Conclusion

For new projects, use URL.createObjectURL() directly. Only implement the wrapper function if you need to support very old browsers. Always remember to revoke URLs with URL.revokeObjectURL() to prevent memory leaks.