Use external images in node js

#1

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.

1 Like
#2

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).

2 Likes
#3

Thanks. I is working for me now. The lazy-load mode might be the simplest solution for me without changing the file structure.

1 Like
#4

You can use the File Upload plugin with node.js as well if you install all of the following from the SQPL plugin library:

  • File Uploads
  • File Uploads: PUT
  • Node.js files PUT uploader support

With that in place, any new images you import should automatically be saved in the files folder with canonical URI tiddlers created for them.

5 Likes
Moving TW to the web - a large file
#5

I’m using lazy-loading in TidGi by default :

You can download TidGi Releases · tiddly-gittly/TidGi-Desktop · GitHub and use it to load your nodejs wiki’s folder and enjoy the lazyloading and nodejs wiki without terminal cli.

#6

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). :blush:

#7

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.

Avoiding image file content in -render exported tiddlers
#8

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();
		}
});
2 Likes
#9

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. :smiley:

1 Like
#10

There is also a GitHub - tiddly-gittly/TidGi-external-attachments-plugin: External attachments for TidGi Desktop, drag&drop image/binary file to wiki, and become skinny tiddler (a pointer to actural file).

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.

1 Like