Embedding uppy to automatically upload images to S3

25 views

Skip to first unread message

Roman Nguyen

unread,

Jun 3, 2020, 10:12:40 AM6/3/20

to TiddlyWikiDev

Hi all,

I recently started using tiddlywiki using tiddly drive and I fought a bit with images. Putting images in the same folder on google drive doesn't work and it's not (very) possible to get a direct URL.

I discovered https://uppy.io/ which is a javascript file uploader. My idea was to embed that in tiddlywiki, so I could simply drag an image from my desktop (potentially phone), it would get automatically uploaded to my S3 bucket and I could just paste that URL in the [img] tag. It could be pretty seamless after some processing (automatically generating the tag, for example).

They provide the following code snippet:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://transloadit.edgly.net/releases/uppy/v1.15.0/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://transloadit.edgly.net/releases/uppy/v1.15.0/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'})

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>

Saving this in a html file and calling it in a browser works (this uploads to their server, but changing it to your own S3 bucket should be definitely doable looking at the documentation). Worst case is I have two tabs open next to each other and just switch when I upload an image.

I couldn't however get this to embed in tiddlywiki. I get that <script> tags are sanitized, so I tried this to wrap it in this: http://fiddle.tiddlyspot.com However, that did not work.

My questions would be the following:

1) Is this possible/viable at all?

2) Can we write a plugin or widget? I am not very versed in javascript or webdev (python background), but I can try it if you give me some pointers and then share here

Best regards,

Roman

TonyM

unread,

Jun 3, 2020, 8:16:18 PM6/3/20

to TiddlyWikiDev

Roman,

I am not nessasarily skill to help you here, however have you looked at the raw tags?

These place the tiddlers content in a special parts of the html file.

Regards

tony

Reply all

Reply to author

Forward

0 new messages