Vuetify: [Feature Request] Uploader component
A file uploader component like:
http://element.eleme.io/#/en-US/component/upload
Async, progress, multiple file upload, etc....
amesas
All 81 comments
Here a proof of concept:
<template>
<div>
<v-text-field prepend-icon="attach_file" single-line
v-model="filename" :label="label" :required="required"
@click.native="onFocus"
:disabled="disabled" ref="fileTextField"></v-text-field>
<input type="file" :accept="accept" :multiple="false" :disabled="disabled"
ref="fileInput" @change="onFileChange">
</div>
</template>
<script>
export default{
props: {
value: {
type: [Array, String]
},
accept: {
type: String,
default: "*"
},
label: {
type: String,
default: "Please choose..."
},
required: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
multiple: {
type: Boolean, // not yet possible because of data
default: false
}
},
data(){
return {
filename: ""
};
},
watch: {
value(v){
this.filename = v;
}
},
mounted() {
this.filename = this.value;
},
methods: {
getFormData(files){
const data = new FormData();
[...files].forEach(file => {
data.append('data', file, file.name); // currently only one file at a time
});
return data;
},
onFocus(){
if (!this.disabled) {
debugger;
this.$refs.fileInput.click();
}
},
onFileChange($event){
const files = $event.target.files || $event.dataTransfer.files;
const form = this.getFormData(files);
if (files) {
if (files.length > 0) {
this.filename = [...files].map(file => file.name).join(', ');
} else {
this.filename = null;
}
} else {
this.filename = $event.target.value.split('\\').pop();
}
this.$emit('input', this.filename);
this.$emit('formData', form);
}
}
};
</script>
<style scoped>
input[type=file] {
position: absolute;
left: -99999px;
}
</style>
dohomi
on 21 Mar 2017
Input(type=file) sounds like a must have! Doesn't it exists already? What is the link with this repo https://github.com/johnleider/vue-materials/blob/master/src/components/file-input.vue?
abotsi
on 10 Apr 2017
I was thinking about more feature complete solution:
- Multiple file upload
- File preview
- Progress report
- Drag & Drop
etc...
Like:
http://demo.geekslabs.com/materialize-v1.0/form-file-uploads.html
https://github.com/shuyu/angular-material-fileinput
amesas
on 10 Apr 2017
As of right now, this will not be done for the core of Vuetify.
johnleider
on 23 Apr 2017
@dohomi Thanks for sharing. I've ended up with the following:
getFormData (files) {
const data = new FormData()
for (let file of files) {
data.append('files[]', file, file.name)
}
return data
}
And it plays with multiple nicely
Darkside73
on 27 Apr 2017
Here is small class for selecting file:
https://github.com/jannhama/vuetify-upload-btn
jannhama
on 30 Apr 2017
+1M
jofftiquez
on 28 Jun 2017
I should have elaborated on my comment above. This will not be in the core of Vuetify, as far as the extensive functionality. However, we will include something like this in the addon packs that will come after Vuetify's release.
-edit- Forget this
johnleider
on 28 Jun 2017
Hi @johnleider may we know the reason why? Coz it seems to be a pretty solid feature to have.
jofftiquez
on 28 Jun 2017
Disregard my comment, we'll do it, but after the core components are complete.
johnleider
on 28 Jun 2017
@johnleider WHOAH! You da real MVP. Thanks :+1:
jofftiquez
on 28 Jun 2017
@jofftiquez meanwhile you can check this one out: https://gist.github.com/dohomi/2bba9e2905d00cd1cec9c09cfd87bd10
dohomi
on 28 Jun 2017
I certainly will @dohomi thanks a lot. :)
jofftiquez
on 28 Jun 2017
I think many of us need this essential component, thanks in advance for adding this feature ;)
lobosan
on 27 Jul 2017
This will be something that will be included in the front end package development.
johnleider
on 27 Jul 2017
i can highly recommend:
this for file/folder handling: https://github.com/silverwind/uppie
and this for generell vue upload needs: https://github.com/thetutlage/vue-clip
mstaack
on 27 Jul 2017
When will you add this feature?
A must have.
Tabrizian
on 17 Aug 2017
Planned for the front end component pack
On Aug 17, 2017 4:30 AM, "Iman Tabrizian" notifications@github.com wrote:
When will you add this feature?
A must have.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/238#issuecomment-323004428,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgol30Eat_cuj9OIC8cRSnSI8dM89ks5sY_oKgaJpZM4Mig7T
.
johnleider
on 17 Aug 2017
@mstaack Agre that http://vueclip.adonisjs.com/ is great to consider. It just need a nice UI out of the box.
spaquet
on 21 Aug 2017
we need to add/update code in 'webpack.base.config.js' file for use vue-clip
module.exports = {
resolve: {
alias: {
'vue': 'vue/dist/vue.js', // add for image upload things for use vue component in vue 2
}
},
arpitprod
on 9 Sep 2017
vueclip has only one version released? And its last update is 9 months ago! A risk to start using it.
Tabrizian
on 28 Sep 2017
@37ch4 @Gab0o777 @Mehtrick @mklemenz @efriedli
Cut it out with the +1 comments please, there's a button for that.
KaelWD
on 28 Sep 2017
We're still waiting for it
Tabrizian
on 11 Oct 2017
Let's drop this conversation please. I've already tagged this with the Front-end pack milestone. This is also outlined here: https://vuetifyjs.com/vuetify/roadmap
We are going to do it, thank you for your patience.
johnleider
on 11 Oct 2017
If there is any help need I'm ready to help actually :)
Tabrizian
on 11 Oct 2017
Hop on: https://discord.gg/CvXCKc
johnleider
on 11 Oct 2017
Here is below an image uploader component : file-input.vue
<template>
<div>
<div>
<img
:src="imageUrl"
ref="imageUrl"
height="150"
@click="onPickFile"
style="cursor: pointer;"
>
</div>
<div>
<v-btn raised @click="onPickFile" v-if="!imageUrl">
{{ selectLabel }}
</v-btn>
<v-btn raised class="error" @click="removeFile" v-else>
{{ removeLabel }}
</v-btn>
<input
type="file"
ref="image"
name="image"
:accept="accept"
@change="onFilePicked"
>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: String
},
accept: {
type: String,
default: '*'
},
selectLabel: {
type: String,
default: 'Select an image'
},
removeLabel: {
type: String,
default: 'Remove'
}
},
data() {
return {
imageUrl: ''
}
},
watch: {
value(v) {
this.imageUrl = v
}
},
mounted() {
this.imageUrl = this.value
},
methods: {
onPickFile() {
this.$refs.image.click()
},
onFilePicked(event) {
const files = event.target.files || event.dataTransfer.files
if (files && files[0]) {
let filename = files[0].name
if (filename && filename.lastIndexOf('.') <= 0) {
return //return alert('Please add a valid image!')
}
const fileReader = new FileReader()
fileReader.addEventListener('load', () => {
this.imageUrl = fileReader.result
})
fileReader.readAsDataURL(files[0])
this.$emit('input', files[0])
}
},
removeFile() {
this.imageUrl = ''
}
}
}
</script>
<style scoped>
input[type=file] {
position: absolute;
left: -99999px;
}
</style>
As example, It can be used in a form like this :
<template>
<v-container>
<v-card>
<form @submit.prevent="onSubmit">
<v-layout row>
<v-flex xs12>
<file-input
accept="image/*"
ref="fileInput"
@input="getUploadedFile"
></file-input>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn
class="primary"
type="submit"
>
Save
</v-btn>
</v-flex>
</v-layout>
</form>
</v-card>
</v-container>
</template>
<script>
import axios from 'axios'
import FileInput from '../../components/FileInput.vue'
export default {
components: {FileInput},
data() {
return {
image: '',
title: '',
description: ''
}
},
methods: {
getUploadedFile(e) {
this.image = e
},
onSubmit() {
let formData = new FormData()
formData.set('image', this.image)
formData.set('title', this.title)
formData.set('description', this.description)
axios.post('/api/posts', formData)
.then(response => {
// Any Code
})
.catch(error => {
// Any Code
})
}
}
}
</script>
nasirouwagana
on 2 Nov 2017
Here is an uploader component I create which inspired by v-text-field
jingzheshan
on 9 Dec 2017
@jingzheshan where is the code? :P
lobo-tuerto
on 15 Dec 2017
@lobo-tuerto thanks for the interests, I feel very hard to share the whole code with limited time. I may write one article when I am free but here is a really rough vue template of what I am using. Hope it can give you some ideas : )
jingzheshan
on 16 Dec 2017
here is a complete upload widget for the graph.cool API:
https://gist.github.com/dohomi/8f27b14ce5d0c2923ed5c88a55ea582f
dohomi
on 19 Dec 2017
Just published this for cloudinary images
https://github.com/signalkuppe/vuetify-cloudinary-upload
signalkuppe
on 20 Dec 2017
Although I'd love to have a prebuilt upload component, I guess it won't be easy to create one that fits most users needs in terms of behaviour and looks. Fortunately it is very much possible already to build uploaders with existing vuetify components. I'll just throw ours into the mix of inspirationals here:
cb109
on 12 Jan 2018
Here is an interesting project maybe it is useful for someone: https://github.com/transloadit/uppy
dohomi
on 12 Jan 2018
My component for file selection https://gist.github.com/ecmel/3d3d918f403140ff563d274c773508bf
ecmel
on 17 Jan 2018
aaarghhh
on 20 Mar 2018
my version, in case its of any use to anyone
https://gist.github.com/chris104957/94fced8071b81cb980e461bf44e51273
chris104957
on 18 Apr 2018
I'm using this: https://github.com/doritobandito/vuetify-upload-button
It's the best option I've found, including the ones in this thread.
forresthopkinsa
on 29 Jun 2018
You can wrap v-progress-linear inside v-text-field as below
samueldervis
on 9 Jul 2018
This is my component' gist.
It works on Firebase Cloud storage
LoveMeWithoutAll
on 20 Aug 2018
It's the best option I've found, including the ones in this thread.
Ok, guys, if it is the best option out there, take a look here, please.
https://www.npmjs.com/package/@outluch/v-file
https://github.com/outluch/v-file
Why we pass all that props to some hacked v-label in that component, when we can just pass our button in the slot and connect @click event to hidden <input type="file">?
Any ideas how to improve are welcome.
outluch
on 9 Sep 2018
Nice job @chris104957 - very easy to customize to fit my own needs.
I especially like the drag and drop functionality!
cby016
on 29 Oct 2018
Finally, did what needed for file uploader and downloader. Based on http://uppy.io/ and https://github.com/sachinchoolur/lightgallery.js and https://www.minio.io/. Contain auto thumbnail resizing after upload.
yoldar
on 30 Oct 2018
Will there be an official component or not?
desthercz
on 27 Nov 2018
TL;DR: Yes
It's in this milestone and on Vuetify Roadmap.
It is one of the most required components.
So, it will appear sometime.
peluprvi
on 27 Nov 2018
Any news? I do not see it in the Roadmap
ivaaaan
on 7 Jan 2019
Indeterminate. Was slated for 1.5 but was canceled to focus on 2.0 release. Will probably be included in 2.0 or shortly after 2.0.
MajesticPotatoe
on 7 Jan 2019
very disappointed...since 2017 they're pushing away simple yet important component...ah well pain of open source..take it or leave it or get a lecture from the creator (not sorry for the comment)
in fact, a few custom solution from the third-party looks good
nni123
on 9 Feb 2019
Thank you all for being patient with this. I currently have a branch here https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload that I will work on next week and get it in as part of a future update. I don't think it will be 1.6 as we are prepping for LTS, but I'll poll the team.
johnleider
on 9 Feb 2019
@nni123 submit a PR. LOL.
jofftiquez
on 11 Feb 2019
An easy trick is :
<v-btn color="success" @click="$refs.inputUpload.click()" type="file">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="inputFileExcel" >
oscahumbertomr
on 13 Feb 2019
@oscahumbertomr where's your input region? loading bar? this isn't really a full solution
forresthopkinsa
on 14 Feb 2019
@johnleider ;
John will a full file uploader be in V2?
While I have your attention, will we have a "Rich Editor" component, where user can type long text like MS Word and apply style to it and then we can save the whole thing in DB?
BenHayat
on 22 Feb 2019
@johnleider ;
John will a full file uploader be in V2?
While I have your attention, will we have a "Rich Editor" component, where user can type long text like MS Word and apply style to it and then we can save the whole thing in DB?
It was already discussed and no, we wont, unless John & his team changed their mind.
edit: I mean wysiwyg editor.
desthercz
on 22 Feb 2019
@desthercz
The last time John said anything was two weeks ago and there is nothing that implies it won't be in V2.
Thank you all for being patient with this. I currently have a branch here https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload that I will work on next week and get it in as part of a future update. I don't think it will be 1.6 as we are prepping for LTS, but I'll poll the team.
Secondly you said "no. we wont". Are you a Veutify team member counting yourself as one? If not, then don't give fabricated reply.
BenHayat
on 22 Feb 2019
Now now, lets not get to heated here.
For the most part it is slated for v2, we were considering getting it in 1.6, but as john says, chances are gonna be slim as we need to nail down current v1.x for LTS.
as for the no-we wont, i want to guess that was directed at "rich text editor" which john has mentioned we have no desire to take on that task at this time.
Hope that clears up any confusion (could have sworn i mentioned this somewhere else, may have been discord)
MajesticPotatoe
on 22 Feb 2019
@MajesticPotatoe ;
Your statement makes sense and goes along with John said about V1.6 and I was confirming for V2, when this guy jumps in and gives a rash reply about V2 with nothing to back it up.
BenHayat
on 22 Feb 2019
@desthercz
The last time John said anything was two weeks ago and there is nothing that implies it won't be in V2.Thank you all for being patient with this. I currently have a branch here https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload that I will work on next week and get it in as part of a future update. I don't think it will be 1.6 as we are prepping for LTS, but I'll poll the team.
Secondly you said "no. we wont". Are you a Veutify team member counting yourself as one? If not, then don't give fabricated reply.
Not trying to be rude, but you should improve your english language before throwing judgements on others.
"Will we have a "Rich Editor" component" => "No we wont have Wysiwyg" - This implies that neither I nor you will be given wysiwig editor from Vuetify team, not that i wont create it as part of team.
Also Wysiwyg from the Vuetify is highly unlikely because this is not trivial piece of code and making a guide how to implement third party wysiwyg makes much more sense. That is also exactly what John said when asked about this issue.
desthercz
on 22 Feb 2019
@desthercz
My English has nothing to do with your reply that I pointed out. Nice try to divert my question if V2 will have "Rich Editor". Secondly, I wasn't "throwing judgement". I said if you're NOT part of the team, don't make up an answer just to look like you're part of the team. These days, every joe blow wants look important by taking credit for someone's else work.
BenHayat
on 22 Feb 2019
@BenHayat FYI Looks like someone opened an issue regarding a WYSIWYG solution.
Maybe this helps.
escapedcat
on 27 Feb 2019
@escapedcat ;
Thanks for the link and info.
BenHayat
on 27 Feb 2019
@MajesticPotatoe If there a way for use to use and test the uploader from that branch? I'd like to throw it into a mockup to see how it looks/feels.
douglasg14b
on 18 Apr 2019
Wondering if I could chime in with a small request for the resulting implementation (I'm following the progress by comparing branches here) - my apologies if there was a discussion/spec I could have commented in/on instead.
I always find it difficult/frustrating to properly support an upload target to a cloud provider. The flow would be:
- User selects file(s) to upload
- For each file -> Do below
- Pass the file to a function to get the upload URL (containing the file name, content type, size) - in this case it will call an API to get a signed URL to upload to restricted by the content-type and file-size reported
- Upload the file to the URL provided
- [Optional] Support resumable uploads
Most uploads fumble on step 3 here for this use-cases: the type for the upload url is usually something like string|Function and not string|Function|Promise<string> (Replace Function with a specific signature if wanted). I'm using fetch for all my API calls, and so I would need support for the Promise addition here.
I'm migrating a project over from AngularJS + AngularMaterial and used ng-upload which supported my use-case in that it would just provide a component that would trigger a function with the file list and I would do steps 2 & 3 on my own, then use their Upload service which would carry out steps 4 & 5.
someone1
on 7 May 2019
@someone1 our uploader will require an upload function to run. It will be up to the user to determine how they will upload the data (be it rest, sockets, etc) as this will give the most flexibility.
general process so far:
1.) select file(s) to upload
2.) for each file:
a.) the file will be uploaded by browser (inputs standard upload function)
b.) file is parsed by requested FileReader format (user sets via prop, Binary, Text, DataURI etc etc)
c.) user upload function runs
straight out of the gate there wont be support for resumable uploads, though all internal file status's are accessible to the upload function so could be easily handled by the user.
MajesticPotatoe
on 7 May 2019
Thanks for the quick reply @MajesticPotatoe !
For some uploads I wouldn't want to get a FileReader to read it all into memory only to send it along the pipe for uploading. I may also be mistaken here, but the result from the FileReader omits details like file name, size, and content-type so my flow would be unsupported.
With how the branch currently is coded (I realize it's a WIP), it looks like the user supplied uploader function is not given details to the file at all, just the data received by the FileReader, and progress is tracked by the FileReader progress. For large files, the entire file would be loaded into memory before being handed off to the uploader function, this wouldn't be suitable for large files.
From the docs it appears onLoad is only called once the entire file is read.
someone1
on 7 May 2019
Yes it's still WIP, FileReader is totally optional. It's just the current feature I'm working on ATM. At its basic level everything will be handled by users upload function. Initial release wont please everyone, its merely a staring point to cover as much ground as possible with little maintenance.
MajesticPotatoe
on 7 May 2019
currently im using this lib
https://github.com/pqina/vue-filepond
take a look at it :point_up:
annymosse
on 13 May 2019
currently im using this lib
https://github.com/pqina/vue-filepond
take a look at it ☝️
Great! But last time I used this lib there was memory leak when using in mobile browser(when using images from camera ~10-15mb) so I decided to switch to Uppy. I liked Uppy because it uses it's own modal panel to manage uploads and you decide yourself how uploaded files will be shown on your webpage.
yoldar
on 13 May 2019
Disregard my comment, we'll do it, but after the core components are complete.
Let's just do it quickly we really need this component who wants somebody to say ok it turns out that the components aren't all that nice and they're not pretty so what can we do about it
yannanna0920
on 16 May 2019
Here is an uploader component I create which inspired by v-text-field
can you share with us?
yannanna0920
on 27 May 2019
So I guess this never made it? Seems like such a basic and universally needed feature for almost any type of app.
softwareguy74
on 13 Jun 2019
Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.
johnleider
on 13 Jun 2019
Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.
How do I use this unreleased feature?
hainuo
on 20 Jun 2019
Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.How do I use this unreleased feature?
Um, not sure you can. Still being worked on.
softwareguy74
on 20 Jun 2019
Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.How do I use this unreleased feature?
Um, not sure you can. Still being worked on.
alright, i'll wait for the version 2.0
hainuo
on 20 Jun 2019
Is File Upload component available in v2.0.0-beta.3 ?
Mikilll94
on 20 Jun 2019
Is File Upload component available in v2.0.0-beta.3 ?
Nope.
chojnicki
on 22 Jun 2019
:tada:
forresthopkinsa
on 14 Jul 2019
Can we get drag drop support where we can drag files from local computer to upload component?
softwareguy74
on 15 Jul 2019
Can the chips have a close icon to remove specific file from list?
softwareguy74
on 15 Jul 2019
v-file-input is the replacement for the native <input type=file> which doesn't support removing files, so the current status is that chip are not going to be deletable
Probably same for dragndrop support.
Anyway this issue is closed, if you have additional feature requests or found bugs please create a new issue
jacekkarczmarczyk
on 15 Jul 2019
Related issues
KuroThing
·
3Comments
itanka9
·
3Comments
sebastianmacias
·
3Comments
Antway
·
3Comments
paladin2005
·
3Comments
Most helpful comment
Disregard my comment, we'll do it, but after the core components are complete.