I am seeking to make a VF page using SLDS including the . Below is how the documentation has the file upload element.
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-id">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">
<div class="slds-file-selector__dropzone">
<input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id">
<label class="slds-file-selector__body" for="file-upload-input-01">
<span class="slds-file-selector__button slds-button slds-button_neutral">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
</svg>Upload Files</span>
<span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
</label>
</div>
</div>
</div>
</div>
I was not sure how to wire up an input tag to my controller, so I opted to use the apex:inputFile element.
the updated code is below. The element did not support aria-describedby, did not need the file type and I added a value (required). The current page, when I select the file picker button, does not pull up the modal for choosing a file. Any help would be appreciated.
<div class="slds-form-element">
<span class="slds-form-element__label" id="file-selector-id">Attachment</span>
<div class="slds-form-element__control">
<div class="slds-file-selector slds-file-selector_files">
<div class="slds-file-selector__dropzone">
<apex:inputFile styleClass="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" value="foo" />
<label class="slds-file-selector__body" for="file-upload-input-01">
<span class="slds-file-selector__button slds-button slds-button_neutral">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
</svg>Upload Files</span>
<span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
</label>
</div>
</div>
</div>
</div>
<apex:inputFile html-aria-describedby="file-selector-id" ...
– sfdcfox Aug 16 '17 at 4:43