Using Tiddlyhost

[AndrewMc]

Hi All

I have an old wiki file (TW 2.6.4) that I had on Tiddlyspot before shifting to Tiddlyhost a few years ago. It has been some time since I worked with the file, but recently I made some edits to my local copy and now want to update the Tiddlyhost copy with this local version. But, I cannot remember how to do such a thing. Can anyone describe how to use Tiddlyhost with TW Classic, or point me to information about using Tiddlyhost?

I have tried clicking on "save to tiddlyhost" which causes a message "About to upload to index.html..." to appear. This message just remains and doesn't change even after an hour of waiting. (I am using Firefox 119 on Windows 10).

I have also looked through the Tiddlyhost Docs and FAQs but haven't yet found an answer.

Any help or suggestions would be appreciated.

Cheers

Andrew Mc

[Yakov]

Hi Andrew,

I don't have experience with editing TW locally and uploading it to TiddlyHost with a plugin, but here are some educated guesses and pointers:

1. What plugin is used to upload? It might be that you have one that uploads to TiddlySpot, but TiddlyHost requires another one. Ideally, share that plugin here, so that we can provide more help with less guessing (presumably, it should be ThostUploadPlugin);
2. Have you set up credentials of TH in the plugin? For instance, is txtThostSiteName set?
3. Have you saved TW to TiddlyHost this way previously? I don't see any mention of a password in the plugin, so may be you need to be just logged in TiddlyHost in the same browser – or may be it won't work at all since you're requesting saving from a different domain. This needs an additional investigation.
   
4. What saver do you use/by what url your TW is open in browser? Theoretically, there's shouldn't be a problem with CORS as TiddlyHost supports it, but this might be an issue. Ideally, do this: if you are using a browser, open dev tools (in Windows Chrome, press Ctrl + Shift + I to get that), select the Network tab, try to save again and see what's added there. Make a screenshot (an example), than click lines of failed requests (red ones) one by one, if any, and make a screenshot of them (similar to this) – we'll need to see what method and status they have, and also if there's any error in the "Response" tab.
5. Have you considered upgrading TW to 2.9.4? It may be that something is not compatible with 2.6.4 which is quite old.
   

Best regards,

Yakov.

четверг, 9 ноября 2023 г. в 08:19:30 UTC+3, AndrewMc:

[AndrewMc]

Hi Yakov

Thank you for your response.
I will try answer your questions by number.

1.  I have a plugin "ThostUploadPlugin" version 1.0.0 installed which has a description "Support saving to Tiddlyhost.com".
2.  I am not sure if I have all the credentials set as needed, but I do have txtThostSiteName set to the correct name.
3.  I haven't used TiddlyHost for a couple of years and simply cannot remember what I did last time. :-(
4.  For local saving, I use the timimi Firefox add-in. The url starts with "file://". I have tried to attach a screenshot of the Network Monitor window from Firefox, but I am not sure if that worked. I will copy-and-paste some of the output below:

Warning: Some cookies are misusing the recommended “SameSite“ attribute
Error: The Components object is deprecated. It will soon be removed. notrealwikiname.html:24199:5
Error: XML Parsing Error: mismatched tag. Expected: </link>.
Location: file:///C:/Wiki/TiddlyWiki/notrealwikiname.html?_=1699607370017
Line Number 66, Column 3: notrealwikiname.html:66:3
Error: XML Parsing Error: mismatched tag. Expected: </link>.
Location: file:///C:/Wiki/TiddlyWiki/notrealwikiname.html
Line Number 66, Column 3: notrealwikiname.html:66:3
Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://x:x@notrealwikiname.tiddlyhost.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

It looks like there is some sort of issue with CORS, but I am not sure what to do about that.

5.  I have done a manual update to TW 2.9.4. I was nervous about doing this (I have backups) but the process was very smooth, and everything in my wiki seems to work as expected. Thank you for the good work! 

Also, TW version 2.9.4 gives more information in the error messages. After I try to save my wiki to TiddlyHost, it notifies me that it "Failed to upload main TiddlyWiki file. Your changes have not been saved".

Cheers

Andrew Mc

[Yakov]

Right, CORS is definitely the issue in your case, but it's not the only one. I've done some experiments, and can see that the code should be debugged/adjusted in several places.

I'll see what can I do about uploading from Tiddlyhost side, should be somewhat straight-forward to implement a plugin for that.

пятница, 10 ноября 2023 г. в 12:37:37 UTC+3, AndrewMc:

[Yakov]

Hi Andrew,

I've implemented a solution that should work for you. It's a part of a larger plugin for TH that I'll release later, for now you can use it as a separate plugin (call it, for instance, ThostLocalBackupPlugin). Add it, tag with systemConfig, and use:

• the <<downloadMain>> macro to create a backup before uploading your new TW (I don't think you'll need it, but it's always better to have a backup if there's a tiny risk of data loss);
  
• the <<uploadMain>> macro to pick and upload your new TW.
  

See the code code below.

Best regards,

Yakov.

/***
|Version|0.3.3|

* test download: <<downloadMain>>
* test upload: <<uploadMain>>
***/
//{{{
// keep for downloading functionality
config.orig_tHost_saveChanges = window.saveChanges

config.macros.downloadMain = {
handler: function(place, macroName, params, wikifier, paramString, tiddler) {
const label = "save from web"
const tooltip = "download this TiddlyWiki"
createTiddlyButton(place, label, tooltip, function() {
config.orig_tHost_saveChanges()
})
}
}

config.macros.uploadMain = {
handler: function(place, macroName, params, wikifier, paramString, tiddler) {
const label = "upload"
const tooltip = "upload a TiddlyWiki (a backup) – it will substitute the current one; to see the changes, reload the page"
createTiddlyButton(place, label, tooltip, function() {
config.macros.uploadMain.upload()
})
},
getFileText: async function() {
const pickerOptions = { types: [ { accept: { 'text/html': ['.html', '.hta'] } } ] }
const handles = await window.showOpenFilePicker(pickerOptions)
if(!handles[0]) return null
const file = await handles[0].getFile()
return await file.text()
},
upload: async function() {
const newHtml = await this.getFileText()
if(!newHtml) return alert("Looks like the file were not picked or it's empty")

// this will help if one tries to upload a non-TW file
const posDiv = locateStoreArea(newHtml)
if((posDiv[0] == -1) || (posDiv[1] == -1)) return alert(config.messages.invalidFileError.format([localPath]))

displayMessage("Started uploading...")
const uploadParams = ['https://' + config.options.txtThostSiteName + '.tiddlyhost.com']
bidix.thostUpload.httpUpload(uploadParams, newHtml, function reportResult(status, params, responseText, url, xhr) {
if(status) {
displayMessage(bidix.thostUpload.messages.mainSaved)
store.setDirty(false)
displayMessage("To see the changes applied, reload the page")
} else {
alert(bidix.thostUpload.messages.mainFailed)
displayMessage(bidix.thostUpload.messages.mainFailed)
}
}, uploadParams)
}
}
//}}}

воскресенье, 12 ноября 2023 г. в 10:39:00 UTC+3, Yakov:

[AndrewMc]

Hi Yakov

Thank you for this code. I have added it to my local TWc and tried both buttons, "save from web" and "upload", but unfortunately have not had success.

Should I be adding this plugin code to my TWc on TiddlyHost instead of to my local file version?

I have written to Simon Baird (who runs TiddlyHost) asking about the problem and was waiting to hear back before responding to you, but have not yet had a reply.

Cheers

Andrew Mc

[Yakov]

Hi Andrew,

yes, the plugin is for TiddlyHost indeed – like I said, uploading from Tiddlyhost side is much more straight-forward, while that from local TW might even be impossible (without changing TiddlyHost itself).

Best regards,

Yakov.

четверг, 23 ноября 2023 г. в 06:03:58 UTC+3, AndrewMc:

[AndrewMc]

Hi Yakov

<facepalm> That makes so much more sense now.

I have managed to put the code into the TiddlyHost version of my TWc, but haven't yet succeeded in getting things to happen.

I had a message: "You need to save this TiddlyWiki to a file before you can save changes" when I was creating the tiddler for the plugin code, and also when I used the [save from web] button in your plugin.

When I used the [upload] button, nothing seemed to happen. The Console in Firefox's Developer Tools showed the following:

Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function

    getFileText https://notrealwikiname.tiddlyhost.com/ line 17858 > eval:30

    upload https://notrealwikiname.tiddlyhost.com/ line 17858 > eval:36

    handler https://notrealwikiname .tiddlyhost.com/ line 17858 > eval:25

Cheers

Andrew Mc

[Yakov]

Oh, I see. Unfortunately, the used method of loading files ( showOpenFilePicker) is now only supported by Chrome, Chromium-based browsers (Opera, Vivaldi, ..), and Edge. I'll see what I can do about this, but a quick workaround would be to use one of the supported browsers for uploading. Is it good enough for you?

пятница, 24 ноября 2023 г. в 00:31:04 UTC+3, AndrewMc:

[Yakov]

In fact, I think I have a solution for you: update the getFileText method to the following:

getFileText: async function() {
if(window.showOpenFilePicker) {

const pickerOptions = { types: [ { accept: { 'text/html': ['.html', '.hta'] } } ] }
const handles = await window.showOpenFilePicker(pickerOptions)
if(!handles[0]) return null
const file = await handles[0].getFile()
return await file.text()

} else {
const tempFileInput = document.createElement('input')
tempFileInput.type = "file"
tempFileInput.style.display = "none"
document.body.appendChild(tempFileInput)
const cleanUp = () => document.body.removeChild(tempFileInput)

return new Promise((resolve, reject) => {
tempFileInput.addEventListener('change', function handleFileSelect(event) {
const selectedFile = event.target.files[0]
if(selectedFile) {
const reader = new FileReader()
reader.onload = function (fileEvent) {
cleanUp()
resolve(fileEvent.target.result)
}
reader.readAsText(selectedFile)
} else {
cleanUp()
resolve(null)
}
})
tempFileInput.click()
})
}
},

and it should work with a wider range of browsers, including Firefox and even some mobile browsers!

пятница, 24 ноября 2023 г. в 11:48:03 UTC+3, Yakov:

[AndrewMc]

Hi Yakov

The new getFileText method worked perfectly! Thank you very, very much for this.

Cheers

Andrew Mc