Image Upload Component With Live Preview - vue-media-upload

Install & Download:

# Yarn
$ yarn add vue-media-upload
# NPM
$ npm i vue-media-upload

Description:

Multi-image upload functionality is a feature missing from most Vue.js projects.

vue-media-upload is a Vue 3 file upload component that makes it easy to upload multiple images at once with a preview of each image.

How to use it:

1. Import and register the file upload component.

import { createApp } from 'vue';
import { UploadMedia, UpdateMedia } from 'vue-media-upload';
let app=createApp({})
app.component('upload-media' , UploadMedia);
app.component('update-media' , UpdateMedia);
app.mount("#app")

// OR
import {UploadMedia, UpdateMedia} from "vue-media-upload";
export default {
  components: {
    UploadMedia,
    UpdateMedia
  }
};

2. Add the component to the app.

<div id="app">
  <upload-media 
    server="/path/to/upload/"
    error="@error('media'){{$message}}@enderror">
  </upload-media>
</div>

<div id="app">
  <update-media 
    server="/path/to/upload"
    media_file_path="/path/to/"
    media_server="/api/media/{{$post->id}}" 
    error="@error('media'){{$message}}@enderror">
  </update-media>
</div>

3. Event handlers.