Editing Image fields after upload

[sanderha]

What would be the best way to give a user the ability to edit the Title field on Image, after it has been uploaded?

I've got a use case where users upload images in a form, and then be able to set a caption for each image. Then the form is submitted.

Not sure if this module out of the box can easily let me build such functionality.

[unclecheese]

Usually the way you do this is by wrapping the file in a DataObject.

class MyFileDataObject extends DataObject
{
  private static $db = ['Caption' => 'Varchar'];

  private static $has_one = ['File' => 'File'];

  public function getCMSFields()
  {
    $fields = FieldList::create(TabSet::create('Root'));
    $fields->addFieldsToTab('Root.Main', [
      TextField::create('Caption'),
      FileAttachmentField::create('File')
    ]);
    
    return $fields;
}

Then just manage these objects with a GridField.

[sanderha]

Indeed, but I'm using it through the frontend .. Currently I use some ajax after upload of the images to load some textfields in for each image.. Just seems pretty crappy.

[satrun77]

I'm working on a project that requires this feature. I have managed to get it working with a bit of work.

• Set custom preview template that includes placeholder fields for any additional data.

  $upload =  new FileAttachmentField('name');
  $upload->setPreviewTemplate('CustomPreviewTemplate');      

• Load JS file to access the dropzone isntance.

var uploadInstance = Dropzone.forElement('#id-of-element');
 uploadInstance.on("success", function(file, serverID) {
         // serverID parameter is the database ID of the uploaded file.
         // You can use the serverID to change the name attribute of caption field to something like
         // name="Caption[serverID]['title']" 
});

• On form submission you can update the File details.