Multiple Images Upload With Preview - Media-Upload

Install & Download:

# Yarn
$ yarn add @s1modev/media-upload
# NPM
$ npm i @s1modev/media-upload

Description:

A media uploader component that allows for multiple image upload with live preview.

How to use it:

1. Import the Media-Upload component.

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

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

2. Create the image uploader:

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

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