Uncaught TypeError: Cannot read property 'submitButtonSelector' of undefined

Sorry, yeah, server validation. In node edit, when I press the submit button and the form validation fails and page reloads again, I get this error and the drag and drop no longer works. However, if I use 'hook_form_alter' and put the code in an after build function it does then work after validation. I've not tested this on a vanilla Drupal install though, which I will do later today - I am using a lot of modules for the site I'm working on.

Just curious, could you not attach this to the form instead? eg:

<?php
    $selector = variable_get('dragdropfile_submit_button_selector', DRAGDROPFILE_SUBMIT_BUTTON_SELECTOR);
    $element['#attached']['js'][] = array(
      'data' => array('dragDropFile' => array('submitButtonSelector' => $selector)),
      'type' => 'setting'
    );
?>

UPDATE
=======

I created a site at https://simplytest.me/ with this module and the same problem occurs.

Step 1: Create a site with drag and drop enabled, add an image field to a content.
Step 2: Go to add content, click submit and validation should fail as no title.
Step 3: Drag a file into the box. Nothing happens but error shown in console.

My hunch is the setting is not being remembered due to form caching, so maybe attaching or adding in after_build could fix?

As I understand it, dragdropfile_field_widget_form_alter() will not run again after validation fails, because the form is called from the cache at this time. So the call to drupal_add_js() to add the setting does not run causing the JS error as your JS code is expecting it.

Either of the below solutions fix the problem for me.

1) Move your drupal_add_js() code into an after_build function.

<?php
...

    // Custom submit button selector.
    $element['#after_build'][] = 'dragdropfile_attach_resources_after_build';
  }
}
?>

<?php
function dragdropfile_attach_resources_after_build($form, &$form_state) {
  $selector = variable_get('dragdropfile_submit_button_selector', DRAGDROPFILE_SUBMIT_BUTTON_SELECTOR);
  drupal_add_js(array('dragDropFile' => array('submitButtonSelector' => $selector)), 'setting');
  
  return $form;
}
?>

2) Replacing drupal_add_js() with #attached

<?php
    $selector = variable_get('dragdropfile_submit_button_selector', DRAGDROPFILE_SUBMIT_BUTTON_SELECTOR);
    $element['#attached']['js'][] = array(
      'data' => array('dragDropFile' => array('submitButtonSelector' => $selector)),
      'type' => 'setting'
    );
?>

I think the best way is using #attached.

I can add more settings in #attached, but the problem is if they exist double

I'm not sure what you mean but I think render() uses drupal_add_js() when it sees #attached anyway, so it should work the same as how you have it now, the only difference is that drupal_add_js() is eventually getting called after validation and not lost due to form caching. That's how I understand it anyway.

Ah yes, I'm seeing the other bug. When validation fails, I can now (with the fix) drag an image over, but if validation fails again after that, the drag and drop container disappears.

Removing the if (empty($form_state['#dragdropfile'])) check fixes the problem. I don't think that's needed as the array that is built to add the css and js assets use the filename as the key, so there is no risk of duplicating assets. If you go to drupal_add_js() at the bottom it says:

<?php
...
      default: // 'file' and 'external'
        // Local and external files must keep their name as the associative key
        // so the same JavaScript file is not added twice.
        $javascript [$options ['data']] = $options;
...
?>

Your module works a treat now, thank you.

Oh I see. Not sure, but if I put only the settings part of the code in the check it still works:

<?php
/**
 * Helper to attach JS and CSS resources to a form.
 */
function _dragdropfile_attach_resources(&$element, &$form_state) {
  // Expose this field.
  $element['#dragdropfile'] = TRUE;
  $upload_method = variable_get('dragdropfile_upload_method', DRAGDROPFILE_UPLOAD_METHOD);

  // Add resources to this form.
  $path = drupal_get_path('module', 'dragdropfile');
  $element['#attached']['js'][] = $path . '/Drupal.ajax.prototype.eventResponse.js';
  $element['#attached']['js'][] = $path . '/dragdropfile-' . $upload_method . '.js';
  $element['#attached']['css'][] = $path . '/dragdropfile.css';
  if (variable_get('dragdropfile_cancel_all_drops', DRAGDROPFILE_CANCEL_ALL_DROPS)) {
    $element['#attached']['js'][] = $path . '/dragdropfile-lousy-aim.js';
  }
    
  // Attach global resources.
  if (empty($form_state['#dragdropfile'])) {
    $form_state['#dragdropfile'] = TRUE;

    // Custom submit button selector.
    $selector = variable_get('dragdropfile_submit_button_selector', DRAGDROPFILE_SUBMIT_BUTTON_SELECTOR);
    $element['#attached']['js'][] = array(
      'data' => array('dragDropFile' => array('submitButtonSelector' => $selector)),
      'type' => 'setting'
    );
  }
}
?>