Query on use of "contentTypesFilter" parameter in Dropzone

[jacng]

How does the “contentTypesFilter” parameter in Dropzone works ? Can it be defined such that BOTH “text/html” and “text/plain” are imported by the dropzone ? Setting contentTypesFilter="[prefix[text]]" doesn’t seems to do that, the dropzone seems to import only one of either types, depending on the browser.

Background : I’m importing browser’s file directory screen content, among other things, via TW dropzone. BOTH “text/html” and “text/plain” contents are useful for this purpose. The “text/html” content is often more useful because it contains embedded file links that I can extract. But other times, only “text/plain” content is available.

TW import
If I copy a chunk of screen contents from the browser’s file directory screen and paste into an empty porton of TW, both “text/html” and “text/plain” contents are available in TW normal import. That’s good and is an alternative if I can’t get the dropzone to do the same.

Dropzone
With my dropzone defined like this:

<$dropzone importTitle="DirDrop_import" contentTypesFilter="[prefix[text]]" actions="..." >

pasting the same chunk of screen contents on the dropzone, “Chrome on Chromebook” and “Edge on Windows” import the “text/html” content, but “Firefox on Windows” import the “text/plain” content. If I explicitly set contentTypesFilter="text/html", “Firefox on Windows” will import the “text/html” content I need, but I also need the dropzone to support “text/plain” for other pasted contents. Is there a way to get the dropzone to import BOTH “text/html” and “text/plain” like TW import ? I suspect the answer is no, but maybe there is something about the “contentTypesFilter” parameter that could do the trick?

[pmario]

Which TW version do you use?

[pmario]

@jacng

Is there a way to get the dropzone to import BOTH “text/html” and “text/plain” like TW import ?

It should be possible, I’ll have a closer look at the code.

[pmario]

Did you try to set the deserializer parameter to text/plain or text/html?

See: https://tiddlywiki.com/#DropzoneWidget

[jacng]

Which TW version do you use?
TW 5.3.1. The browsers’ version should be the latest.

Did you try to set the deserializer parameter to text/plain or text/html ?
No, didn’t specify the deserializer parameter. I can give that a try and see how it goes. The default dropzone settings work well for me so far, except for this “Firefox on Windows”.

[jacng]

Hi @pmario,

With the dropzone defined like this:

<$dropzone
	importTitle="DirDrop_import" 
	contentTypesFilter="[prefix[text]]"
	deserializer="text/html"
	actions=""..."
>

“Chrome on chromebook”, “Edge & Firefox on Windows” will import “text/html” whenever there is html content, but not “text/plain”. If there is no “text/html” content, then “text/plain” is imported instead. This is NOT the same behavior as TW Import which imports both. But this happens to work out for my purpose , i.e. import as “text/html” if available, else import as “text/plain”.

With deserializer="text/plain", the behavior is exactly the same as deserializer="text/html" on the same three browsers I tried. I would think that it would only import “text/plain”, but “text/html” is still imported when available ??

My issue is resolved for now. Do let me know if you are continuing to investigate and need any testings.

Cheers!

[pmario]

@jacng

With deserializer="text/plain", the behavior is exactly the same as deserializer="text/html" on the same three browsers I tried. I would think that it would only import “text/plain”, but “text/html” is still imported when available ??

That’s probably a bug in the js-code. I’ll have a look. I think the default $:/Import mechanism had a bug, that I did fix for 5.2.7 or so. I have a feeling, that the “dropzone” widget may have the same problem. But more investigation is needed. I’ll crate a GH issue

[jacng]

I see. Thanks a lot for the very prompt assistance !! Much appreciated

[pmario]

Do you have a working wiki, with which we can replicate the problem?

[pmario]

@jacng

If I explicitly set contentTypesFilter="text/html", “Firefox on Windows” will import the “text/html” content I need, but I also need the dropzone to support “text/plain” for other pasted contents

As far as I can see in the source code, the contentTypesFilter is only active if files are imported. The deserializer should be always active.

I can remember, that for some elements FireFox only has text/plain in the event.clipboardData.items object.

But for testing this, it will be needed to have a working wiki to be able to replicate the exact situation.

[jacng]

Sure, let me cleanup this one I’m working on and put it up. Almost done anyway.

[jacng]

Hi @pmario,

I was cleaning up my TW file, and found I couldn’t replicate the “success” I had earlier with “Firefox on Windows” ?!? It’s back to the original state i.e. "If I paste the browser’s directory screen contents on dropzone in “Firefox on Windows”, “text/plain” content is being imported. When I do the same on “Chrome on Chromebook” and “Edge on Windows”, “text/html” content is being imported.”

I couldn’t traced back to account for the difference, and now wonder if the change from contentTypesFilter="text/html" was actually effective.

To verify, I duplicate my dropzone (below) in an empty TW5.3.1 file

<style>
.jsontiddler-dropzone{
	margin:4px auto;
	border:2px dotted green;
	text-align:center;
}
.jsontiddler-dropzone:focus {
	background: #fffedd;
}
</style>

<$dropzone
			importTitle="DirDrop_import" 
			contentTypesFilter="[prefix[text]]"
			deserializer="text/html"
>
			<div class="jsontiddler-dropzone" tabindex=1>
				''Directory Dropzone'' : Click and paste directory listing from browser here
			</div>
</$dropzone>

If I paste the browser’s directory screen content on this dropzone in clean TW5.3.1 file, both the “text/html” and “text/plain” contents are imported !!!

So this may just be an issue with the particular TW file I had. I will port over the content to an empty TW5.3.1 file and test it further myself.

In the meantime, I would not want to waste your weekend further to look into this. Apology for all the trouble. WIll get back.

[jacng]

Oh OK, I missed out the dropzone’s actions that import the contents immediately using tm-perform-import:

<style>
.jsontiddler-dropzone{
	margin:4px auto;
	border:2px dotted green;
	text-align:center;
}
.jsontiddler-dropzone:focus {
	background: #fffedd;
}
</style>

<$dropzone
			importTitle="DirDrop_import" 
			contentTypesFilter="[prefix[text]]"
			deserializer="text/html"
		actions="""
				<$action-sendmessage $message="tm-perform-import" $param=<<importTitle>>/>
				<$action-setfield $tiddler="@VirtualDirInput" inputDirectory="" />
				<$action-setfield inputDirectory=""/>
				<$action-setfield selectedFiles='' />
				<$action-setfield AllFilesPreselected="yes" />
			"""
>
			<div class="jsontiddler-dropzone" tabindex=1>
				''Directory Dropzone'' : Click and paste directory listing from browser here
			</div>
</$dropzone>

''Directory:'' <a href="file:///C:/" rel="noopener noreferrer" target="_blank">@@background-color:lightcyan; &nbsp;&nbsp; C:/ &nbsp;&nbsp; @@</a>

Without tm-perform-import, both “text/html” and “text/plain” are presented for import preview which is identical to TW Import.

With tm-perform-import that immediately import the contents, somehow the dropzone imports only “text/html” on “Chrome on Chromebook” and “Edge on Windows”, and only “text/plain” on “Firefox on Windows”. The code fragments above is consistent with my TW file.

I need to go. It’s past midnight here, will check back tomorrow.

[pmario]

@jacng

Without tm-perform-import, both “text/html” and “text/plain” are presented for import preview which is identical to TW Import.

With tm-perform-import that immediately import the contents, somehow the dropzone imports only “text/html” on “Chrome on Chromebook” and “Edge on Windows”, and only “text/plain” on “Firefox on Windows”. The code fragments above is consistent with my TW file.

That’s very interesting. It says “text/plain” but it does import type: text/html There’s definitely something going on.

More testing needed. But it will take some time.

[TW_Tones]

Just for completeness there is another way to import using the browse widget this also permits a deserializer and conveniently extensions and MIME types.

The main reasons I use it so far is to;

Provide a button which only lists my desired filetypes for import .json, .tid, .txt, .csv

\whitespace trim
<span class="tc-file-input-wrapper browse-button">
<$browse multiple accept={{!!extensions}} tooltip={{{ [[Search for and Import one or more files with the extensions]] [{!!extensions}] +[join[  ]] }}}/>
{{!!caption}}
</span>

• With the extensions in the field extensions. .json, .tid, .txt, .csv
• Also note the browse multiple allows you to import more than one at a time.

I also use it to import JSON tiddlers containing tiddlers as a single tiddler rather the separate tiddlers within;

• Just add to the above deserializer="text/plain" to force the import to text.

[jacng]

I read that to meant importing files using the browse widget in lieu of a dropzone. Thanks for the input, I have not use the “browse” function so far, and note it for future use.

I was too focus on my problem and didn’t elaborate on my application. The dropzone I’m using is for copying screen and file contents thru the clipboard, to extract file/URL links from the html/text contents and import into TW, shared here previously: Importing local file links by copying browser’s directory listing screen content into Tiddlywiki - Discussion - Talk TW. File importing is a small part of it, but thank you for the comment.

[TW_Tones]

I am very interested in your work there, but have not being able to look in detail yet.