{"id":20976138,"url":"https://github.com/saimow/vue-media-upload","last_synced_at":"2025-04-05T16:04:21.145Z","repository":{"id":40296755,"uuid":"443778566","full_name":"saimow/vue-media-upload","owner":"saimow","description":"🖼️ Vue 3 component that handle multiple images upload with preview. This package support the create and the update form.","archived":false,"fork":false,"pushed_at":"2024-02-28T13:09:59.000Z","size":288,"stargazers_count":209,"open_issues_count":8,"forks_count":34,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T15:03:51.693Z","etag":null,"topics":["image-upload","vue-media-upload"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saimow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-01-02T13:54:14.000Z","updated_at":"2025-02-09T17:46:06.000Z","dependencies_parsed_at":"2024-02-26T00:25:28.083Z","dependency_job_id":null,"html_url":"https://github.com/saimow/vue-media-upload","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"85a3244c0e9bcc617f1aea2c5d13fd7d4b594c65"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saimow%2Fvue-media-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saimow%2Fvue-media-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saimow%2Fvue-media-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saimow%2Fvue-media-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saimow","download_url":"https://codeload.github.com/saimow/vue-media-upload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361615,"owners_count":20926642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-upload","vue-media-upload"],"created_at":"2024-11-19T04:50:31.148Z","updated_at":"2025-04-05T16:04:21.100Z","avatar_url":"https://github.com/saimow.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/vue-media-upload\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vue-media-upload.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-media-upload\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/vue-media-upload.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-media-upload\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/l/vue-media-upload.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-media-upload\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/bundlephobia/minzip/vue-media-upload\"\u003e\n  \u003c/a\u003e\n\n  # vue-media-upload\n\n\u003c/div\u003e\n\u003cdiv align=\"\"\u003e\n\n  📷 **vue-media-upload** is a Vuejs package that handle multiple images upload and preview.\n\n  🖼️ **This package** support **the create and the update form**, and handles the upload for you.\n\n  ![vue-media-upload - multiple image upload with preview ](/static/vue-media-upload.jpg)\n  \n\u003c/div\u003e\n\n\n# 👀 Demo\n\n- [Full featured demo](https://github.com/saimow/media-upload-demo)\n\n\n# 💻 Install\n\nvia npm\n```sh\nnpm install vue-media-upload\n```\n\nor via yarn \n```sh\nyarn add vue-media-upload\n```\n\n\n# 🕹 Usage\n\n```javascript\nimport { createApp } from 'vue';\n\nimport Uploader from 'vue-media-upload';\n\nlet app = createApp({})\n\napp.component('Uploader', Uploader);\n\napp.mount(\"#app\")\n```\n\nor\n\n```javascript\nimport Uploader from \"vue-media-upload\";\n\nexport default {\n  components: {\n    Uploader\n  }\n};\n```\n\n# 🔎 Example\n\n## Create Form\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cUploader\n      server=\"/api/upload\"\n      @change=\"changeMedia\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Uploader from 'vue-media-upload'\n\n  export default {\n    data() {\n      return {\n        media: []\n      }\n    },\n    methods:{\n      changeMedia(media){\n        this.media = media\n      }\n    },\n    components: {\n      Uploader\n    },\n  }\n\u003c/script\u003e\n```\n\n## Update Form\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cUploader\n      server=\"/api/upload\"\n      :media=\"media.saved\"\n      path=\"/storage/media\"\n      @add=\"addMedia\"\n      @remove=\"removeMedia\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Uploader from 'vue-media-upload'\n\n  export default {\n    data() {\n      return {\n        media: {\n          saved: [\n            { name: '123_image.jpg' },\n            { name: '456_image.jpg' },\n          ],\n          added: [],\n          removed: []\n        }\n      }\n    },\n    methods:{\n      addMedia(addedImage, addedMedia){\n        this.media.added = addedMedia\n      },\n      removeMedia(removedImage, removedMedia){\n        this.media.removed = removedMedia\n      }\n    },\n    components: {\n      Uploader\n    },\n  }\n\u003c/script\u003e\n```\n\n\n# ⚙️ Props\n\n| Prop | Type | Default | Description |\n| --- | --- | :---: | --- |\n| **server** | String | `'/api/upload'` | The Route that handle the image upload. The Upload handler should return the name of the uploaded image in the following format: \u003cbr\u003e `{ \"name\": \"123_image.jpg\" }` |\n| **isInvalid** | Boolean | `false` | Whether error styling should be applied. |\n| **media** | Array | `[]` | The list of the stored images, that each of which must have the property `name` containing the name of the image. \u003cbr\u003e `[ { name: '123_image.jpg' } , { name: '456_image.jpg' } ]` |\n| **location** | String | `''` | The location of the folder where the saved images are stored.|\n| **max** | Number | `null` | The maximum number of files allowed to be uploaded.|\n| **maxFilesize** | Number | `4` | The maximum filesize (in megabytes) that is allowed to be uploaded|\n| **warnings** | Boolean | `true` | By default, the package uses JavaScript alerts to display warnings. In case you want to use your custom warnings, you can disable the component pop-ups using this prop. |\n| **headers** | Object | `null` | An optional prop to send additional headers to the server. Eg: `{ \"Authorization\": \"Bearer ACCESS_TOKEN\" }` |\n\n\n# 💾 Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| **@init** | `param` : The list of all the listed images. | Emitted when the component is ready to use. |\n| **@change** | `param` : The list of all the listed images. | Emitted after an image was added or removed. |\n| **@add** | `param1` : The image that was added. \u003cbr\u003e `param2` : The list of the added Images. | Emitted after an image was added. |\n| **@remove** | `param1` : The image that was removed. \u003cbr\u003e `param2` : The list of images that have been removed from the stored media. | Emitted after an image was removed. |\n| **@max** | | Emitted when `max` prop is exceeded. |\n| **@max-filesize** | `param` : The image size. | Emitted when `maxFilesize` prop is exceeded. |\n\n\n# 📙 How it works in a Server-Rendered Form?\n\n1. **vue-media-upload** component uploads the image `image.jpg` as multipart/form-data using a POST request.\n\n2. **server** temporary saves the image with a unique name `123_image.jpg` in a `/tmp/uploads` folder.\n\n3. **server** returns the unique name `123_image.jpg` in a request response.\n\n4. **vue-media-upload** insert the unique name `123_image.jpg` in a hidden html input with `name=\"added_media[]\"`.\n\n5. **user** submits the component parent form, which includes the hidden input field containing the unique image name.\n\n6. **server** uses the unique image name to move `123_image.jpg` from the `/tmp/uploads` folder to its final location.\n\n\n# 🔣 Inputs\n\n\u003e **Note** that all this inputs are **hidden** and they are just a way to validate and pass data to the backend when using this package in a **Server-Rendered Form**!\n\n| Name attribute | Description |\n| --- | --- |\n| **added_media[]**  | The added images in the component |\n| **removed_media[]**  | The images that have been removed from the stored media. |\n| **media**  | This input is added, when the component has at least one image or more listed, as a way for the backend to validate the Images as being required. |\n\n\n# 🤝 Contributing\n\n1. Fork this repository.\n2. Create new branch with feature name.\n3. Create your feature.\n4. Commit and set commit message with feature name.\n5. Push your code to your fork repository.\n6. Create pull request. 🙂\n\n\n# ⭐️ Support\n\nIf you like this project, You can support me with starring ⭐ this repository.\n\n![vue-media-upload - multiple image upload with preview ](/static/vue-media-upload.jpg)\n\n\n# 📄 License\n\n[MIT](LICENSE)\n\nDeveloped with ❤️","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaimow%2Fvue-media-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaimow%2Fvue-media-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaimow%2Fvue-media-upload/lists"}