+ Start a Discussion
Peter BölkePeter Bölke 

Drag'n'Drop not working in Lightning

Hello,

i have this upload field but drag'n'drop is not working.

            <div class="slds-form-element slds-size--1-of-2">
                <div class="slds-form-element__control">
                    <div class="slds-file-selector slds-file-selector_files">
                        <div class="slds-file-selector__dropzone slds-has-drag-over">
                            <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png, .pdf" recordId="{!v.recordId}" id="fileinput" aria-labelledby="file-selector-primary-label file-selector-secondary-label" aura:id="fileinput"/>
                            <label class="slds-file-selector__body" for="fileinput" id="file-selector-secondary-label">
                                <span class="slds-file-selector__button slds-button slds-button_neutral">
                                   Select Files</span>
                                <span class="slds-file-selector__text slds-medium-show">Drop files here</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

I need a hint :)

thanks
Peter
Best Answer chosen by Peter Bölke
Khan AnasKhan Anas (Salesforce Developers) 
Hi Peter,

I trust you are doing very well.

You are using a lightning design system, that's just the styling for the component.

I suggest you use <lightning:input type="file"> or <lightning:fileUpload>

If you want to include this component on detail page of sObject you can use below code.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <lightning:fileUpload label="Upload Multiple files"
                          multiple="true" 
                          accept=".pdf, .png, .jpeg, .jpg"
                          recordId="{!v.recordId}"
                          aura:id="multipleUpload"
                          onuploadfinished="{!c.handleUploadFinished}" />
</aura:component>

Controller:
({
    handleUploadFinished: function (cmp, event) {
        // fetch the list of all the files that have been uploaded
        var uploadedFiles = event.getParam('files');
        // show success message – with no of files uploaded
        var toastEvent = $A.get('e.force:showToast');
        toastEvent.setParams({
            'title': 'Success!',
            'type' : 'success',
            'message': uploadedFiles.length + ' files has been updated successfully!'
        });
        toastEvent.fire();
        
        // Refresh the page to that recently uploaded files will display under the object record.
        $A.get('e.force:refreshView').fire();
        
        // Close the quick action panel
        var dismissActionPanel = $A.get('e.force:closeQuickAction');
        dismissActionPanel.fire();
    }    
})

Also you can refer this blog for Custom File Upload In Salesforce Lightning Component:

http://sfdcmonkey.com/2017/09/25/file-upload-lightning-component/


I hope it helps you.

Kindly let me inform if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Peter,

I trust you are doing very well.

You are using a lightning design system, that's just the styling for the component.

I suggest you use <lightning:input type="file"> or <lightning:fileUpload>

If you want to include this component on detail page of sObject you can use below code.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <lightning:fileUpload label="Upload Multiple files"
                          multiple="true" 
                          accept=".pdf, .png, .jpeg, .jpg"
                          recordId="{!v.recordId}"
                          aura:id="multipleUpload"
                          onuploadfinished="{!c.handleUploadFinished}" />
</aura:component>

Controller:
({
    handleUploadFinished: function (cmp, event) {
        // fetch the list of all the files that have been uploaded
        var uploadedFiles = event.getParam('files');
        // show success message – with no of files uploaded
        var toastEvent = $A.get('e.force:showToast');
        toastEvent.setParams({
            'title': 'Success!',
            'type' : 'success',
            'message': uploadedFiles.length + ' files has been updated successfully!'
        });
        toastEvent.fire();
        
        // Refresh the page to that recently uploaded files will display under the object record.
        $A.get('e.force:refreshView').fire();
        
        // Close the quick action panel
        var dismissActionPanel = $A.get('e.force:closeQuickAction');
        dismissActionPanel.fire();
    }    
})

Also you can refer this blog for Custom File Upload In Salesforce Lightning Component:

http://sfdcmonkey.com/2017/09/25/file-upload-lightning-component/


I hope it helps you.

Kindly let me inform if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Peter BölkePeter Bölke
Hello Khan,

thanks for your reply. For two reason i dont want to use this. First it's BETA and second, the file upload is part of a form. I want to upload on save. But the lightning:upload starts uploading instantly.

regards
Peter
Alain CabonAlain Cabon
Hello,

Integration: Upload excel sheet’s data into salesforce
Posted on March 6, 2016
http://www.ajay-gupta.com/2016/03/06/integration-upload-excel-sheets-data-salesforce/

Import data from excel into salesforce:
  • No Need to upload file in salesforce org.
  • No Need to using any external on premise connectors.
  • No Need of any Salesforce Rest API or SOAP API.
I have used this technique based on the great Ajay Gupta's blog but my goal was to read Excel files directly (next step).
Nevertheless, there is the drag and drop of files included.

As it is written in javascript, that could be used in Lightning "probably" but not tested and Lex is closed to many javascript libraries not compliant with the locker service.

JavaScript ES5 Strict Mode Enforcement​: The libraries that your components use must also work in strict mode.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_strict_mode.htm
 
Rahul Yadav 272Rahul Yadav 272
Hi Peter,

I'm facing the same issue. Did you founf any solution ?