# 🖼️ vue-media-upload
📷 **vue-media-upload** is a vue package for multiple images upload with preview.
🖼️ **vue-media-upload** support **the create and the update form**, and it will handle the upload for you.
# 👀 Demo
# 💻 Install
via npm
```sh
npm install vue-media-upload
```
or via yarn
```sh
yarn add vue-media-upload
```
# 🕹 Usage
```javascript
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
```javascript
import {UploadMedia, UpdateMedia} from "vue-media-upload";
export default {
components: {
UploadMedia,
UpdateMedia
}
};
```
# 🔎 Example
This is an example in Laravel blade form.
## Create Form
```html
```
## Update Form
```html
```
# 📙 How does vue-media-upload works?
**vue-media-upload** contains two components `` for the create form and `` for the update form!
## \ component
1. **vue-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. **vue-media-upload** stores the unique name `123_image.jpg` in a hidden input field with `name="media[]"`.
5. **user** submits the vue-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.
## \ component
- Almost the same concept as `` with some slight changes.
# 🔣 Inputs
## \ component:
Basically after the image get uploaded the server return the unique image name and **vue-media-upload** stores it in a hidden input field ``
## \ component:
- After the server returns the images names, **vue-media-upload** lists them, and in case the user added an new image **vue-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 ``
- In case the user deleted an image `123_image.jpg` **vue-media-upload** stores it's name in an input field ``
- In case **vue-media-upload** has at least one image or more listed you will notice that it has also an input field ``, 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 `` as required `$request->media => 'required'`
# ⚙️ Props
## \ 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. |
## \ 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
## \ component
| event | value | Description |
| --- | --- | --- |
| **@media** | array | Emit the added images. |
## \ 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. 🙂
If you like this project, You can support me with starring ⭐ this repository.
# 📄 License
[MIT](LICENSE)
---
_Source: https://npm.io/package/hiworld-vue-image-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._