I posted this in the spark project too, but I think it should've gone here instead (sorry don't know if its possible to move an issue between projects, I don't mean to cross-post). The issue is posted here in spark: http://drupal.org/node/1962448

At the moment its a field formatter (because we needed it in a view) for image fields in D7, but I think for edit integration it should become a widget instead.
I'm willing to contribute/develop this further to have this in edit/spark, if this sort of interaction seems usefull. If time permits i could try to make a small video of how it works. Basically you install the module and change the display formatter of a image_field to "Dropzone". If you view a node then, you can just drag and drop an image onto the dropzone (or replace/delete an existing image). The node is then automatically saved, without any extra clicks.

Thoughs, ideas good or bad, shoot, I love to hear it.

Comments

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Image field drag n drop » Image field drag n drop Create.js PropertyEditor widget
Category: feature » support

Yes, it would need to become a widget :)

However, that probably doesn't really make sense when used in forms.
I think that what you want to achieve is to *not* have an in-place form editor appear, but instead have it appear "in-place" like CKEditor works in-place?
In that case, you can just implement a "dropzone" Create.js PropertyEditor widget (not to be confused with a Field API Widget). Look in Edit module's js/createjs/editingWidgets directory for the three implementations that Edit module ships with. This would need to live in its own module, with the following key parts:

1) Implement hook_edit_editor_info() and the related callbacks (see edit.api.php).

2) in a hook_library() implementation:

  $libraries['edit.editorWidget.dropzone_image'] = array(
    'title' => 'Dropzone Image Field Create.js PropertyEditor widget',
    'version' => VERSION,
    'js' => array(
      $path . '/js/dropzone_image_widget.js' => $options,
    ),
    'dependencies' => array(
      array('edit', 'edit'),
    ),
  );

3) Let Edit module know that your new Create.js PropertyEditor widget is actually usable by *any* image field for in-place editing.

/**
 * Implements hook_field_formatter_info_alter().
 *
 * Image fields can use the 'dropzone_image' editor, so we enrich the
 * field formatter info metadata to indicate this.
 */
function dropzone_image_field_formatter_info_alter(&$info) {
  if (module_exists('image')) {
    $info['image']['settings']['edit']['editor'] = 'dropzone_image';
  }
}

Have fun, and I can't wait to see the end result! :) Let me know if you need more help.

How does this handle the image's Alt/Title (which can be part of an image field)? And a multivalued image field? Those are the tricky aspects.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +Spark
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +sprint

I think it's appropriate for us to keep tracking this :)

kriboogh’s picture

kriboogh commented
Assigned: Unassigned » kriboogh

Multivalue is handled (I should make that video, that way you can see it in action), the alt and description are not in place but can be easily added i think. I'll try to cook something up, maybe later today or next week. Thanks for the pointers! :-)

kriboogh’s picture

kriboogh commented

Ok i've created a new module 'dropzone' for this. I get a javascript error stating the 'dropzone' module is not found.
Uncaught Error: dropzone widget is not available

I compared my codewith the ckeditor and direct widgets in edit module, but I'm a bit stuck.

I have:
dropzone/js/createjs/editingWidgets/dropzonewidget.js
dropzone/includes/dropzone.editor.inc
dorpzone/dropzone.module

The dropzonewidget.js contains:
jQuery.widget('Midgard.dropzone', jQuery.Midgard.direct, {

The dropzone.editor.inc contains:

function _dropzone_editor_is_compatible(array $instance, array $items) {
  $field = field_info_field($instance['field_name']);
  return TRUE;
}

function _dropzone_editor_metadata(array $instance, array $items) {
  return array();
}

function _dropzone_editor_attachments() {
  return array(
    'library' => array(
      array(
        'edit',
        'edit.editorWidget.dropzone'
      ),
    ),
    'js' => array(
      array(
        'type' => 'setting', // available as Drupal.settings.edit.dropzone.key
        'data' => array(
          'edit' => array(
            'dropzone' => array(
              'key' => 'value',
            ),
          ),
        ),
      ),
    ),
  );
}

The dropzone.module contains these hooks:

/**
 * Implements hook_edit_editor_info().
 */
function dropzone_edit_editor_info() {

  $editors['dropzone'] = array(
      'widget' => 'dropzone',
      'compatibility check callback' => '_dropzone_editor_is_compatible',
      'metadata callback' => '_dropzone_editor_metadata',
      'attachments callback' => '_dropzone_editor_attachments',
      'alternativeTo' => array('direct'),
      'file' => '/includes/dropzone.editor.inc',
      'file path' => drupal_get_path('module', 'dropzone'),
  );

  return $editors;
}

/**
 * Implements hook_library().
 */
function dropzone_library() {

  $path = drupal_get_path('module', 'dropzone');
  $options = array();

  $libraries['edit.editorWidget.dropzone'] = array(
      'title' => '"Dropzone" Field Create.js PropertyEditor widget',
      'version' => VERSION,
      'js' => array(
          $path . '/js/createjs/editingWidgets/dropzonewidget.js' => $options,
          $path . '/js/jquery.filedrop.js' => array(),
      ),
      'dependencies' => array(
          array('edit', 'edit'),
          array('system', 'drupal.ajax'),
      ),
  );

  return $libraries;
}

/**
 * Implements hook_field_formatter_info_alter().
 *
 * Image fields can use the 'dropzone' editor, so we enrich the
 * field formatter info metadata to indicate this.
 */
function dropzone_image_field_formatter_info_alter(&$info) {
  if (module_exists('image')) {
    $info['image']['settings']['edit']['editor'] = 'dropzone';
  }
}

Anything i'm missing here?

kriboogh’s picture

kriboogh commented

Ok I found my mistakes. I had to add the $options scope and weight in the library definition, also the module in the attachment callback was wrong.

moving on... :-)

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented 
'library' => array(
      array(
        'edit',
        'edit.editorWidget.dropzone'
      ),
    ),

The first 'edit' should be the name of your module; now you're saying it's Edit module that ships with this library :)

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: -sprint

That was wrong for a while now.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue summary: View changes

typo :-)

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue summary: View changes
Status: Active » Closed (fixed)

I've answered the support questions asked here, and this issue has been silent for ±6 months. Closing.