[Solved!] Can you make a Link for Load from Disk?

Question

Currently, I am using the following code that allows me to export a save game to disk with a string of text that looks like an ordinary link.

<<link "Save Game">>
    <<script>>
    	Save.export()
    <</script>>
<</link>>

However, I can't seem to find a way to achieve the same thing for loading a game from disk; the closest I seem to be able to accomplish makes a rather large and garish button appear. Is there any way to make a 'load from disk' thing that... well, looks like a link (so it could blend in seemlessly with other text choices/links and look far less jarring when reading)?

I'm using Twine 2 and Sugarcube 2.21. Many thanks in advance!

Answer 1

Is there a reason you're avoiding simply opening the Saves dialog?

Regardless.  If you want an anchor to open the file dialog, then you'll have to create a hidden <input type="file"> element which is triggered by the anchor, because you must use that element and it's what creates the "garish button".

I'd probably suggest something like the following: (only tested in Twine 2)

<<if Has.fileAPI>>
	<<link "Save To Disk">>
		<<script>>Save.export();<</script>>
	<</link>>
	<<link "Load From Disk">>
		<<script>>
		$(document.createElement('input'))
			.css({
				display    : 'block',
				visibility : 'hidden',
				position   : 'fixed',
				left       : '-9999px',
				top        : '-9999px',
				width      : '1px',
				height     : '1px'
			})
			.attr({
				type          : 'file',
				id            : 'saves-import-file',
				tabindex      : -1,
				'aria-hidden' : true
			})
			.on('change', Save.import)
			.trigger('click');
		<</script>>
	<</link>>
<<else>>
	No disk saves.  :(
<</if>>

NOTE: You really should be checking the value of Has.fileAPI as shown above, because if that's false, then the APIs to support disk saves are unavailable.

Comments

I was avoiding the saves dialog as I was trying to keep a very 'classic text-game' feel and the Saves dialog/interface seemed a bit more visual novel to me.

Thank you for the code! It works an absolute dream! Many kudos! <3

Answer 2

The Disk section of the Save API where you found the Save.export() function includes a related Save.import() function which you can use to import your exported file, the related documentation explains the functions's requirements and demostrates how to use it.

Comments

I have read through the Save.import() function several times and experimented with it, but I have no idea of how to actually implement it in the way you suggest; the closest I can manage is using a variation of

<input type="file">

but all I seem to be able to achieve with that is creating the garish button described in my original post.