How Native and Web are different for file uploads?

When we talk about web, the behaviour of <input type = “file”> element is pretty straightforward. We will click on the Choose File button, and file explorer will be launched where we can select any file on our computer system.

If we try to do the same thing on mobile, its behaviour will vary according to the platform. Generally, the process is quite the same – the user’s click onto the button presents them with the option to select the file, and then we can get the reference to that file. However, we don’t have a standard “file browser” window that opens up and allows the user to select any file on their device. As per the mobile usage, depending on the context, the user might be offered to launch the camera directly, or maybe prompted to choose a file directly from their storage or a choice to browse files, snap a photo, capture a video and so on.

Let’s have a look at the different ways with which we can set up the file input.

Differences between the file input behaviour of iOS and Android

Although the next isn’t an exhaustive list of ways to line up the file input element, these are a fairly good set of examples that we could default to.

NOTE: The examples below use Angular event bindings to handle the change event, but otherwise the implementation is going to be an equivalent with vanilla JavaScript, StencilJS, React, Vue, or whatever else you’re using.

Standard File Input

<input type=”file” (change)=”getFile($event)” />

On iOS, this may prompt the user to settle on between taking Photo or Video, Photo Library, or Browse so as to return the specified file.

On Android, this may directly launch the native file selection screen to pick any file on the device.

Limiting File Input to pictures

<input type=”file” accept=”image/*” (change)=”getFile($event)” />

On iOS, this may prompt the user to settle on between taking Photo, Photo Library, or Browse so as to return the specified file. Note that Video is not any longer a choice within the first option and videos (and other files) also will be excluded from being listed if the user chooses to pick an existing photo.

On Android, this may launch an equivalent native file selection screen again, but this point it’ll be filtered to only show images.

Using Camera for File Input

<input type=”file” accept=”image/*” capture (change)=”getFile($event)” />

On iOS, this may directly launch the camera in Photo mode and permit the user to require a photograph. Once the user takes a photograph they’re going to be ready to choose whether to use that photo or if they need to retake the photo. Once the user chooses Use Photo the file are going to be supplied to the appliance.

On Android, this may directly launch the camera allowing the user to require a photograph (not a video). The user can then accept the taken photo or take another.

Limiting File Input to Videos

<input type=”file” accept=”video/*” (change)=”getFile($event)” />

On iOS, this may prompt the user to settle on between taking Video, Photo Library, or Browse so as to return the specified file. Note that Photo is not any longer a choice within the first option and photos (and other files) also will be excluded from being listed if the user chooses to pick an existing video.

On Android, this may launch the native file selection screen again, but this point it’ll be filtered to only show videos.

Limiting File Input to Audio

<input type=”file” accept=”audio/*” (change)=”getFile($event)”>

On iOS, this may prompt the user to settle on between taking Photo or Video, Photo Library, or Browse so as to return the specified file. Note that there’s no restriction to audio files only during this case.

On Android, this may launch the native file selection screen again, but this point it’ll be filtered to only show audio files.

Keep in mind that the specification for the file input element has changed over the years, so you would possibly find many various samples of ways to line up this element and force certain behaviours. generally, my advice would be to not attempt to “game the system”. Use the only options and specialise in telling the browser what you would like, then let the platform decide how best to satisfy that request. If you are trying to urge too tricky and take over this process to enforce what you would like, you’ll leave yourself susceptible to different behaviours on different platforms/versions and also your solution is going to be more susceptible to breaking within the future.

If you are doing need more control over this process, in ways in which using the file input element doesn’t allow (or a minimum of it doesn’t allow it consistently across platforms), you’ll check out using native plugins/APIs instead. The Camera API, for instance, will offer you much greater control over the method of selecting/capturing a photograph than the <input type=”file”> element will.

How can we upload these files to a server?

Fortunately, the resulting file reference is often uploaded within the same way as a file retrieved from a traditional desktop/web file input element. you’ll just get to make a POST request that has multipart/form-data that contains the file(s) you would like to upload.

Summary

The standard <input type=”file”> element provides a surprisingly smooth file selection experience on native iOS and Android platforms, and these files are often easily sent as standard multipart/form-data to your backend server. this may probably be all you would like tons of the time, except for certain specialised circumstances or use cases you would possibly get to check out using native plugins or APIs to fulfil your file selection and transferring needs.