URL.createObjectURL

  • Revision slug: DOM/window.URL.createObjectURL
  • Revision title: window.URL.createObjectURL
  • Revision id: 321551
  • Created:
  • Creator: madarche
  • Is current revision? No
  • Comment Updated the spec URL

Revision Content

Summary

Creates a new object URL, whose lifetime is tied to the {{ domxref("document") }} in the window on which it was created. The new object URL represents the specified {{ domxref("File") }} object.

Syntax

objectURL = window.URL.createObjectURL(file);
  • file is a {{ domxref("File") }} object indicating the file to create a object URL for.
  • objectURL is the generated object URL. The entire contents of the specified file are represented by the text of the URL.

Example

See Using object URLs to display images.

Notes

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same file. Each of these must be released by calling {{ domxref("window.URL.revokeObjectURL()") }} when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 4 10 12 {{ CompatNightly() }}
Feature Chrome for Android Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 18 4.0 14.0 {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<h3 id="Summary" name="Summary">Summary</h3>
<p>Creates a new object URL, whose lifetime is tied to the {{ domxref("document") }} in the window on which it was created. The new object URL represents the specified {{ domxref("File") }} object.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">
<em>objectURL</em> = window.URL.createObjectURL(<em>file</em>);
</pre>
<ul>
  <li><code>file</code> is a {{ domxref("File") }} object indicating the file to create a object URL&nbsp;for.</li>
  <li><code>objectURL</code> is the generated object URL. The entire contents of the specified file are represented by the text of the URL.</li>
</ul>
<h3 id="Example" name="Example">Example</h3>
<p>See <a href="/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Each time you call <code>createObjectURL()</code>, a new object URL&nbsp;is created, even if you've already created one for the same file. Each of these must be released by calling {{ domxref("window.URL.revokeObjectURL()") }} when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.</p>
<h3 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>8</td>
        <td>4</td>
        <td>10</td>
        <td>12</td>
        <td>{{ CompatNightly() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome for Android</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>18</td>
        <td>4.0</td>
        <td>14.0</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="See_also" name="See_also">See also</h3>
<ul>
  <li>{{ domxref("window.URL.revokeObjectURL()") }}</li>
  <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li>
  <li><a class="external" href="http://www.w3.org/TR/FileAPI/#dfn-createObjectURL" title="http://dev.w3.org/2006/webapi/FileAPI/#url">File API</a> specification</li>
</ul>
Revert to this revision