Drag Drop File

Drag files over a droppable area to upload them.

Dependencies

• Circular Progress Bar

How to

The Drag and Drop File component allows the user to select and upload files, dropping them in a drop area. It has the additional option of choosing files from the device storage.

You can initialize it using the Ddf object:

var ddf = document.getElementsByClassName('ddf')[0]; // your form element
new Ddf({element: ddf});

Note that in the drag-drop-file.js, we do not initialize the Ddf object. You should initialize it and store the object instance to use it when uploading your files (see Server Side upload section).

Options #

The Ddf object comes with different initialization options:

• showFiles: if set to true, the plugin will show the list of files that the user selected (see --list demo). Default is false;
• replaceFiles: if set to true, when the user selects new files, those files will replace the ones previously uploaded. Default is true;
• upload: if set to true, the plugin will add a progress bar to show the upload status of the files (see the Upload files section for more info on how to animate the progress bar). Default is false;
• maxFiles: specify the max number of files the user can upload. By default there's no limit to the number of files;
• maxSize: max size of the file (in kb) the user can upload (eg, 3000). By default there's no limit to the size of files.

In addition to the above options, you can specify the allowed file types using the accept attribute of the <input type="file"> element (here's a list of unique file type specifiers).

Here's an example of how to initialize your Ddf object to show the list of selected files and set a max file size of 1Mb:

var ddf = document.getElementsByClassName('ddf')[0]; // your form element
new Ddf({
  element: ddf,
  showFiles: true,
  maxSize: 1000
});

Custom Events #

You can listen to the following custom events to customize your component:

• filesUploaded: new files where selected;
• rejectedWeight: during the selection, some files were rejected for their weight;
• rejectedFormat: during the selection, some files were rejected because their format is not allowed;
• rejectedNumber: during the selection, some files were rejected because the user uploaded too many files;
• fileRemoved: user removed one of the files from the list of selected files (applicable only when showFiles option is true).

Here's an example of how to use those events:

var ddf = document.getElementsByClassName('ddf')[0];
var ddfObj = new Ddf({
	element: ddf,
  maxFiles: 10,
	showFiles: true,
	maxSize: 1000
});

ddf.addEventListener('filesUploaded', function(){ 
  // new files have been selected
  // ddfObj.droppedFiles -> gives you the list of all selected files
  // ddfObj.lastDroppedFiles -> gives you the list of the last selected files. It may be different from ddfObj.droppedFiles if replaceFiles option is false
});

ddf.addEventListener('rejectedWeight', function(event){
  // event.detail gives you the list of the rejected files
});

ddf.addEventListener('rejectedFormat', function(event){
  // event.detail gives you the list of the rejected files
});

ddf.addEventListener('rejectedNumber', function(event){
  // event.detail gives you the list of the rejected files
});

ddf.addEventListener('fileRemoved', function(event){
  // event.detail gives you the removed file
});

Server Side upload #

The Drag and Drop File component does not handle the server side upload of your files. You will need to implement it based on the server side language you are using.

Here's some additional info on how to do that.

Upload the files at form submit #

You can use the droppedFiles property of the Ddf object to get the list of the selected files. Here's an example:

var ddf = document.getElementsByTagName('form')[0];
var ddfObj = new Ddf({element: ddf});

ddf.addEventListener('submit', function(event){ 
  // your form has been submitted
  event.preventDefault();
  var formData = new FormData(ddf); // store your form data in a set of key/value pairs that you can pass to your backend

  for(var i = 0; i < ddfObj.droppedFiles.length; i++) {
    // add the ddFile[] key to your formData object to store selected files
    formData.append('ddFile[]', ddfObj.droppedFiles[i]);
  }

  // now pass the formData object to your backend (as you would normally do)
  // the ddFile[] key contains the list of selected files
});

Upload files right after user has dropped them #

If you want to upload the files as soon as the user has selected them (you won't need to wait for a form submission), use the filesUploaded custom event.

Note: in this case, we suggest you set the upload option to true when initializing the Ddf object (a progress bar is shown).

var ddf = document.getElementsByClassName('ddf')[0];
var ddfObj = new Ddf({
  element: ddf,
  showFiles: true, 
  upload: true
});

ddf.addEventListener('filesUploaded', function(event){
  // ddfObj.lastDroppedFiles is the list of the files you need to upload
});

The progress property of the Ddf object is used to store the progress bar elements. If showFiles option is true, you'll have one progress bar for each file (you'll need to update them separately); if showFiles is false, a single progress bar will be used.

The Drag and Drop component uses the Circular Progress Bar component as progress bar.

You can use the updateProgress custom event of the Circular Progress Bar component to update the progress bar status. For example, if showFiles is false (one progress bar) and you want to update the progress to 70%:

var progressEvent = new CustomEvent('updateProgress', {detail: {value: 70, duration: 100}});
ddfObj.progress[0].dispatchEvent(progressEvent);

You can find more info on the updateProgress event in the Circular Progress Bar Info page.

⭐️ Icons by Nucleo.

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗