search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.79k stars 6.96k forks source link

[Feature Request] Uploader component #238

Closed amesas closed 5 years ago

amesas commented 7 years ago

A file uploader component like:

http://element.eleme.io/#/en-US/component/upload

Async, progress, multiple file upload, etc....

oscarhumbertomr commented 5 years ago

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" >
forresthopkinsa commented 5 years ago

@oscahumbertomr where's your input region? loading bar? this isn't really a full solution

BenHayat commented 5 years ago

@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?

desthercz commented 5 years ago

@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.

BenHayat commented 5 years ago

@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.

MajesticPotatoe commented 5 years ago

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)

BenHayat commented 5 years ago

@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.

desthercz commented 5 years ago

@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.

BenHayat commented 5 years ago

@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.

escapedcat commented 5 years ago

@BenHayat FYI Looks like someone opened an issue regarding a WYSIWYG solution.
Maybe this helps.

BenHayat commented 5 years ago

@escapedcat ;

Thanks for the link and info.

douglasg14b commented 5 years ago

@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.

someone1 commented 5 years ago

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:

  1. User selects file(s) to upload
  2. For each file -> Do below
  3. 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
  4. Upload the file to the URL provided
  5. [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.

MajesticPotatoe commented 5 years ago

@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.

someone1 commented 5 years ago

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.

MajesticPotatoe commented 5 years ago

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.

annymosse commented 5 years ago

currently im using this lib https://github.com/pqina/vue-filepond take a look at it :point_up:

yoldar commented 5 years ago

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.

yannanna0920 commented 5 years ago

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 commented 5 years ago

Here is an uploader component I create which inspired by v-text-field

uploader can you share with us?

softwareguy74 commented 5 years ago

So I guess this never made it? Seems like such a basic and universally needed feature for almost any type of app.

johnleider commented 5 years ago

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.

hainuo commented 5 years ago

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?

softwareguy74 commented 5 years ago

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.

hainuo commented 5 years ago

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

Mikilll94 commented 5 years ago

Is File Upload component available in v2.0.0-beta.3 ?

chojnicki commented 5 years ago

Is File Upload component available in v2.0.0-beta.3 ?

Nope.

forresthopkinsa commented 5 years ago

:tada:

softwareguy74 commented 5 years ago

Can we get drag drop support where we can drag files from local computer to upload component?

softwareguy74 commented 5 years ago

Can the chips have a close icon to remove specific file from list?

jacekkarczmarczyk commented 5 years ago

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