26

With the Spring 17 release one of the new change on the markup is the introduction of the type file to the lightning:input, however I can't seem to get the file back, only a fakepath with the name of the file.

I've tried 

<lightning:input aura:id="fileSelector" type="File" label="Upload file"/>

component.find('fileSelector').get('v.files'));

Is there a way to get the file without using a standard input ?

Improve this question

3 Answers 3

Reset to default
6

lightning:input is still beta, and has quite a few problems. It doesn't even currently have a documented files attribute at the moment. As far as I'm aware, you still need to use a native input element of type "file".

Improve this answer
12
  • 1
    But I'm using an org in Spring 17 and the documentation doesn't list it as beta anymore (developer.salesforce.com/docs/atlas.en-us.206.0.lightning.meta/…) Now I'm not allowed to push standard input anymore (via Illuminated cloud).
    – Nordine Hammache
    Commented Jan 11, 2017 at 7:08
  • @NordineHammache Notice the Safe Harbor notes at the top. They're anticipating it'll be available for Spring 17, but it's probably not fully functional. Even if you can use it as described in those notes, you'll probably have to use component.find("myInputField").getElement().datatransfer.files instead of the simpler component.find("myInputField").get("v.files") you were anticipating.
    – sfdcfox ♦
    Commented Jan 11, 2017 at 7:15
  • Tried it but datatransfer comes back as undefined
    – Nordine Hammache
    Commented Jan 11, 2017 at 7:57
  • 1
    @SimonPlacentino I'll experiment and get back to you. I'm personally interested in knowing if we can.
    – sfdcfox ♦
    Commented Jan 11, 2017 at 8:24
  • 1
    @sfdcfox any news about ? A find().getElement() on a lightning input type file returns a div so I still need to do childNodes[1].childNodes[0].files[0]
    – Simonp
    Commented Feb 8, 2017 at 6:30
3

I've been able to use lightning:input as file selector, if you set an attribute in the component to store the files. 

    <aura:attribute name="FileList" type="Object"/>
<lightning:input aura:id="file-input" type="file" files="{!v.FileList}" label="Files" 
                 name="file" multiple="true" onchange="{! c.handleFilesChange }"/>

You can then access the files with component.get("v.FileList");

With LockerService off, the REST API is available to upload files, but I haven't figured out how to get the files uploaded to the cloud with LockerService activated yet.

Improve this answer
1
  • 1
    It's kind of hard to tell, is this post meant to be an answer or a new question?
    – Adrian Larson ♦
    Commented Apr 10, 2017 at 21:04
3

If you are using onchange="{! c.handleFilesChange }" on the lightning:input component, you can get the list of files by using the following command: event.getSource().get("v.files"), according to the docs.

I have tried it myself (on v40) and it is working.

..helper.js:

handleFilesChange : function(component, event)
{
    var uploadFile = event.getSource().get("v.files")[0];
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .