Drag & Drop External File/Attachment linking

[Blake Blacksmith]

Instead of drag and drop being limited to full binary imports of a file(which bloats the Wiki and makes editing files cumbersome) is there a way to drag and drop a file that is within a TiddlyWiki's folder and have it expressed as a local file link? 

For clarity here is an example:

I have a TW in folder "Wiki" and an image in "Wiki/images/". Could we make is so that when we drag and drop the image "Wiki/images/bunnies.jpg" into a text area TW checks that the file is within its folder (in this case in "Wiki") and if it is have the relative link text [[file:./Wiki/images/bunnies.jpg]] show up and if it not have the absolute link text show up [[file:/C:/Users/Me/Wiki/images/bunnies.jpg]]

Right now I am manually inserting relative links but this is very time consuming when I must link many files into a Tiddlers text. I currently do not have the time to make my own plugin that does this but think such a plugin would extend the use-cases of TW to in-the-field/real time  note taking.

[Ed Dixon]

Hi,

+1 This is a wish list item for me as well. A popup dialog with embed or download media option might work even better for others that do not have this need however. This would be a terrific feature to have if it is possible.

[Jeremy Ruston]

Hi Blake, Ed,

Unfortunately, when you drag things into a browser we only get to see the embeddable data; for security reasons, the path to the item is not passed. That means it is currently not possible to drag and drop an image and have it show up as an external image.

Sadly, drag and drop support across browsers is very inconsistent and limited, and security considerations prevent a lot of useful things from being possible.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Mark S.]

I asked the same thing back in September:

  https://groups.google.com/forum/#!topic/tiddlywiki/ShwJuDPhSTQ

According to Jeremy, the problem is that the browser API doesn't expose the file paths during a drag/drop. So it would take some additional Firefox plugin or other tool to allow this.

It is possible to open a file browser in a firefox tab and then drag/drop file names from there. However, they are imported as "untitled" tiddlers and have to be massaged into usable links. Obviously, FF does allow access to the file path name when dragging from another FF tab.  So a good compromise solution to my way of thinking would be if TW could turn those drag/drops into usable file or image links.

Mark

[Jeremy Ruston]

Hi Mark

It is possible to open a file browser in a firefox tab and then drag/drop file names from there. However, they are imported as "untitled" tiddlers and have to be massaged into usable links. Obviously, FF does allow access to the file path name when dragging from another FF tab.  So a good compromise solution to my way of thinking would be if TW could turn those drag/drops into usable file or image links.

Are you asking for the import handling to recognise that dragged text resembles a file path and treat it differently? I do wonder if that might not cause problems; a word like "jeremy" is a valid file path after all.

Best wishes

Jeremy.

 

Mark

On Tuesday, November 4, 2014 10:26:56 PM UTC-8, Blake Blacksmith wrote:

Instead of drag and drop being limited to full binary imports of a file(which bloats the Wiki and makes editing files cumbersome) is there a way to drag and drop a file that is within a TiddlyWiki's folder and have it expressed as a local file link? 

For clarity here is an example:

I have a TW in folder "Wiki" and an image in "Wiki/images/". Could we make is so that when we drag and drop the image "Wiki/images/bunnies.jpg" into a text area TW checks that the file is within its folder (in this case in "Wiki") and if it is have the relative link text [[file:./Wiki/images/bunnies.jpg]] show up and if it not have the absolute link text show up [[file:/C:/Users/Me/Wiki/images/bunnies.jpg]]

Right now I am manually inserting relative links but this is very time consuming when I must link many files into a Tiddlers text. I currently do not have the time to make my own plugin that does this but think such a plugin would extend the use-cases of TW to in-the-field/real time  note taking.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Mark S.]

Hi Jeremy,

I'm assuming (perhaps incorrectly) that when you drag/drop a link from a FF link (not from Windows explorer) that FF exposes more information. Here's what shows up after a drag/drop/import sequence from a Firefox tab being used as a local file browser:

 

   Untitled 1

    file:///d:/data/Proj/PhotoScrapbook/origs/%7B040%7DIM-3837.jpg

So, there's more there than just a file name. The "file:///" should provide a clue that this is a file (not ordinary text) and the suffix indicates that it is an image.

Thanks!

Mark

[Jeremy Ruston]

Hi Mark

I'm assuming (perhaps incorrectly) that when you drag/drop a link from a FF link (not from Windows explorer) that FF exposes more information.

Ah, right. I thought you meant dragging and dropping the text from Firefox's address bar.

 

Here's what shows up after a drag/drop/import sequence from a Firefox tab being used as a local file browser:

We could indeed introduce special behaviour for dragging links; the browser identifies the text as a link when it is dropped. The problem is that it's not clear what that behaviour should be; for image links, I'd want to create an external image tiddler with the _canonical_uri field pointing at the link. Similarly for mp3 links. But the problem is that we can't determine the type of the resource identified by a link without loading that resource, which we're unable to do thanks to the browser same origin policy.

Best wishes

Jeremy

[Mark S.]

Ok!

If you open an image in firefox, you can the use TiddlyClip (Image snip) to create a new tiddler with the linked image and the image title as name. It uses absolute paths, but it works. Maybe there's something in TiddlyClip that could clean up the image path. But you're still dragging and dropping one at a time.

Mark

[Blake Blacksmith]

We could indeed introduce special behaviour for dragging links; the browser identifies the text as a link when it is dropped. The problem is that it's not clear what that behaviour should be; for image links, ...

I do not think the job of a drag-and-drop file-link inserter should include determining what type of data the file-link leads to. That should be up to the user to decide with [img[...]] or other user-defined file handling macros.

The most general & simple solution would be that the drag-and-dropped function should:

1. grab the absolute-file-link string file

• such as: file:///d:/data/Proj/PhotoScrapbook/origs/%7B040%7DIM-3837.jpg

2. check that the file is within the TiddlyWiki's folder 

• for example: d:/data/Proj/PhotoScrapbook/ 
  

3. paste the appropriate link into a text box

• if it is in under same folder as the TiddlyWiki then paste the relative file link text : file:.//origs/%7B040%7DIM-3837.jpg
• and if the file is not under that folder assume the user wants the file to be imported into the TiddlyWiki are raw text.

• could also have the option to paste the absolute path link text : file:///d:/data/Proj/PhotoScrapbook/origs/%7B040%7DIM-3837.jpg (although I am not sure under what scenario this would be useful).

How does that sound? Is that doable or does that violate some browser security limitations?

Blake

[Jeremy Ruston]

Hi Blake

One point to note is that you'll get different behaviour if you drag the link into the text editor within a tiddler you are editing. By default, you'll get the absolute link. We could indeed tweak it to be a relative link if possible.

The behaviour I was thinking about in my answers above is when you drag the link into the rest of the TiddlyWiki window, which triggers the import mechanism. It's still unclear to me what we should do when we try to import a link.

Best wishes

Jeremy.

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Blake Blacksmith]

 

Sorry if I was unclear but I do not support the idea of importing files directly into an html file such as TiddlyWiki since this will cause slow down and a loss of file mobility. My request for a link import was based on linking to relative files and folders.

One point to note is that you'll get different behaviour if you drag the link into the text editor within a tiddler you are editing ... We could indeed tweak it to be a relative link if possible.

I think this would vastly improve the process of including files in TW.

By the way, when I drag a file into the text region of a Tiddler during editing I get redirected by my browser to the file (using most recent Chrome on Win 8) so I do not get the absolute link you mentioned.

-Blake 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/k-cMEGkOV-8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

[andrew.j.harrison84]

I'm wishin, that like the operating system creates shortcuts, draggin the favicon from the address bar into an open tiddler would create a tiddler with the address in the _canonical_uri field, title in my subtitle field and content field, and zTXt chunk the contents of any text from the page and tag it with the name of the tiddler that I dragged it into. Maybe that could be a really cool pluggin.

Sent from my Samsung Epic™ 4G Touch

[Blake Blacksmith]

Seems a bit specific to your use case and out if the realm of a web based application. Although admittedly I do not fully understand what you are requesting.

[Jeremy Ruston]

Hi Blake

Sorry if I was unclear but I do not support the idea of importing files directly into an html file such as TiddlyWiki since this will cause slow down and a loss of file mobility.

Well, I think the ability to embed images etc is useful, but I agree that it is an ability that has to be exercised with caution.

I don't quite understand why you think that embedding a file into TW causes a loss of mobility? I think that one of the advantages of embedding is that it makes it easier to move the TW file around, without worrying about dependent files.

 

My request for a link import was based on linking to relative files and folders.

One point to note is that you'll get different behaviour if you drag the link into the text editor within a tiddler you are editing ... We could indeed tweak it to be a relative link if possible.

I think this would vastly improve the process of including files in TW.

OK

 

By the way, when I drag a file into the text region of a Tiddler during editing I get redirected by my browser to the file (using most recent Chrome on Win 8) so I do not get the absolute link you mentioned.

Yes, dragging a file behaves differently. It's dragging a link from the browser into a text editor that has the behaviour I described.

Best wishes

Jeremy.

[Mark S.]

That really sounds like you're describing tiddlyclip:  http://tiddlyclip.tiddlyspot.com/

It does all that, though you have to hover over the page and and right click and select the type of clip. But it captures the URI and page text.

[Mark S.]

I think what he means is that when you import files into TW as embedded images or text that the TW rapidly becomes too big to run on a mobile device. The single-file approach is technically more mobile, but the limitations of computing power and browser capability mean that it is functionally less useful than linking to files and images that are in an external directory.

To me, what would make sense is that when you drop an external local image file (jpg,png,gif,,etc.) into TW it would create an image link to that file, preferably with a relative address. I would not require TW to verify that the contents of the file are really image data.

Other file types (e.g. PDF,DOC) would just create an external link.

Dragging or dropping into an open tiddler would append the img or ext link to the bottom (or to the cursor location if possible).

This way you could easily transport your TW  and supporting files just by copying, zipping,  or synching a single  directory.

The ambiguous situation would be that of a text (.txt, ini ... other?) file. I suppose some people might want the file to be imported into its own tiddler since that is within TW's capabilities.  A configuration might allow the user to specify how he/she wants links to text to be handled (embedded or linked).

Thanks for listening!
Mark

[Jeremy Ruston]

Hi Mark

To me, what would make sense is that when you drop an external local image file (jpg,png,gif,,etc.) into TW it would create an image link to that file, preferably with a relative address. I would not require TW to verify that the contents of the file are really image data.

Sadly, as I mentioned further up in this thread, when you drag things into a browser we only get to see the embeddable data; for security reasons, the path to the item is not passed. That means it is currently not possible to drag and drop an image and have it show up as an external image.

We can HTML drag links from other webpages into TiddlyWiki, but the browser doesn't tell us whether the target of the link is an image, sound file, HTML etc.

 

Dragging or dropping into an open tiddler would append the img or ext link to the bottom (or to the cursor location if possible).

As mentioned above, dragging a link to the a tiddler text editor will insert the text of the link at the drop point.

 

Best wishes

Jeremy.

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Mark S.]

Sorry, forgot to add that I was talking about dragging the links from a FF tab being used as a local file browser. I believe (but could be mistaken) that this circumnavigates the missing path information problem.

If the browser, under those situations, passes the link, doesn't it also pass the extension? So the file type could be determined with 90% accuracy based on the extension?

Thanks,
Mark

[Jeremy Ruston]

Hi Mark

Sorry, forgot to add that I was talking about dragging the links from a FF tab being used as a local file browser. I believe (but could be mistaken) that this circumnavigates the missing path information problem.

Ah, OK, yes, in that case the browser exposes an URL link as text, and so we could do the global-to-local transformation etc. The trouble is that I'm not sure that it's worth it, given that it would only work with the Firefox file browser. I think it would be more useful to spend the effort on getting TiddlyFox/TiddlyClip to make it possible to drag files from the OS Finder/Explorer and get a relative link made automatically.

 

If the browser, under those situations, passes the link, doesn't it also pass the extension? So the file type could be determined with 90% accuracy based on the extension?

Yes, inferring the type from the extension for file: protocol links is probably reasonably safe.

Best wishes

Jeremy.

[Mark S.]

My quick test on a Chrome browser suggests that links dragged from a Chrome tab used as a file browser also may contain the full file path name. To me, dragging from a browser tab would be the most universal way of doing things, since a plugin would have to be specific not only to the browser but also the operating system (it's likely that Linux and Mac are going to present link drag/drops differently than Win OS).

On the old TW, with the Javscript plugin, I would probably just have written a routine that grabbed a list of files and created a tiddler for each one containing a link of the right type pointing to a local relative path. I'm finding it harder to get into coding in TW5.

Thanks!
Mark

On Friday, November 7, 2014 8:36:20 AM UTC-8, Jeremy Ruston wrote:

\Ah, OK, yes, in that case the browser exposes an URL link as text, and so we could do the global-to-local transformation etc. The trouble is that I'm not sure that it's worth it, given that it would only work with the Firefox file browser. I think it would be more useful to spend the effort on getting TiddlyFox/TiddlyClip to make it possible to drag files from the OS Finder/Explorer and get a relative link made automatically.

 

[Blake Blacksmith]

Hi Jeremy 

I don't quite understand why you think that embedding a file into TW causes a loss of mobility? I think that one of the advantages of embedding is that it makes it easier to move the TW file around, without worrying about dependent files.

 

By loss of mobility I mean now you file is embedded/stored in html and not in the your system file for you to directly access (unless your are using node.js). And of course embedding makes it easier to move the wiki file around but at the cost of bloating the wiki and makes the embedded file more difficult to edit(must export, edit, import to make changes to that file).

Yes, dragging a file behaves differently. It's dragging a link from the browser into a text editor that has the behaviour I described.

Ah. I see. It would still be very useful to add a feature where a dragging-and-dropping a file in the text area would paste its relative path into the text-region.

On a related note, I recently tried dragging a file into TiddlyWiki's text editor on a Mac+Safari and the file-path was inserted as desired. This is unlike in Windows with Chrome, Firefox, or Safari where the dragged file redirects the web-page to the dragged file.  

Blake

 

[Jeremy Ruston]

Hi Mark

My quick test on a Chrome browser suggests that links dragged from a Chrome tab used as a file browser also may contain the full file path name. To me, dragging from a browser tab would be the most universal way of doing things, since a plugin would have to be specific not only to the browser but also the operating system (it's likely that Linux and Mac are going to present link drag/drops differently than Win OS).

You may have convinced me. I'd forgotten that other browsers also provide a directory viewer for file: URIs (I nearly missed it on Chrome because it doesn't actually let you drag a folder onto the Chrome icon or window).

I've created a ticket here:

https://github.com/Jermolene/TiddlyWiki5/issues/1067

 

On the old TW, with the Javscript plugin, I would probably just have written a routine that grabbed a list of files and created a tiddler for each one containing a link of the right type pointing to a local relative path. I'm finding it harder to get into coding in TW5.

There's a lot more code in TW5, and it can be hard to track down where things are done. In this case, the area of interest is here:

https://github.com/Jermolene/TiddlyWiki5/blob/master/core%2Fmodules%2Fwidgets%2Fdropzone.js#L87

> On a related note, I recently tried dragging a file into TiddlyWiki's text editor on a Mac+Safari and the file-path was inserted as desired. This is unlike in Windows with Chrome, Firefox, or Safari where the dragged file redirects the web-page to the dragged file.

Do you mean dragging from Finder or from Safari's file browser? I see the same behaviour of navigating to the file when dragging a file from Finder to Chrome on OS X. I haven't explored whether dragging a file into TiddlyWiki's text editor can be made to consistently insert the path, I'll investigate.

Best wishes

Jeremy.

 

Thanks!
Mark

On Friday, November 7, 2014 8:36:20 AM UTC-8, Jeremy Ruston wrote:

\Ah, OK, yes, in that case the browser exposes an URL link as text, and so we could do the global-to-local transformation etc. The trouble is that I'm not sure that it's worth it, given that it would only work with the Firefox file browser. I think it would be more useful to spend the effort on getting TiddlyFox/TiddlyClip to make it possible to drag files from the OS Finder/Explorer and get a relative link made automatically.

 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Blake Blacksmith]

Hi Jeremy,

Do you mean dragging from Finder or from Safari's file browser? I see the same behaviour of navigating to the file when dragging a file from Finder to Chrome on OS X. I haven't explored whether dragging a file into TiddlyWiki's text editor can be made to consistently insert the path, I'll investigate.

Yes. To be more clear dragging a file into the edit-text region of a Tiddler (and not into the import active-region of the TW) will tell the browser to open the file instead of pasting the file's path.

 Is it possible to have TiddlyWiki have an active drag and drop region in the edit-text window that will prevent the browser from opening the file and instead paste the files relative path(or absolute path is unavailable)?

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/k-cMEGkOV-8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

[Jeremy Ruston]

Hi Blake

 Is it possible to have TiddlyWiki have an active drag and drop region in the edit-text window that will prevent the browser from opening the file and instead paste the files relative path(or absolute path is unavailable)?

I've done some more tests with dragging a file from Finder/Explorer into a text editor in the TiddlyWiki browser window. The default handling on Chrome is to navigate to the incoming file. We can prevent that navigation, but we still can't access the path of the file, and so we can't paste the relative path of the file.

Best wishes

Jeremy.

[Blake Blacksmith]

Ok. Thats unfortunate but I appreciate your effort. For now I'll stick to dragging and dropping the absolute path from my file explorer. 

Thanks for your continued great work with TW5!

[Ed Dixon]

Absolutely! I am still in awe of all the excellent people involved! Jeremy's commitment to the community here is a very rare and precious thing! Thank you so much! I was thinking while we are so focused on external files at the moment maybe a better question to ask might be what more integration into tiddlywiki might be possible with them. 

[Maaaaaaaaaaaaaaartin]

Would that make sense/be possible to, when drag and dropping a non-text file (a pdf, an image, etc.) to a tiddler that is currently being edited, have an option for copying the content of the file to e.g. ./media/data/whatever.xyz, and only inserting a link within the tiddler? Would be very useful. Thanks! Martin

[Jeremy Ruston]

Hi Martin

Would that make sense/be possible to, when drag and dropping a non-text file (a pdf, an image, etc.) to a tiddler that is currently being edited, have an option for copying the content of the file to e.g. ./media/data/whatever.xyz, and only inserting a link within the tiddler? Would be very useful. Thanks! Martin

Unfortunately, there’s no general way to save arbitrary files. A TiddlyWiki can save it’s own HTML file, but it can’t save other files.

Best wishes

Jeremy

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cb888f77-ec90-4ea6-9693-ff806cf8ce4e%40googlegroups.com.