Uploading files with html

File uploads with HTML

It is quite common for websites or apps to allow a user to upload files as a feature or part of a feature. For example, HTML file uploads could be used to allow users to upload avatars, or allow an internal team to upload photos of products to a website or app. In this tutorial we will briefly look at file uploads, and how to set this up in your coding. This tutorial assumes some knowledge and understanding of coding and web development. This post is meant as a brief overview. Let’s get into it!

Luckily for us, HTML provides a fairly simple solution which enables us to upload files, the element! Taking a look at this, a limited example of how we’d code an upload file button in HTML could look like this:

label for="photo">Choose a photo!label> input type="file" id="photo" name="photo" accept="image/*">

You should see the following if you run an HTML page on a localhost server:

Clicking on the Choose File button should bring up your Operating System’s file selection option.

If we wanted to customize the text within the button to something other than Choose File we could do something like:

span> File Upload input type="file" id="photo" name="photo" accept="image/png, image/jpeg"> span>

That gets us the button and the ability to choose the file. How would we direct the file to our server once it’s selected? To direct the file, we would make the button part of a form which would then activate a Script (could be JavaScript, PHP, etc). The logic in this Script would then tell the server what to do with the file once it’s uploaded. We won’t go over those kinds of Scripts in this post. However, the code to link to the Script would look something like this:

form action="yourScript"> input type="file" id="myFile" name="filename"> input type="submit"> form>

Hiding the button

In some instances, you may want to hide a file upload button. The way to do this typically relies on CSS.

This is one way to do it, we could attach the CSS to our input and do the following:

input  opacity: 0; z-index: -1; position: absolute; >

• opacity: 0 — makes the input transparent.
• z-index: -1 — makes sure the element stays underneath anything else on the page.
• position: absolute — make sure that the element doesn’t interfere with sibling elements.

We would set this as the default CSS Then we would write a short Script that would change the CSS once someone selected a file, so that the user could see a Submit button, for instance.

There are a couple of other potential CSS options:

These options should be avoided, as they do not work well with accessibility readers. Opacity: 0 is the preferred method.

Further customization

There is a very good chance that we would want to change the look of our file upload buttons from the rather ugly grey default buttons to something a bit more pleasing to the eye.

As one would guess, button customization involves CSS.

We know that we can put the input in the tags to customize the text that appears on the button. Another method is the tags.

input type="file" name="file" id="file" class="myclass" /> label for="file">Choose a filelabel>

.myclass + label  font-size: 2em; font-weight: 700; color: white; background-color: green; border-radius: 10px; display: inline-block; > .myclass:focus + label, .myclass + label:hover  background-color: purple; >

This will get us a green button that will turn purple when we hover the mouse cursor over it, it should look like this:

However, we are now presented with a problem! How do we get rid of the default input option on the left (since we would only want the one custom button)? Remember how we learned how to hide buttons earlier? We can put that into practice now.

Add the following CSS to the previous CSS code:

.myclass  width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; >

Getting information on files

There may be instances in which we want to gather information about files which the user is uploading to our server. Every file includes file metadata, which can be read once the user uploads said file(s). File metadata can include things such as the file’s MIME type (what kind of media it is), file name, size, date the file was last modified. let’s take a quick look at how we could pull up file metadata — this will involve some JavaScript.

input type="file" multiple onchange="showType(this)">

function showType(fileInput)  const files = fileInput.files; for (const i = 0; i  files.length; i++)  const name = files[i].name; const type = files[i].type; alert('Filename: ' + name + ' , Type: ' + type); > >

If we run this code, we will see a Choose File button. When we choose a file from our device, a browser popup box will appear. The browser popup will inform us of the filename and file type. Of course there is logic that we can write to change the type of file metadata that you gather, and what happens with it, depending on our needs.

Limiting accepted file types

We, of course, can think of many instances where one would want to limit which kinds of files the user can choose to upload to your server (security considerations among the many reasons to consider).

Limiting accepted file types is quite easy — to do this we make use of the accept attribute within the element. An example of how we would do this is:

input type="file" id="photo" name="photo" accept=".jpg,.jpeg,.png">

We can specify which specific file formats you want to accept, like we did above, or we can simply do:

There are ways you can limit formats and file types for other types of files as well, but we won’t cover everything here.

The Uploadcare uploader

Uploadcare features a handy File Uploader feature. The Uploadcare File Uploader is responsive, mobile-ready, and easy to implement. For full details on our File Uploader please visit https://uploadcare.com/docs/uploads/file-uploader/

Once you get your Uploadcare keys, the quickest way to implement the File Uploader is via CDN like so:

script> UPLOADCARE_PUBLIC_KEY = 'demopublickey'; script> script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"> script>

And there you have it! That was a brief overview on the basics of uploading files to a server using HTML. Now get out there and try implementing what we’ve learned in a project!

Don’t miss the next article

Wake up, Neo.

Next up

Resize and rotate images using JavaScript

Learn to resize, rotate, zoom in and out images using JavaScript. Sample code included! Just copy, paste and tweak it!

Developing an HTML5 file uploader with a PHP back end

Read this hands-on guide on how to create an HTML5 file uploader and find out if you should use a ready-made one

Creating responsive images with image-set

Using image-set for resolution switching, art direction and speeding up loading of web pages

Get off the ground with Next.js

Everything you need to know to write your first Next.js app: from learning Next.js to different deployment options!

Источник

How to Upload Files with HTML

This post shows you how to upload files using only HTML. Access user files, create the HTTP request, and set the correct content-type headers.

Today we are kicking off the first post in a series all about uploading files to the web. In this post, we’ll start with the basics using HTML. The full series will look like:

Access Files

The very first step is accessing a file to upload. Unfortunately, or rather, fortunately, browsers can’t access our file systems. If they did, it would be a major security concern.

There is work being done on the File System Access API, but it’s experimental and will be limited access, so let’s just pretend it doesn’t exist.

Accessing a file requires user interaction, which means we need something in the UI for the user to interact with. Conveniently, there is the input element with a file type attribute.

On its own, a file input isn’t very useful. It allows a user to select a file from their device, but that’s about it.

To actually send the file to a server, we need to make an HTTP request, which means we need a . We’ll put the file input inside along with a to submit the form. The input will also need a to make it accessible for assistive technology, an id attribute to associate it with the label, and a name attribute in order to include its data along with the HTTP request.

Include a Request Body

If we watch the network tab as we submit the form, we can see that it generates a GET request, and the payload is sent as a query string that looks like this: “ ?name=filename.txt “. It’s essentially a key-value pair, with the key being the input name and the value being the name of the file.

Not quite what we’re going for here.

We can’t actually send a file using a GET request because you can’t put a file in the query string parameters. We need to put the file in the body of the request. To do that, we need to send a POST request, which we can do by changing the form’s method attribute to «post» .

Now, if we explore that request, we can see that we are making a post request. We can also see that the request has a payload containing the form’s data. Unfortunately, the data is still just a key-value pair with the input name and the filename.

Set the Content-Type

We’re still not actually sending the file, and the reason has to do with the request “ Content-Type “.

By default, when a form is submitted, the request is sent with a Content-Type of application/x-www-form-urlencoded . And unfortunately, we can’t send the binary file information as URL encoded data.

In order to send the file contents as binary data, we have to change the Content-Type of the request to multipart/form-data . And in order to do that, we can set the form’s enctype attribute.

Now, if we submit the form one more time, we can see the request uses the POST method, has the Content-Type set to multipart/form-data . In Chromium browsers, you’ll no longer see the request payload, but you can see it in the Firefox devtools under the request Params tab.

Recap

With all that in place, we can upload files using HTML. To re-iterate, sending files with HTML requires three things:

1. Create an input with the type of file to access the file system.
2. Use a form with method=»post» to include a body on the request.
3. Set the request’s Content-Type to multipart/form-data using the enctype attribute.

I hope you learned something new today, and you come back for the rest of the series. In the rest of the series, we’ll cover things like uploading files with JavaScript, receiving files on the backend, optimizing resources and costs with Object Storage, security concerns for uploads, and delivery improvements.

Once again, here’s what the series outline will look like:

Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.

Originally published on austingil.com.

Источник