No internet connection
  1. Home
  2. Ideas

Paste to Upload

By Cody @codywarmbo2018-08-18 14:36:56.901Z

Currently a user must save/upload an image into Talkyard for it to be displayed. In things like DokuWiki and Bookstack there is the option to paste the contents of the clipboard and upload it immediately. Can this be implemented or a similar solution chosen?

  • 20 replies

There are 20 replies. Estimated reading time: 8 minutes

  1. KajMagnus @KajMagnus2018-08-23 11:55:48.482Z

    I also would like to paste from the clipboard. I'm almost positive it can be done (since works for them) — I just haven't had the time to read about how to do it & implement it.

    1. PJeff M @phoenix2020-11-05 20:23:50.951Z

      +1 being able to copy/paste multiple images would be a cool feature.

      1. KajMagnus @KajMagnus2020-11-25 07:24:30.822Z

        Copy-pasting many images at the same time? Hmm I think the Operating System's clipboard can include just one image at a time? (regardless of OS)
        If one rights click an image and chooses "copy image", then that'll replace whatever other image was in the clipboard already.

        (Or am I misunderstanding / overlooking something)

        Anyway, now copy-paste from clipboard has been implemented, works here at Ty .io, will be available in self hosted installation in one or a few days.

      2. In reply toKajMagnus:
        JJonathan Phillips @jphillips2020-11-05 21:31:40.693Z

        Great idea. Looks like the original post was in 2018

        1. KajMagnus @KajMagnus2020-11-08 23:13:03.624Z

          Time flies

                  . .
            '———==(v)==————'
                  | | 
                  ^ ^_
                    (<)
          
          
          ~~~~~~~~~~~~~~~~~~~~~~
          
          1. KajMagnus @KajMagnus2020-11-25 07:25:28.044Z

            @jphillips Now implemented, works here at Ty .io, & will be available in self hosted insallations in one or a few days.

        2. In reply toKajMagnus:
          CCody @codywarmbo2020-11-09 19:59:59.907Z

          I remember posting about this! Is there any progress?

          1. KajMagnus @KajMagnus2020-11-10 11:37:42.592Z

            Hi Cody, not with this topic, hmm, but with other things. I think you mentioned Twitter link previews for example? That works now (although FB link previews recently stopped working, because FB now requires an API key to oEmbed-link to them).

            Well, Twitter tweets work 50% — Twitter wants to run their Javascript un-sandboxed with full permissions in Talkyard, but they're not allowed to do that, so any images won't load: (there'll be an admin option for this)

          2. In reply toKajMagnus:
            CChristian Scheuer @chrscheuer2020-11-10 12:14:04.660Z2020-11-10 12:22:09.928Z

            I'd be happy to contribute some source code for this :)

            It's fairly simple...

            function handlePaste(event) {
              var transfer = event.dataTransfer || event.clipboardData;
              if (transfer.files && transfer.files.length > 0) {
                //Get the first file as a File object
                const file = files[0];
            
                //Use your favorite method to upload a File object
                //see https://developer.mozilla.org/en-US/docs/Web/API/File
              }
            }
            
            1. CChristian Scheuer @chrscheuer2020-11-10 12:25:16.821Z

              On this note, when implementing this, it would be great if images weren't added to the end of the post, but instead where the cursor is.

              This feature would save us TONS of time.

              1. KajMagnus @KajMagnus2020-11-11 16:20:17.360Z

                Thanks! This looks not-as-complicated as I imagined it would be. I'm guessing I can fix now soon

                1. CChristian Scheuer @chrscheuer2020-11-11 16:23:27.630Z

                  Yea, thanks to HTML5, it is much simpler than what I feared too when implementing this on our site :)

                  1. KajMagnus @KajMagnus2020-11-15 08:26:53.054Z2020-11-15 08:35:45.723Z

                    Seems I got this working (at least with Chrome & FF on my laptop) — namely right clicking an image, then pasting it into the editor. Will be incl in the upcoming version.

                    However, if in an Operating System file browser, I click Ctrl+C on a file, and then try to paste the file into the editor — that won't work, then the paste event includes just a string (but no File), its value being the OS file path.
                    I wonder if that works for you in SoundFlow or some other web app? (on macOS? selecting a file and Ctrl+C, Ctrl+V?)
                    O.t.o.h. instead one can drag-drop from the file browser, to the editor in the web browser.

          3. In reply tocodywarmbo:
            KajMagnus @KajMagnus2020-11-23 09:49:55.756Z

            Paste to upload now works for me — does it work for you? @chrscheuer

            If you 1) websearch for "crazy kitten" and click Images in the search result, then 2) right click one image, and choose "Copy image", and then 3) Ctrl+V paste the image in a reply here — will that work?

            The image <img> should be placed at the cursor position (not appended).

            But Ctrl+C-copying a file from the OS file browser, and then Ctrl+V, doesn't work for me — then the clipboard for some reason only includes the OS file sys path to the file.

            And I just found a bug I think: trying to copy a video won't work, then Ty tries to create an <iframe> instead and there was some error. I should look into this some time later.

            1. CChristian Scheuer @chrscheuer2020-11-25 01:15:13.411Z

              Just took a screenshot and pasted it here. That's the thing we most want and it works!!! Oh yay this is awesome

              1. KajMagnus @KajMagnus2020-11-25 07:26:32.293Z

                Thanks for trying & verifying :- )

                1. CChristian Scheuer @chrscheuer2020-12-03 12:33:36.153Z

                  I keep using this. It has completely changed the functionality of the editor for the better for me.
                  Awesome!

            2. Progress
              with doing this idea
            3. @KajMagnus marked this topic as Planned 2018-08-23 11:55:50.558Z.
            4. @KajMagnus marked this topic as Started 2020-11-15 08:36:01.468Z.
            5. @KajMagnus marked this topic as Done 2020-11-26 22:08:39.421Z.