25

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 ?

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 | |
  • 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 Jan 11 '17 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 Jan 11 '17 at 7:15
  • Tried it but datatransfer comes back as undefined – Nordine Hammache Jan 11 '17 at 7:57
  • 1
    @SimonPlacentino I'll experiment and get back to you. I'm personally interested in knowing if we can. – sfdcfox Jan 11 '17 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] – Simon Placentino Feb 8 '17 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
    It's kind of hard to tell, is this post meant to be an answer or a new question? – Adrian Larson Apr 10 '17 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 | |

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.