jeffersonsimaogoncalves / media-upload

🖼️ Vue 3 component for multiple images upload with preview. Media-Upload support the create and the update form, and it will handle the upload for you.

🖼️ Media-Upload

📷 media-upload is a vue package for multiple images upload with preview.

🖼️ media-upload support the create and the update form, and it will handle the upload for you.

👀 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

Props	Type	Default	Description
error	String	-	If this prop is not null it will apply the error styling and show the error message.
server	String	/api/upload	The api that will temporary save the image.

<update-media /> component

Props	Type	Default	Description
error	String	-	If this prop is not null it will apply the error styling and show the error message.
server	String	/api/upload	The api that will temporary save the image.
media_server	String	-	The api that will return the saved images names.
media_file_path	String	/post_images	The file where the saved media are stored.

💾 Emits

<upload-media /> component

event	value	Description
@media	array	Emit the added images.

<update-media /> component

event	value	Description
@saved_media	array	Emit the saved images.
@added_media	array	Emit the added images.
@deleted_media	array	Emit the deleted images.

🤝 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 ❤️