? Demo

• Fully featured demo
• Full tutorial

? Install

via npm

npm install vue-media-upload

or via yarn

yarn add vue-media-upload

? Usage

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
  }
};

? Example

This is an example in Laravel blade form.

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>

? How does media-upload works?

media-upload contains two components <upload-media /> for the create form and <update-media /> for the update form!

<upload-media /> component

1. media-upload uploads the image image.jpg as multipart/form-data using a POST request.

2. server temporary saves the image with a unique name 123_image.jpg in a /tmp/uploads file.

3. server returns the unique name 123_image.jpg in a request response.

4. media-upload stores the unique name 123_image.jpg in a hidden input field with name="media[]".

5. user submits the media-upload parent form containing the hidden inputs fields the unique images names.

6. server uses the unique images names to move 123_image.jpg from the /tmp/uploads file to its final location.

<update-media /> component

• Almost the same concept as <upload-media /> with some slight changes.

? Inputs

<upload-media /> component:

Basically after the image get uploaded the server return the unique image name and media-upload stores it in a hidden input field <input name="media[]">

<update-media /> component:

• After the server returns the images names, media-upload lists them, and in case the user added an new image media-upload uploads the image image.jpg as multipart/form-data using a POST request and stores the added media unique name in an input <input name="added_media[]">

• In case the user deleted an image 123_image.jpg media-upload stores it's name in an input field <input name="deleted_media">

• I case media-upload has at least one image or more listed you will notice that it has also an input field <input name="media" value="1">, this input is a way to validate the media as required, so if you want make media required in your form, you will only need to add on your backend validation <input name="media" value="1"> as required $request->media => 'required'

⚙️ Props

<upload-media /> component

<update-media /> component

? Emits

<upload-media /> component

<update-media /> component

? Contributing

1. Fork this repository.
2. Create new branch with feature name.
3. Run npm install and npm run dev.
4. Create your feature.
5. Commit and set commit message with feature name.
6. Push your code to your fork repository.
7. Create pull request. ?

⭐️ Support

If you like this project, You can support me with starring ⭐ this repository.

? License

MIT

Developed with ❤️

GitHub

View Github