0

I want to write a html file that can access files on my computer with gui like this one:

https://smallpdf.com/pdf-to-jpg

In the yellow box it says "choose file". you can click that and choose a file from your computers file system. I would like to do something similar and then be able to use the files in the html.

In particular I want the user to be able to choose a png and then convert it to a html canvas and then do stuff with that canvas. I want everything to be local, so nothing should be uploaded like the website i linked to does.

How does one do this?

Thanks

Sorry this wasn't clear, I want to have all the file processing handled by the html page not by some php on a server. I don't want there to be a server side component to this. If that is not possible please let me know, thanks again.

I want everything to be able to work off line so you could just have the html page, open it, and use it.

Mathew
  • 1,116
  • 5
  • 27
  • 59
  • You might find this helpful http://stackoverflow.com/questions/13938686/can-i-load-a-local-file-into-an-html-canvas-element – AZee Mar 29 '17 at 01:18
  • That looks like what I want to do but does it have a gui like the one i linked to in the question? – Mathew Mar 29 '17 at 01:21
  • My understanding is that the filesystem api has limited support. – Ronnie Royston Mar 29 '17 at 01:25
  • 1
    It simply shows how to get contents of a local file in `base64`. You can dig more to find how to make it work with drag/drop. http://www.htmlgoodies.com/html5/javascript/drag-files-into-the-browser-from-the-desktop-HTML5.html#fbid=zj3J9GM_Zt- – AZee Mar 29 '17 at 01:26
  • would it be straight forward to set up a similar gui then? if so how? thanks – Mathew Mar 29 '17 at 01:26
  • thanks, all of that looks like good resources, I'll check that out, – Mathew Mar 29 '17 at 01:27
  • @fred you are welcome! – AZee Mar 29 '17 at 01:29

3 Answers3

2

You can achieve what you want through this code

<form>
   <input type="file" name="pic" accept=".png" onchange="loadFile(event)">
   <img id="output"/>
</form>

<script>
  var loadFile = function(event) {
     var output = document.getElementById('output');
     output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

As for the UI, it will be a css that you need to do on your own.

JkAlombro
  • 1,696
  • 1
  • 16
  • 30
1

Maybe you can try the File Api from Html5 so you could load it on the local and made the changes you need.

lizzie136
  • 21
  • 3
  • would that allow me to create a page that while off line could edit an image using html canvas? if so, does it have the file selection gui (like the one i linked to) already built into the API? – Mathew Mar 29 '17 at 01:24
0

You're going to want to learn a server-side language like PHP to accomplish this task. W3schools has tutorials you can learn from. https://www.w3schools.com/php/php_file_upload.asp

Vbudo
  • 405
  • 4
  • 9