Quasar: File Upload component

[mlenormand]

The Quasar ui components collection is nearly exhaustive, but it miss an upload component.
Some features it could implements :

• shows a specially styled placeholder area to make clear the user can darg-and-drop files
• handle events like onUploadComplete, onProgress, etc.

Example of an upload component (not with Vuejs) : http://getuikit.com/docs/upload.html

[rstoenescu]

Don't think I have enough time to add this to v0.7 but it's on the agenda now at least. Thanks for the suggestion!

[mlenormand]

Well, I think it's a low priority feature request, the roadmap is big enough !

[murbanowicz]

+1 for this component!

[smolinari]

An added feature I'd like to see. Please have the uploader also accept multiple files at once too.

Here are some inspirations.

https://github.com/james2doyle/vue-file-upload-component
https://github.com/lian-yue/vue-upload-component/tree/2.0

This might be something I could tackle @rstoenescu, once I get the Docker stuff done.

Scott

[rstoenescu]

Sure Scott, it's yours. Thanks for the suggestions and help!

[murbanowicz]

@smolinari How is it going about it? It is really important I think.

[smolinari]

Hey Marec, @murbanowicz

It isn't going. I've pulled some other money producing work ahead of this and won't get to working on this little project for a week or so. The docker stuff I mentioned earlier is sort of done. However, there is still more work to do on it, but that is on hold too and for other reasons.

Sorry for the probably bad news. But, it is what it is.

Scott

[murbanowicz]

@rstoenescu @smolinari I had to create something for my project and I found it easier than I thought.
I will create PR with a basic button for file upload soon, but because I am not so much into building libs like Q, it will need some work probably from others to get it working with Quasar, but should not be a big deal.

My question is - Should file be uploaded by component (question about dependency...) or it should only feed back the File object to given v-model ?

[rstoenescu]

@murbanowicz The uploader component should:

• display upload status
• handle multiple file uploads
• handle upload of image files and display thumbnails
• handle the upload by itself -- no code necessary for the dev to write

[murbanowicz]

What should be feedback to model?

2 gru 2016 09:52 "Razvan Stoenescu" [e-mail] napisał(a):

@murbanowicz https://github.com/murbanowicz The uploader component
should:

• display upload status
• handle multiple file uploads
• handle upload of image files and display thumbnails
• handle the upload by itself -- no code necessary for the dev to write

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/73#issuecomment-264415744,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI80kgINV4Ty4q7_fcHCMSs-tW_MHletks5rD-p4gaJpZM4J0XDh
.

[rstoenescu]

Don't think we need v-model.

[murbanowicz]

I think we need to let the user know that files have been uploaded?
To e.g. refresh list of files to choose etc ?

2016-12-02 10:44 GMT+00:00 Razvan Stoenescu [e-mail]:

Don't think we need v-model.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/73#issuecomment-264426000,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI80koCbJv-enrGqSVS2_u5dOiZQpPrBks5rD_Z2gaJpZM4J0XDh
.

[rstoenescu]

@murbanowicz Yes, using events for this will suffice. And some property on the reference to tell which files are to be / were uploaded.

[murbanowicz]

Guys, made progress and working properly.
Waiting for opinions. After some review with you, I will prepare PR for that.
@rstoenescu - Will you prepare mat and ios styl files for that? I do not know how to do it and for you it will be probably much quicker job.
@smolinari - please take a look

<template>
  <div class="q-file-upload">
    <div>
      <label class="upload-button">
        <input
          type="file"
          ref="file"
          @change="__filesSelected"
          accept=".gif,.jpg,.jpeg,.png"
          v-bind:multiple="multiple"
          >
        <q-state :active="uploading">
          <div slot="active">
            <spinner name="hourglass" :size="40" class="primary"></spinner>&nbsp;&nbsp;{{ uploadingText }}
          </div>
          <button :class="button" @click="__openFilePicker">
            <i>{{ icon }}</i>&nbsp;
            {{ label }}

          </button>
        </q-state>
      </label>
    </div>
  </div>
</template>
<style lang="stylus">
  .upload-button
    opacity 100
    input[type='file']
      opacity 0
      visibility hidden
      position absolute
      top -100
      left -100
</style>
<script>
  export default{
    props: {
      path: {
        type: String,
        required: true
      },
      label: {
        type: String,
        required: true
      },
      uploadingText: {
        type: String,
        default: 'Uploading...'
      },
      multiple: Boolean,
      button: {
        type: String,
        default: 'primary'
      },
      icon: {
        type: String,
        default: 'file_upload'
      }
    },
    data () {
      return {
        uploading: false
      }
    },
    methods: {
      __filesSelected (e) {
//        this.filesToUpload = e.target.files
        var formData = new FormData()
        const filesToUpload = e.target.files
        // Handle single File or FileList
        Array.prototype.slice.call(filesToUpload).forEach((file, index) => {
          formData.append('files', filesToUpload[index])
        })
        console.log(formData)
        this.uploading = true
        this.$http.post(this.path, formData)
          .then((res) => {
            this.$emit('input', res)
          },
          () => {
            this.$emit('error')
            this.uploading = false
          })
      },
      __openFilePicker () {
        this.$refs.file.click()
      }
    }
  }
</script>

[rstoenescu]

Just create two styl files file-upload.mat.styl and file-upload.ios.styl and place them in same directory. No styl tag should be placed in vue file. Also, there's the $http usage there which adds a dependendacy. That should be avoided. I know, writing a framework is hard. Thanks for tackling this!

[murbanowicz]

How to handle Ajax then?

Generally looks ok for you?
Is something missing?
I just want to help...

2 gru 2016 18:13 "Razvan Stoenescu" [e-mail] napisał(a):

Just create two styl files file-upload.mat.styl and file-upload.ios.styl
and place them in same directory. No styl tag should be placed in vue file.
Also, there's the $http usage there which adds a dependendacy. That should
be avoided. I know, writing a framework is hard. Thanks for tackling this!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/73#issuecomment-264522393,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI80kh0I1IPnGvsmh53lepkgEYx_68nrks5rEF_BgaJpZM4J0XDh
.

[rstoenescu]

Hi,

Good ol' XmlHttpRequest. Take a look at https://github.com/james2doyle/vue-file-upload-component/blob/master/vue.file-upload.js#L42

It's a good starting point. There are some features that still need to be implemented (mentioned them earlier). Good work.

Cheers & thx for your help,
Razvan

[murbanowicz]

Guys,
I will try to make PR tomorrow, but...
I can't finish it to 100% ready component. Matter of time and also ideas.

So far it is handling single/multiple uploads based on promises (credits to @james2doyle. The way how he handles it is so clever. I made some tweaks like writing it in ES6 which making things easier to understand, avoiding magic of bind(this) etc, but it is still his solution based on promises (to be honest it is hard to come with something totally different as it is good approach so there is no point to invent the wheel again.

It will come with:
- Single/multiple upload
- Choose files button (taking class and icon from props)
- Upload button (taking class and icon from props),
- Loading status (loading or not; do not confuse it with progress status)
- Emitting events @filesSelected, @uploadStart, @uploadCompleted, @uploadError
- Image upload - if upload type set to image, it will show thumbnails and let user to delete picture which he does not want to upload

I can't figure out GOOD idea how to show the progress of upload so far. Maybe someone else will come up with that.

[rstoenescu]

Awesome. Looking forward to your PR.

From the looks of it, Promises needs a polyfill for IE (http://caniuse.com/#search=promise). Also just asking to make sure: you're not adding any deps to Quasar, right? It's extremely important.

[murbanowicz]

I am not adding and deps, keep calm :)
I think that you can add Polyfill to main Quasar file? I think that as more as Q will be developed it will be necessary?

I got what you said and I will remember about it for any dev work which I will make for Quasar.

[rstoenescu]

@murbanowicz There's src/features/polyfills.js for adding polyfills. Keep overall code footprint as low as possible. The size of Q is important. Thanks for your help!

[murbanowicz]

Should I then remove all comments? (I was trying to comment is well to make it easier for others to contribute)

[rstoenescu]

@murbanowicz Comments are stripped out when building for production, so it's ok to leave them on.

[rstoenescu]

Uploader component available in Quasar edge or future v0.12. Some screenshots for your eyes:

Uploading:

Failure example: