Media Upload Component for Vue 3


January 6th, 2022

Media Upload Component for Vue 3

The media-upload package is a Vue 3 component for multi-image upload with preview. Media Upload supports creating and updating images and handles uploads for you.

Media upload package for Vue 3

This package contains two components, one for uploading new images and another for updating images:

1<div id="app">
2 <upload-media
3 server="/api/upload"
4 error="@error('media'){{$message}}@enderror">
5 </upload-media>
7 <update-media
8 server="/api/upload"
9 media_file_path="/post_images"
10 media_server="/api/media/{{$post->id}}"
11 error="@error('media'){{$message}}@enderror">
12 </update-media>

The <UploadMedia /> component uploads images as multipart/form-data, and the server returns the unique temporary image name. The main form submits media data as a hidden input which is then copied into its final location.

You can learn more about this package, get full installation instructions, and view the source code on GitHub. You can also see a fully featured demo application that implements this package in a demo Laravel application.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.