2

I have a file input like this:

<lightning:input aura:id="fileInput"
            type="file" 
            label="{!v.label}" 
            name="file" 
            multiple="true" 
            accept="{!v.accept}"
            files="{!v.files}" />

And I want to have a button to clear the selected files after upload. The old answer is to do this:

component.find('fileInput').getElement().value='';

But, quite correctly, Locker Service won't let me go poking at the DOM inside the lightning namespace.

So, I might try setting v.files to null.

component.find('fileInput').set('v.files', null);

That does clear them, but when you select some more files, they don't get returned properly into v.files.

v.files is actually a FileList, which I cannot construct directly, or modify reliably. That seems to be why just zapping it with null breaks the file input.

It looks a lot like I'm stuck at another Lightning dead end... Any ideas?

  • 3
    did you try to set not null, but empty array? component.find('fileInput').set('v.files', []); – Oleksandr Berehovskyi Aug 18 '17 at 13:22
  • That's a good idea... it does seem to work. Not sure if I'm causing a potential problem for the future because I'm using an array instead of the array-like FileList, but it seems to work with a basic test. – Aidan Aug 18 '17 at 13:26
  • 2
    We are looking into this. The problem is that there is no change handler on attribute of the "files" attribute of < lightning:input> to propagate changes to the <input type=“file”/> DOM element. – JF Paradis Aug 28 '17 at 18:05
1

JF Paradis answered this above with his comment:

We are looking into this. The problem is that there is no change handler on attribute of the "files" attribute of < lightning:input> to propagate changes to the DOM element.

  • is there an update to this issue? – Lourdes Montero Aug 9 '18 at 19:34
  • No update that I know of, but I can confirm that the workaround of using component.find('fileInput').set('v.files', []) has been working fine for me in production since I posted the question. – Aidan Aug 10 '18 at 8:10
  • 1
    component.find('fileInput').set('v.files', []), this doesn't work for me. Any update on the issue? – cartman Jul 29 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.