saimow / vue-media-upload

🖼️ Vue 3 component that handle multiple images upload with preview. This package support the create and the update form.

vue-media-upload

📷 vue-media-upload is a Vuejs package that handle multiple images upload and preview.

🖼️ This package support the create and the update form, and handles the upload for you.

👀 Demo

• Full featured demo

💻 Install

via npm

npm install vue-media-upload

or via yarn

yarn add vue-media-upload

🕹 Usage

import { createApp } from 'vue';

import Uploader from 'vue-media-upload';

let app = createApp({})

app.component('Uploader', Uploader);

app.mount("#app")

or

import Uploader from "vue-media-upload";

export default {
  components: {
    Uploader
  }
};

🔎 Example

Create Form

<template>
  <div>
    <Uploader
      server="/api/upload"
      @change="changeMedia"
    />
  </div>
</template>

<script>
  import Uploader from 'vue-media-upload'

  export default {
    data() {
      return {
        media: []
      }
    },
    methods:{
      changeMedia(media){
        this.media = media
      }
    },
    components: {
      Uploader
    },
  }
</script>

Update Form

<template>
  <div>
    <Uploader
      server="/api/upload"
      :media="media.saved"
      path="/storage/media"
      @add="addMedia"
      @remove="removeMedia"
    />
  </div>
</template>

<script>
  import Uploader from 'vue-media-upload'

  export default {
    data() {
      return {
        media: {
          saved: [
            { name: '123_image.jpg' },
            { name: '456_image.jpg' },
          ],
          added: [],
          removed: []
        }
      }
    },
    methods:{
      addMedia(addedImage, addedMedia){
        this.media.added = addedMedia
      },
      removeMedia(removedImage, removedMedia){
        this.media.removed = removedMedia
      }
    },
    components: {
      Uploader
    },
  }
</script>

⚙️ Props

Prop	Type	Default	Description
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: { "name": "123_image.jpg" }
isInvalid	Boolean	false	Whether error styling should be applied.
media	Array	[]	The list of the stored images, that each of which must have the property name containing the name of the image. [ { name: '123_image.jpg' } , { name: '456_image.jpg' } ]
location	String	''	The location of the folder where the saved images are stored.
max	Number	null	The maximum number of files allowed to be uploaded.
maxFilesize	Number	4	The maximum filesize (in megabytes) that is allowed to be uploaded
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.
headers	Object	null	An optional prop to send additional headers to the server. Eg: { "Authorization": "Bearer ACCESS_TOKEN" }

💾 Events

Event	Payload	Description
@init	param : The list of all the listed images.	Emitted when the component is ready to use.
@change	param : The list of all the listed images.	Emitted after an image was added or removed.
@add	param1 : The image that was added. param2 : The list of the added Images.	Emitted after an image was added.
@remove	param1 : The image that was removed. param2 : The list of images that have been removed from the stored media.	Emitted after an image was removed.
@max		Emitted when max prop is exceeded.
@max-filesize	param : The image size.	Emitted when maxFilesize prop is exceeded.

📙 How it works in a Server-Rendered Form?

1. vue-media-upload component 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 folder.

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

4. vue-media-upload insert the unique name 123_image.jpg in a hidden html input with name="added_media[]".

5. user submits the component parent form, which includes the hidden input field containing the unique image name.

6. server uses the unique image name to move 123_image.jpg from the /tmp/uploads folder to its final location.

🔣 Inputs

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!

Name attribute	Description
added_media[]	The added images in the component
removed_media[]	The images that have been removed from the stored media.
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.

🤝 Contributing

1. Fork this repository.
2. Create new branch with feature name.
3. Create your feature.
4. Commit and set commit message with feature name.
5. Push your code to your fork repository.
6. Create pull request. 🙂

⭐️ Support

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

📄 License

MIT

Developed with ❤️

vue-media-upload's Issues

Upload docs

I'm trying to upload docs as pdf and it works, but there is no thumbnail icon.
Is it possible to have a generic docs icon?
thanks and compliments!

Axios dependency

Hi there, cool library! I would love to use this in Vue 3, got it on display also but it complains about axios not being defined. I provided the full API path in the "server" tag. Do I have to initialize something in axios?

Wrong documentation emit events' name

Update-media's emit events' name is wrong in documentation.
@added_media should be @added-media,
@deleted_media should be @deleted-media,
@saved_media should be @saved-media,

Axios request to get images from media_server is POST instead of GET

https://github.com/s1modev/vue-media-upload/blob/3aacad691201ac60c3b1303bc5e4f6852b203c18/uploader/UpdateMedia.vue#L164

I think this should be changed to a GET type request.

Type declarations?

Can you include a .d.ts file in the component so that it could be imported in Typescript-based Vue 3 projects without requiring allowJS: false?

My server requires authentication for server API call but how to send that data?

My server requires authentication for server API call but how to send authentication tokens when the component only has server (server="/api/upload") props as a single url for call?

Vue2 warning: Invalid default value for prop "media"

Good day,
I get the following errors in console:

[Vue warn]: Invalid default value for prop "media": Props with type Object/Array must use a factory function to return the default value.

found in ---> <Uploader> at node_modules/vue-media-upload/src/Uploader.vue

It s there anything i m not doing fine?

Edit: I m using this on Vue2

pass header Bearer token in axios request

How to pass header in axios request like a bearer token

const {data} = await axios.post(this.server, formData)

Drag and drop

Hi. Is it possible to upload files on drag and drop?

No server error handling?

Hey, I think there should be an event so when the axios request fails, an event is triggered.

Something like:
const data = await axios.post(this.server, formData)
.catch( error => {
this.$emit('serverError', error)
});

                        if( data ){
                            let addedImage = {url:url, name:data.name, size:files[i].size, type:files[i].type}
                            this.addedMedia.push(addedImage)
    
                            this.$emit('change', this.allMedia)
                            this.$emit('add', addedImage, this.addedMedia)    
                        }

instead of only:
const {data} = await axios.post(this.server, formData)

What do you think?

Restrict to single image upload

Support to display images from a server

When fetching images from a server and you need to display them through Upload-media tags there is no native support, could you implement that

Using multiple times

I tried to use in a form multiple times but it does not work.
I would need it for example if a model has a basic photo and other media collections. Even if I want to upload at the second one, it appears at the first one

   <div class="row g-4 mt-1">
          <Uploader server="/store-media" @change="changeBasicMedia"/>
        </div>
        <div class="row g-4 mt-1">
          <Uploader server="/store-media" @change="changeMediaCollection"/>
        </div>

const basicMedia = ref();
const mediaCollection = ref([]);

const changeBasicMedia = (basic) => {
  basicMedia.value = basic;
};

const changeMediaCollection = (collection) => {
  mediaCollection.value = collection;
};

Delete icon doesn't appear in Safari browser.

The delete button svg does appear in the code but its not showing on the page. Now it's not possible to delete any added images. This also goes for the media upload demo

https://github.com/s1modev/media-upload-demo

Please update the documentation to support the compostion API

Property "index" was accessed during render but is not defined on instance at Update-media issue

Property "index" was accessed during render but is not defined on instance at Update-media issue. It only occur in update-media, not upload-media.

Use it directly

Hello sir.

Is it possible to import it as a script file?

In one of my site I'am using vue as a script file without the use of webpack.

Something like this
<script src="https://unpkg.com/media-upload-component.js"></script>

Thanks!

Select single image

This is not an Issue. But how do we make it to select only a single file?

Is there any way to customize styles?

For example, the size of the delete icon and colors of buttons.

how do the project use in framework7 -vue

hi,
how do you do,
how do the project use in framework7 -vue
thanks
toy

add some parameter for send to server

how can i add some other parameter to server like id and etc?