Drag external image to input field, customize saving of tiddler

[Scott_Sauyet]

I’ve done a very tiny bit of drag-and-drop in TW, but not enough to see how to meet my latest goal. I have a form to enter biographical/demographical information about various people (new members of my local chess club.) I would like to be able to drop an image into one of the fields, and then when the user clicks “Save”, to save most of the fields in a new “Person”-tagged tiddler, but save the image as a separate tiddler, with a name derived from other fields. (That is, this might become a new JPG tiddler with name FredFlinstone.jpg.) Ideally, either the drop-zone itself or something nearby would serve to preview the image as well.

Any advice on how to do this would be appreciated. Any pointers to similar implementations would be great.

There are two drop-related widgets, but neither seems appropriate:

• The Dropzone Widget looks designed to accept tiddlers, by going through the $:/Import widget.

• The DroppableWidget looks designed to accept current tiddlers – or collections of them – and do something with them when they’re dropped.

I don’t want to go through $:/Import. I just want to drop the image into a target on the form, show a preview, and save it to a new tiddler when I save.

Any ideas?

[pmario]

I would name the external image FredFlinstone.jpg and then import it with that name. IMO this will solve the problem without any new code needed.

[Scott_Sauyet]

@pmario

I would name the external image FredFlinstone.jpg and then import it with that name.

I currently import it with the existing file name and rename the resulting tiddler, which is similar, but which I don’t want to ask my TW-novice users to do if I don’t have to.

I glossed over this I guess: it’s not exactly files that I would expect to drag, but images from another site. So unless I do a save-image/rename/drag-to-wiki/import dance, I don’t have an opportunity to rename before it lands.

I also didn’t mention that the model I’m picturing is the uncountable number of sites that have an “Update Profile” page that lets you drag a new picture for your avatar. I’m hoping to achieve something similar. But I don’t want people to spend a great deal of time looking at this. If it’s not something already supported, it’s only a minor issue for me, and I won’t bother with it. But if there is already a pattern for doing this, I’d love to know.

[TW_Tones]

Scott,
I know its not the answer but;

• Have you dropped an image into the text body editor - during import you can rename, it imports the image and inserts an image reference [img[Globe-icon.png]]
  • However once imported and relink operating, it could be as simple as renaming the tiddler.
• The current default of using the import process is just a default and interactive behaviour, you can both modify that process or replace with an alternative, however it may be best to use a different area, eg a person tiddlers body.
  • Reviewing the current drop on text field mechanism may contain some of the code you need.
  • Since dropping a file triggers actions, perhaps one could also trigger a rename of an image such as to $:/images/tiddlernameN

Notes;

• There are gaps in the drag and drop features some of which have being discussed recently.
  • Every time I try and build a drag and drop mechanism I find it fussy and hard to follow for some reason. I suspect the documentation is incomplete or misleading in some way, but perhaps also has feature gaps.

Futures
I think the we could provide a mechanism for this rather than everyone having to reinvent the wheel. Something like;

• Presenting a dropzone on selected tiddlers that allows a file or image that is imported and saved with a unique name based on the current tiddler and a link to that image, perhaps stored in a nominated fieldname, thus transcludable.

[Scott_Sauyet]

@TW_Tones

Have you dropped an image into the text body editor - during import you can rename, it imports the image and inserts an image reference [img[Globe-icon.png]]

I have.

@TW_Tones

However once imported and relink operating, it could be as simple as renaming the tiddler.

Yes, that’s fairly similar to my current workflow, one I would still like to replace since I’m hoping this wiki can be used by those with essentially no prior TW experience. But I’m not desperate for this. The process isn’t horrible; it just requires more explanation/training than I would like.

@TW_Tones

Reviewing the current drop on text field mechanism may contain some of the code you need.

Thank you. I will try to do that in the next few days.

@TW_Tones

Every time I try and build a drag and drop mechanism I find it fussy and hard to follow for some reason. I suspect the documentation is incomplete or misleading in some way, but perhaps also has feature gaps.

Agreed. At the very least, it is missing examples.

@TW_Tones

I think the we could provide a mechanism for this rather than everyone having to reinvent the wheel.

I can’t tell if others have been requesting something similar. I still don’t know if this is something easy to do with the tools we have, something possible but difficult, or something not supported without adding some new core features. And I think that again speaks to the documentation.

[Springer]

@Scott_Sauyet

I would like to be able to drop an image into one of the fields, and then when the user clicks “Save”, to save most of the fields in a new “Person”-tagged tiddler, but save the image as a separate tiddler, with a name derived from other fields.

I’d try having an edit-template that shows a custom drop-zone (not a field), which becomes visible only once the necessary name fields are filled in, and which is configured to import an image tiddler, with your custom-concatened name string, when an image is dropped into that drop-zone.

I don’t currently have the chops to build such a thing myself, but given that custom drop zones are a thing, and that variables are a thing, I don’t see what prevents having a tiddler-specific drop zone that appears only in edit mode and only once the conditions you care about (for naming) are satisfied…

[TW_Tones]

@Springer

but given that custom drop zones are a thing

This reminds me I have an unpublished tool that allows one to drop html links on tiddlers, and it adds them to the tiddlers fields, eg link, link-1. Incrementing the field name if necessary, although allowing field rename in the view template with a click.

All we need now is a way to make an edit field that accepts a typed image tiddler title, pasted or dropped image that does the same as when dropping an image on the text editor.

The standard text editor is in $:/core/ui/EditTemplate/body/default and you can see how it implements the dropzone. But also transcludes $:/core/ui/EditTemplate/body/editor so it gets a little complex.

[Scott_Sauyet]

@Springer

I’d try having an edit-template that shows a custom drop-zone (not a field), which becomes visible only once the necessary name fields are filled in, and which is configured to import an image tiddler, with your custom-concatened name string, when an image is dropped into that drop-zone.

That sounds like a good design. I will attempt it. Thank you.

@TW_Tones

The standard text editor is in $:/core/ui/EditTemplate/body/default and you can see how it implements the dropzone. But also transcludes $:/core/ui/EditTemplate/body/editor so it gets a little complex.

Thank you for looking into that. I will dig into this code to see what I can do.