useObjectUrl
Reactive URL representing an object.
Creates an URL for the provided File, Blob, or MediaSource via URL.createObjectURL() and automatically releases the URL via URL.revokeObjectURL() when the source changes or the component is unmounted.
Demo
Select file:
Object URL:
noneUsage
vue
<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'
const file = shallowRef()
const url = useObjectUrl(file)
function onFileChange(event) {
file.value = event.target.files[0]
}
</script>
<template>
<input type="file" @change="onFileChange">
<a :href="url">Open file</a>
</template>Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
vue
<template>
<UseObjectUrl v-slot="url" :object="file">
<a :href="url">Open file</a>
</UseObjectUrl>
</template>Type Declarations
typescript
/**
* Reactive URL representing an object.
*
* @see https://vueuse.org/useObjectUrl
* @param object
*/
export declare function useObjectUrl(
object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
): Readonly<Ref<string | undefined>>Source
Contributors
Anthony Fu
Andrew Ferreira
vaakian X
BaboonKing
Michael Hüneburg