SharePoint. Drag-and-Drop File Uploading
In SharePoint there is a native client-side control which provides drag'and'drop file uploads to document library.
Supported Versions of SharePoint
That functionality has been released with SharePoint 2013. Therefore all SharePoint 2013+ instances are supported and SharePoint Online also is as well.
HTML
To initialize client-side control you need to provide HTML-element which will be used as a drag zone. Something like the following HTML-snippet:
In my sample I've added some style to make drag zone more bigger and bordered:
Configuration
The client-control has the following parameters:
- dropTargetElement - HTML elements about I said above;
- serverUrl - URL-address of the server, can be "/";
- siteRelativeUrl - server relative URL of the site collection. Can be reached via _spPageContextInfo.siteServerRelativeUrl property;
- listName - ID of the document library. Guid, not Name;
- rootFolder - path to the target folder. If equals "" file will be uploaded into the root folder;
- overwriteAll - boolean. If true - file will be replaced if already exists;
- hideProgressBar - boolean. If true - progress bar is not visible;
- refreshFunction - JavaScript function to handle change state of uploading process;
- preUploadFunction - function called before start uploading; - postUploadFunction - function called after uploading processed is finished;
- checkPermissionFunction - function called before preUploadFunction one;
checkPermissionFunction
This argument is for custom validation. If this function is provided and it does not return true uploading process will no start. So if you do not need to validate permission do not use this function.
Handlers
All functions (refreshFunction, preUploadFunction, postUploadFunction) take the single argument of type FileElement[]. FileElement class:
status can have one the following values:
- -1 - INVALID
- 0 - PENDING
- 1 - SKIP
- 2 - READING
- 3 - READ
- 4 - UPLOADING
- 5 - UPLOADED
- 6 - FAILED
- 7 - WARNING
Prerequisites
Client-side uploader defined in DragDrop.js file stored in SharePoint Hive. To use it you need to load this js:
All is set. Now just call registerDragUpload method to get the result.
JavaScript
The following JavaScript code initializes drag'n'drop control:
Result
For testing of this approach you can add the following snippet to a page located in SharePoint on-premise/online:
And the result: