0

Context:

I'm a TiddlyWiki (an offline non-linear personal notebook) user, and I would like to improve the workflow of image attaching. The basic way to attach an image to a TW is to write stuff like this:

[img[image-url-either-absolute-or-relative]]

in the edit area. The issue is, if I have 20 images I'd like to attach, I have to extract 20 urls and paste them (and surrond with the [img[...]] wrappers). My idea is to write a plugin that would allow me to drag-and-drop the 20 files from a file manager to the editing area, and get 20 urls (better wrapped with basic [img[...]] syntax or some other).

Is this possible?:

Getting a url (or uri, whatever) of a local file isn't a usual operation for web applications, and for security reasons it seems to be forbidden (at least by default). Still, is there any way to imlement this? Provided that the user will accept any security warnings.

May be workaround?

If there's a possibility for a workaround (may be using AutoHotKey or smth else), I'll be glad to hear (keep in mind that the goal is to improve the workflow, so minimum of additional clicking/keypressing is desirable).

Currently, I would love to implement this for Window 7 + Opera 12.17, but of'course the more general the solution is, the better (in the end, I'll share that with others if it's that useful). And yes, currently I'm talking about TW Classic, not TW5.

YakovL
  • 7,557
  • 12
  • 62
  • 102
  • Would it be acceptable if the drag-and-drop resulted in the files being copied? There *is* an HTML5 API which supports drag-and-drop uploading and you could probably use the same mechanism TiddlyWiki uses for saving changes to write into some kind of `tiddlywiki_files` folder alongside your HTML file. – ssokolow Nov 22 '14 at 04:38
  • Yes, in some cases it is even more desirable behaviour (in some cases it's not, but anyway); but 1) does this require to create a server-side part? 2) is there a way to define names of those files programmtically, or they will be named like xJv8Kd9.jpg? 3) do you remember what API exactly are you talking about? do I have to look for it among drag-and-drop API or elsewhere? Thanks anyway. – YakovL Nov 23 '14 at 10:02

1 Answers1

0

The approach for doing it with a copy operation has two phases:

First, you use the HTML5 support for drag-and-drop upload 1 [2] to the get file into the browser.

As the page I linked demonstrates, the HTML5 File API provides you with the filename (without a path), mimetype (possibly guessed), size in bytes, and contents. (The API spec also shows a field for last modified date)

The second step is then to get the file back onto disk in a known location relative to the TiddlyWiki file and insert a relative URL at the current cursor location.

TiddlyWiki has a collection of different saver backends it uses, so you basically want to hook in and use the same API TW Classic uses to write the backup file and optional RSS ChangeLog.

Note: This may or may not yet be available in TW5. I remember seeing re-adding backup support as still on the roadmap and, judging by savers/tiddlyfox.js, it seems to currently hard-code the path of the TiddlyWiki itself. However, saving them within the Wiki as binary data tiddlers is always an option.

As for doing it without making a copy...

I get a pretty strong impression that it's not possible to do it perfectly for security reasons, but here are some ideas:

  1. If you are willing to either manually type the path or guarantee that the files will always be in a known folder, you could use the File API to retrieve the filename only.
  2. You could write a script or plugin which implements this workflow:
    1. Copy the file in Explorer
    2. Position the cursor where you want the URL
    3. Press a global hotkey

As someone who moved to Linux years ago, I'd use Python+PyGTK+python-xlib but AutoHotKey is GPLed and should allow you to do it on Windows:

  1. It can bind a global hotkey
  2. It can read the clipboard
  3. If you can't find or write an AHK clone of Python's os.path.relpath and urllib.pathname2url, you can call an external script to do the work.
  4. It can fake keypresses, allowing it to auto-type into your TiddlyWiki's edit window.
ssokolow
  • 14,938
  • 7
  • 52
  • 57
  • Thanks man, I've got similar thoughts, but thanks for putting this together. – YakovL Dec 01 '14 at 12:31
  • Unfortunately, TW saving doesn't seem to have a possibility to save binary data to disk: https://groups.google.com/forum/#!topic/tiddlywikidev/he6GqR0Sejc The only way I could imagine is to base64-encode the created files and read them asynchronously.. – YakovL Dec 01 '14 at 12:37
  • Anyway, I'll try this stuff sooner or later; I'm thinking actually about 5 components: 1) drag&drop to get file content; 2) some hacking with AutoHotKey to get file(s) path(s) [unfortunately, my knowledge of ATK is very limited and I have little idea where to start]; 3) pasting image from clipboard; 4) attaching image in the base64 form; 5) saving image to an external file (probably base64 is the way to go, but I have to figure out if it can be easily loaded to TW). – YakovL Dec 01 '14 at 12:45
  • Actually, I have 2 main applications in mind: attaching images as galleries (1/2+5 is the way to go, sometimes referencing is better then copying) and creating presentations inside TW (most needed stuff is 3+4, but other is desirable as well). – YakovL Dec 01 '14 at 12:46