Is there a way to enable image selection from "Pick from gallery" feature in addition to the file upload functionality demonstrated in the example below?
I would like the same behavior for selecting an image from the gallery as when uploading a file using input type file.
new Vue({
el: "#app",
data: {
product_image: '',
product_image_preview: ''
},
methods: {
handleFileUpload(e) {
const file = e.target.files[0];
this.product_image = file;
this.product_image_preview = URL.createObjectURL(file);
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li img{
width: 80px;
height: 60px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-if="product_image_preview">
<img :src="product_image_preview" style="width: 100px;height: 100px" />
</div>
<div v-else>
<img src="https://dummyimage.com/100x100/000/fff" alt="">
</div>
<hr>
<label for="product_image">Select Image</label>
<input type="file" id="product_image" accept="image/*" ref="image" v-on:change="handleFileUpload">
<h1>OR</h1>
<h2> Pick From Gallery</h2>
<div>
<ul>
<li>
<img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?cs=srgb&dl=time-lapse-photography-of-waterfalls-during-sunset-210186.jpg&fm=jpg" alt="">
<img src="https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?cs=srgb&dl=photography-of-night-sky-733475.jpg&fm=jpg" alt="">
<img src="https://images.pexels.com/photos/982263/pexels-photo-982263.jpeg?cs=srgb&dl=seawaves-on-sands-982263.jpg&fm=jpg" alt="">
</li>
</ul>
</div>
</div>