How to paste files into an input using CTRL-V / Paste?

Question

Is there a way to paste files into an input?

Basically I want to copy a file on the computer / Internet and by placing the mouse inside the input zone, when doing Crtl-v (paste) the input detects that command. Is there a way to do this?

DEMO

HTML

<div class="card bg-light mb-3" style="width:700px; height:300px">
    <div class="card-header">Attachment</div>
    <div class="card-body att">
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
        <div class="grid-container">
            <div *ngFor="let url of items">
                <div class="grid-item">{{url.fileType}} {{url.filename}}</div><span class="delete" (click)="deleteImage(Imagens[0])"><img>x</span>
            </div>
        </div>
    </div>
</div>

Component

 detectFiles(event) {
    var files = event.target.files;

      for (let index = 0; index < files.length; index++) {

        const item: any = {
          filename: event.target.files[index].name.split('.')[0],
          fileType: event.target.files[index].type.split("image/").join(""),
          fileSize: event.target.files[index].size,
          number: index
        };

        this.items.push(item);

        this.filename = this.items[0].filename;
        this.fileType = this.items[0].fileType;
        this.fileSize = this.items[0].fileSize;
        console.log(this.items)
        const reader = new FileReader();
        reader.onload = (e: any) => {
          item.url = e.target.result;       
        }
        reader.readAsDataURL(files[index]);
      }   

  }

Maybe on paste event will help? https://stackoverflow.com/questions/10972954/javascript-onpaste — Maksim Tikhonov, Jan 16 '20 at 12:07
There a solution here for when you have actual image data in the clipboard, https://stackoverflow.com/questions/50427513/html-paste-clipboard-image-to-file-input - not sure if that works as well if your clipboard content is actually “files” though. — 04FS, Jan 16 '20 at 12:11

score 2 · Answer 1 · answered Jan 16 '20 at 12:20

2

You can start with this:

In this example, you can test by copying some image in your local computer, then pasting it here using Ctrl + V (or Command + V on Mac).

window.addEventListener("paste", function(e){
    var item = Array.from(e.clipboardData.items).find(x => /^image\//.test(x.type));
      
    var blob = item.getAsFile();

    var img = new Image();

    img.onload = function(){
        document.body.appendChild(this);
    };

    img.src = URL.createObjectURL(blob);
});

<div>Click on the body and press Ctrl-V</div>

Note: Be sure you're copying an image, I don't check file type in this example

answered Jan 16 '20 at 12:20

Tân

1
15
56
102

Thanks for the help! Is there a way to put this in an input file and typesript? :( – Mike Landers Jan 16 '20 at 12:27
@MikeLanders Nope. You cannot add a copied file to input file element. But you can store it in a global variable/array, just like `var files = []` – Tân Jan 16 '20 at 12:32
So maybe you should store it in the variable items, which I should possibly be able to display (using * ngFor = "let item of items" – Mike Landers Jan 16 '20 at 12:45

How to paste files into an input using CTRL-V / Paste?

1 Answers1