File upload

[fizerkhan]

I want to upload CSV file. What is the input type for file upload?

[cristijora]

I don't see file upload being handled in the code. You can go with your own custom component and use any of the exisiting file upload components that are out there (e.g here )

[fizerkhan]

@cristijora Your commit will fix the issue right?

[cristijora]

Yes, the PR got merged and it will be available in the next build or if you need it now simply use the js from here

[fizerkhan]

@cristijora Thanks. 👍

[fizerkhan]

@cristijora I got this error after integrating this js changes

DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at Array.updateDOMProps (http://localhost:3000/app/app.js:10043:19)
    at patchVnode (http://localhost:3000/app/app.js:9559:62)
    at updateChildren (http://localhost:3000/app/app.js:9480:9)
    at patchVnode (http://localhost:3000/app/app.js:9564:29)
    at VueComponent.patch [as __patch__] (http://localhost:3000/app/app.js:9689:9)
    at VueComponent.Vue._update (http://localhost:3000/app/app.js:7663:19)
    at VueComponent.<anonymous> (http://localhost:3000/app/app.js:7630:10)
    at Watcher.get (http://localhost:3000/app/app.js:6827:27)
    at Watcher.run (http://localhost:3000/app/app.js:6896:22)
    at flushSchedulerQueue (http://localhost:3000/app/app.js:6710:13)
logError @ app.js:5601

[cristijora]

I will look into it.

[cristijora]

@fizerkhan Try not to set the initial model value for the file input to an empty string. Does this appear every time you upload something or only initially?

[fizerkhan]

@cristijora It happens only after I select a file from the file dialog.

I did not set any initial value to the model. My schema look like

{
    type: "input",
    inputType: "file",
    label: "Select a CSV",
    model: "file",
    featured: true
},

I created model like

this.model = schemaUtils.createDefaultObject(this.importProspectSchema);

[fizerkhan]

@cristijora It fixed by setting file value to ''.

this.model.file = '';

I really don't how it works. but it works.

[BramVer]

Is anyone still looking into this? Just wanted to bump the thread, since I'm experiencing the same annoyance.
Fizerkhan's fix didn't solve it for me, whether I put the initial value to null or an empty string.

The solution works, and files get transferred flawlessly, only the warning is something I'd like to omit in my final product.

[icebob]

What kind of warning?

[BramVer]

@icebob The same warning fizerkhan received. It's a DOMException, but nothing crashes and the file selection works all the same.

In my model I tried setting initial value to an empty string and null, but that doesn't make any difference.
My schema looks like this:

          {
            //ATTACHMENT
            type: "input",
            inputType: "file",
            model: "attachments",
            label: "Attachment",
            files: true,
            multiple: true,

            styleClasses: 'col-md-6',
          },

It happens right after you confirm which file to upload in the popup window.

[fizerkhan]

@BramVer Can you please set the value as empty string '' for other input fields in the form?

[BramVer]

@fizerkhan You meant setting all values in the model to an empty string, right?

That doesn't do it for me sadly, besides getting the same warning, other input fields dont work because they're not initialized of course.

I see that you manually set this.model.file to an empty string, can I ask where you did this? I tried manually setting that in 'created' as well, but does nothing.

[fizerkhan]

@BramVer I did like this

// HTML
<vue-form-generator :schema='schema' :model='model' ref='form'></vue-form-generator>

and

// Javascript
this.model = schemaUtils.createDefaultObject(mySchema);
this.model.file = '';
this.model.content = '';

Even after setting this.model.file = '';, I got the same warning for content input. So I set it to empty too.

[BramVer]

@fizerkhan This removed the warning, thank you.

Instead of doing this (which is more in line with the structure of the code):

      name: '...',

      model: {
        start_date: moment(),
        end_date: moment().add(1, 'days'),
        description: "",
        leave_type: null,
        attachments: null,
      },

      schema: { ... }

I now do this:

  created: function() {
    this.model = VueFormGenerator.schema.createDefaultObject(this.schema);

    this.model.start_date = moment();
    this.model.end_date = moment().add(1, 'days');
    this.model.attachments = '';
  },

I still don't think this should be seen as a permanent solution, but more as a workaround,
since it doesn't fit well with the flow of the remaining code.
If there're no plans on improving this, perhaps mention this issue in the docs as a workaround.

[fizerkhan]

@BramVer Great.
I agree with you that it is definitely a Work ground. It must be fixed or documented somewhere else.

[cristijora]

Not very sure whether it has been fixed. I did not follow the thread unfortunately. Detected the issue and made a PR. Maybe @icebob can provide more details here

…

On 19 June 2017 at 09:16, Nathan Thorpe ***@***.***> wrote: Hi @cristijora <https://github.com/cristijora>. Has this issue been fixed? I'm receiving the same error as #172 (comment) <#172 (comment)> using 2.0.0-beta8 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#172 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APN0ZaUya7w_weuFAJOR8rc6DD6Cp_MRks5sFhJEgaJpZM4Msiwj> .

[icebob]

Released in v2.1.1