0

I want to upload separate files and then view and print these files without uploading the server. If user click send button, send these files to the server.

Exp:

<p>
    <input type="file" id="file1">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file2">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file3">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file4">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<button>Send All Files to Server</button>

enter image description here

Fiddle Example

Can I do this with only use vanilla JS without using a third party app?

midstack
  • 2,105
  • 7
  • 44
  • 73
  • possible duplicate https://stackoverflow.com/questions/16505333/get-the-data-of-uploaded-file-in-javascript – ABOS Dec 19 '18 at 16:27

1 Answers1

0

You can read the files using File Reader API then paint them into a canvas, have a print-only CSS that would hide (display: none) all the elements besides the canvas.

Dmitriy
  • 2,742
  • 1
  • 17
  • 15