Best way to upload and manage files HTML

Question

As the title suggests, what is the best way to upload a file in an HTML website and where does that file do after it is uploaded?

I would like to upload a file to an HTML website (that I create and host locally), then I would like that uploaded file to be stored in the same directory as the index.html file of my website.

How can that be accomplished with something like this:

<html>

<body>
  <form>
    <p>
      Specify your File:<br>
      <input type="file">
    </p>
    <div>
      <input type="submit" value="Submit">
    </div>
  </form>
</body>

</html>

UPDATE (CLARIFICATION): My index.html and related files are located in (and are accessible from) a network drive. I would like any files uploaded to appear in the same directory (or subdirectory) of that network drive.

Thank you in advance for your help!

This would all depend on what kind of server you are running this on. PHP, .NET, etc. — Ricca, Mar 07 '19 at 17:17
You might try spinning up a Node.js server on your machine if you're just learning or testing the html (https://nodejs.org/en/docs/guides/getting-started-guide/) but if this is a site accessible on the web, you need to contact your hosting provider to see what your options are for your server-side code. (See https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview if this is all confusing you.) — Cat, Mar 07 '19 at 17:29
Thank you for your response! Let me update my question to be more specific for what I was looking for. Your response helps, but I have a specific scenario I need. — Microbob, Mar 07 '19 at 18:36

kzhao14 · Accepted Answer · 2019-03-07T21:26:42.607

2

You will need to use a server-side language such as PHP to upload files to your server.

A PHP script can be used with a HTML form to allow users to upload files to the server. Initially files are uploaded into a temporary directory and then relocated to a target destination by a PHP script.

Your HTML form would pass the file information to the PHP file, which would upload and process the file onto your server.

Take a look here for more information.

edited Mar 07 '19 at 21:26

answered Mar 07 '19 at 17:16

kzhao14

2,470
14
21

By any chance, is there a straightforward way to accomplish this with just JavaScript for HTML? – Microbob Mar 07 '19 at 18:46

score 1 · Answer 2 · answered Mar 07 '19 at 19:45

1

it's like k97513 said. only with javascript and html it's not possible to upload any file on the running webserver, except the webserver is running locally on the same machine where you started the browser from.

you need any serverside programming language like php, nodejs, ruby on rail, java, python, ... to solve your request. personally I would suggest PHP because it's easy to understand and there are lots of tutorials online for everything, especially also for your case.

answered Mar 07 '19 at 19:45

DubZ

580
3
12

Got it. Thank you for the clarification – Microbob Mar 07 '19 at 19:53
one addition: you can upload files with javascript and download them again. but you cant define a path where to save the file. it will always be downloaded to the default download directory. so if you want to always save the file to the mounted network drive, and always to the same directory, you can have a look at this: https://stackoverflow.com/questions/34034475/edit-and-save-a-file-locally-with-js?answertab=active#tab-top – DubZ Mar 07 '19 at 20:03
I'll explore it. Thanks! – Microbob Mar 07 '19 at 22:07

Best way to upload and manage files HTML

2 Answers2