1---
2category: Browser
3---
4 
5# useObjectUrl
6 
7Reactive URL representing an object.
8 
9Creates an URL for the provided `File`, `Blob`, or `MediaSource` via [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) and automatically releases the URL via [URL.revokeObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL) when the source changes or the component is unmounted.
10 
11## Usage
12 
13```vue
14<script setup lang="ts">
15import { useObjectUrl } from '@vueuse/core'
16import { shallowRef } from 'vue'
17 
18const file = shallowRef()
19const url = useObjectUrl(file)
20 
21function onFileChange(event) {
22  file.value = event.target.files[0]
23}
24</script>
25 
26<template>
27  <input type="file" @change="onFileChange">
28 
29  <a :href="url">Open file</a>
30</template>
31```
32 
33## Component Usage
34 
35```vue
36<template>
37  <UseObjectUrl v-slot="url" :object="file">
38    <a :href="url">Open file</a>
39  </UseObjectUrl>
40</template>
41```
42 
43## Type Declarations
44 
45```ts
46/**
47 * Reactive URL representing an object.
48 *
49 * @see https://vueuse.org/useObjectUrl
50 * @param object
51 */
52export declare function useObjectUrl(
53  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
54): Readonly<Ref<string | undefined, string | undefined>>
55```
56