I am using tiddlywiki 5.2.1 with node.js. In my daily workflow, I take lots of screenshots and paste into tiddlywiki. The loading performance is very slow now. Seems it is related all images are loaded into html.
I would like to use all images as external files. However, I cannot find a solution after googling. Thanks for any advices.
The easiest way is to activate lazy loading. Then your images will only load when you specifically open an image tiddler.
Other approaches are to externalize the files.
If you put files into a subdirectory called “files”, then node.js will serve up your files (images) from that subdirectory or its subdirectories. You can reference them on a relative path using an image link or the image widget. You can also create image tiddlers by setting the “type” field of your tiddler to the type of image (e.g. image/jpg) and the _canonical_uri field to the path of the file.
To save your image to the local directory you can either do the usual right-click and save-as thing, or you can export the image.
Because creating _canonical_uri tiddlers can be a bit tedious, you can also load your TW using TiddlyDesktop and use the official external files plugin. This will allow you to drag images into your TW file and have the image tiddler made for you automatically.
Another approach, if you convert your node.js TW into a single file, is to use Saq’s File Upload plugin. However this requires you to serve up your TW file via a webdav server. This can be done conveniently with Rclone (see rclone.org).
Thanks for sharing this node.js files PUT uploader solution, it works exactly what I want. There is only one thing I want to know: currently it only support about 8MB media file’s uploading, any file bigger than that will cause 413 payload too large error. If you know any way to overcome this limitation, I would like to try it myself (I’ve increased the client_max_body_size number on nginx to 50m, but I don’t know whether I need to setup nodejs http module’s upload limitation, and how).
I think we can still use images in /tiddlers folder, with lazy-image. But need to modify it, so when deploy as a blog, its canonical_uri replaced with a CDN URL, and we set CDN to speedup our image URL provided by nodejs tw.
In the tiddler $:/plugins/sq/node-files-PUT-support/server-route-upload.js modify the following code to change the limitation on the body.length. Change 1e7 to 1e8:
var body = Buffer.from([]);
request.on("data",function(data) {
body = Buffer.concat([body,data]);
if(body.length > 1e7) {
response.writeHead(413, {'Content-Type': 'text/plain'}).end();
request.connection.destroy();
}
});
Your instruction works perfectly for me~ Thank you very much!
Now I can imagine how to make use of this feature for LAN / Home Network / Desktop Knowledgebase fans, some of them used to search for media files uploader solutions like this.
In TidGi app (which is also a NodeJS wiki, and can load normal nodejs wiki), it can auto make binary files become “skinny tiddler”, see its doc site for detail.
Another follow up question, Is there some quick hack approach to delete the uploaded file via Node.js server? Recently I want to modify the plugin code so that when I delete the skinny tiddler wrapping the image file, the file itself will be deleted as well