Iphone html input file

In the last tutorial, we covered how to handle file uploads in Ionic using the element. This included using the file input element to grab a reference to a file and then upload that file to a Node/Express server (there is also an extension to the tutorial available where we build the backend with NestJS instead).

Those tutorials focused on a desktop/web environment, but what do we do to handle file uploads when our applications are deployed natively to iOS or Android? Can we still use ?

The answer to that question is mostly yes, but there are a few things to keep in mind.

Outline

Before we get started
If you have not already read (or watched) the previous tutorial, it would be a good idea to complete it before reading this one. The previous tutorial provides a lot of important context around how the HTML elements works when specifying the file type, and also around how those files can be uploaded to a backend server with multipart/form-data and the FormData API.

What is the difference between web and native for file uploads?
When we use the element in a standard desktop/web environment, we can be quite certain of its behaviour. We click the Choose file button and a file explorer window is launched where we can select any file on our computer.

When we try to do this on mobile the behaviour is quite different and exactly how it behaves will depend on the platform. Generally speaking, the process is still more or less the same — the user clicks the button, selects a file, and then we are able to get a reference to that file. However, we don’t have a standard «file explorer» window that pops up and allows the user to select any file on their device. Depending on the context, the camera might be launched directly, or the user might be prompted to choose a file directly from the file system, or the user might be offered a choice between browsing files, taking a photo, taking a video, and so on.

Let’s take a look at different ways to set up the file input.

Differences in file input behaviour between iOS and Android
Although the following is not an exhaustive list of ways to set up the file input element, these are a pretty 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 will be the same with vanilla JavaScript, StencilJS, React, Vue, or whatever else you are using.

Standard File Input
On iOS, this will prompt the user to choose between Take Photo or Video , Photo Library , or Browse in order to return the desired file.

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

Limiting File Input to Images
On iOS, this will prompt the user to choose between Take Photo , Photo Library , or Browse in order to return the desired file. Note that Video is no longer a choice in the first option and videos (and other files) will also be excluded from being listed if the user chooses to select an existing photo.

On Android, this will launch the same native file selection screen again, but this time it will be filtered to only show images.

Using Camera for File Input
On iOS, this will directly launch the camera in Photo mode and allow the user to take a photo. Once the user takes a photo they will be able to choose whether to use that photo or if they want to retake the photo. Once the user chooses Use Photo the file will be supplied to the application.

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

Limiting File Input to Videos
On iOS, this will prompt the user to choose between Take Video , Photo Library , or Browse in order to return the desired file. Note that Photo is no longer a choice in the first option and photos (and other files) will also be excluded from being listed if the user chooses to select an existing video.

On Android, this will launch the native file selection screen again, but this time it will be filtered to only show videos.

Limiting File Input to Audio
On iOS, this will prompt the user to choose between Take Photo or Video , Photo Library , or Browse in order to return the desired file. Note that there is no restriction to audio files only in this case.

On Android, this will launch the native file selection screen again, but this time it will 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 might find many different examples of ways to set up this element and force certain behaviours. In general, my advice would be not to try to «game the system». Use the simplest options and focus on telling the browser what you want, then let the platform decide how best to fulfill that request. If you try to get too tricky and take over this process to enforce what you want, you will leave yourself vulnerable to different behaviours on different platforms/versions and also your solution will be more prone to breaking in the future.

If you do need more control over this process, in ways that using the file input element does not allow (or at least it does not allow it consistently across platforms), you can look into using native plugins/APIs instead. The Camera API, for example, will give you much greater control over the process of selecting/capturing a photo than the element will.

How do we upload these files to a server?
Fortunately, the resulting file reference can be uploaded in the same way as a file retrieved from a normal desktop/web file input element. You will just need to make a POST request that includes multipart/form-data that contains the file(s) you want to upload. For more details on doing that, check out the previous tutorial: Handling File Uploads in Ionic.

Summary
The standard element provides a surprisingly smooth file selection experience on native iOS and Android platforms, and these files can be easily sent as standard multipart/form-data to your backend server. This will probably be all you need a lot of the time, but for certain specialised circumstances or use cases you might need to look into using native plugins or APIs to fulfil your file selection and transferring needs.

If you enjoyed this article, feel free to share it with others!

Discussion

Need some help with this tutorial? Spotted an error? Got some helpful advice for others? Join the discussion on Twitter

If there are no active discussions, start one by including the URL of this post and tag me (@joshuamorony) in a new tweet.

I’ll try to help out directly whenever I have the time, but you might also want to include other relevant tags to attract attention from others who might also be able to help. To make it super easy for others to help you out, you might consider setting up an example on Stack Blitz so others can jump right into your code.

Источник

Input type FILE on HTML FORM not working on Safari Version 14.0.1 (14610.2.11.51.10)

SOLVED/NOTE: I have accepted the answer of adding the «accept=» option to the HTML code as a solution to the problem. It should be noted that although this does work as as a work around, the root cause is likely a Safari bug — it should NOT be a requirement to add this to your HTML to make this functionality work.

ORIGINAL PROBLEM DESCRIPTION & INFO:

My mac received an update this morning, now running macOS Mojave 10.14.6 (18G6042). It looks like Safari must have received an update as part of this, although Apple didn’t give the update specifics, just the usual «You need to Restart» with no extra info, followed by 20 mins of waiting. Safari is now Version 14.0.1 (14610.2.11.51.10).

Since the update, I find that I can no longer submit files through HTML forms in Safari. The «Choose File» button is displayed, but clicking it results in nothing. I’ll post my code below, but I also verified this using the w3schools example at https://www.w3schools.com/tags/att_input_type_file.asp (it won’t work in Safari now either), and my code works fine in Chrome & Firefox on the same laptop.

Does anyone have any info on this? Are extra directives required for this to work in Safari now? Is it blocked due to some security issue? Is this just a bug?

Here’s my test code in case it is relevant, although it’s more or less the same as the w3schools example, with some added PHP to display the file info.

MORE INFO: So the problem continues, and sometimes the dialog opens now, but sometimes it doesn’t. Previously, the dialog would always open in the last directory you loaded or saved files from, I just saved a bunch of pages as PDF (via Print) for some work, and now when I go to Choose File again, it shows the dialog below (unfortunately the screenshot doesn’t capture the full path, but you get the idea). So it looks like this is an issue within Safari, but I’m still not sure exactly what or how to rectify it. Plus, while the dialog opens on my local test page, it’s not opening for web based pages (my sites, w3schools, etc).

MORE INFO: Safari just defaulted again to the «inaccessible» directory it keeps defaulting to sometimes, here’s a screen shot, in case the additional info helps anyone further (probably just the guys at Apple in fixing the bug I’m guessing). Normally you can’t browse to this folder from Safari, which I’m guessing is part of this bug — Safari is trying to default to this directory for file upload, when it can’t jump to the last previously used directory for whatever reason.

Источник

Uploading files using HTML file input on iphone

I am creating a web form for uploading small movie clips to a HTTP server. However, while my HTML file input control gets shown on an ipod touch, the button is completely disabled and I cannot click it to upload files.

What do I have to do to use the input control to upload files (e.g. movie clips or pictures) to my HTTP server. My page is XHTML MP 1.2 compliant.

Answers

IOS6 now allows it: http://agileleague.com/blog/hidden-gem-of-ios6-file-uploads-in-mobile-safari/

I tested and it works. Cheers!

inputAccessoryView and safe area on iPhone X

when the keyboard is not visible, the inputAccessoryView is pinned on the very bottom of the screen. There is no way around that and I think this is intended behavior.

the layoutMarginsGuide (iOS 9+) and safeAreaLayoutGuide (iOS 11) properties of the view set as inputAccessoryView both respect the safe area, i.e on iPhone X :

when the keyboard is not visible, the bottomAnchor accounts for the home button area
when the keyboard is shown, the bottomAnchor is at the bottom of the inputAccessoryView , so that it leaves no useless space above the keyboard

See the result here

It seems like there are a LOT of causes for receiving this cryptic and mostly unhelpful email. Even after verifying the use of distribution certificates, cleaning & rebuilding my project, and checking with codesign from the command line (and following instructions from the email), no errors showed up—-but I’d get the «invalid signature» email right after uploading. All the solutions seem anecdotal and obviously depend on what secret error is causing the problem. I’ve spent the last week pulling my hair out, trying to figure it out for my app—-and finally got it successfully submitted today—so let me share my story and see if it’s relevant to your situation.

Источник

Iphone html input file

элемент с атрибутом type=»file» позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи формы, или обработаны JavaScript и File API.

Value	DOMString представляет собой путь до выбранного файла.
Действия	change (en-US) и input (en-US)
Поддерживаемые атрибуты	accept , multiple , required
IDL атрибуты	files and value
Методы	select() (en-US)

Value

Атрибут value элемента input содержит DOMString , который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, value представляет первый файл из списка. Остальные файлы можно определить используя HTMLInputElement.files свойство элемента input.

Additional attributes

In addition to the common attributes shared by all elements, inputs of type file also support:

files A FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.

Using file inputs

A basic example

This produces the following output:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user’s device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control , and then clicking). If you only want the user to choose a single file per , omit the multiple attribute.

When the form is submitted, each selected file’s name will be added to URL parameters in the following fashion: ?file=file1.txt&file=file2.txt

Getting information on selected files

The selected files’ are returned by the element’s files property, which is a FileList object containing a list of File objects. The FileList behaves like an array, so you can check its length property to get the number of selected files.

Each File object contains the following information:

name The file’s name. lastModified A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight). lastModifiedDate A Date object representing the date and time at which the file was last modified. This is deprecated and should not be used. Use lastModified instead. size The size of the file in bytes. type The file’s MIME type. webkitRelativePath A string specifying the file’s path relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). This is non-standard and should be used with caution.

Note: You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see баг 1384030).

Limiting accepted file types

Often you won’t want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

accept=»image/png» or accept=».png» — Accepts PNG files.
accept=»image/png, image/jpeg» or accept=».png, .jpg, .jpeg» — Accept PNG or JPEG files.
accept=»image/*» — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
accept=».doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document» — accept anything that smells like an MS Word document.

Let’s look like a more complete example:

This produces a similar-looking output to the previous example:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

It may look similar, but if you try selecting a file with this input, you’ll see that the file picker only lets you select the file types specified in the accept value (the exact nature differs across browsers and operating systems).

The accept attribute doesn’t validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation.

Examples

In this example, we’ll present a slightly more advanced file chooser that takes advantage of the file information available in the HTMLInputElement.files property, as well as showing off a few clever tricks.

Note: You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won’t explain the CSS; the JavaScript is the main focus.

First of all, let’s look at the HTML:

This is similar to what we’ve seen before — nothing special to comment on.

Next, let’s walk through the JavaScript.

In the first lines of script, we get references to the form input itself, and the

Note: opacity is used to hide the file input instead of visibility: hidden or display: none , because assistive technology interprets the latter two styles to mean the file input isn’t interactive.

Next, we add an event listener to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom updateImageDisplay() function.

Whenever the updateImageDisplay() function is invoked, we:

The custom validFileType() function takes a File object as a parameter, then loops through the list of allowed file types, checking if any matches the file’s type property. If a match is found, the function returns true . If no match is found, it returns false .

The returnFileSize() function takes a number (of bytes, taken from the current file’s size property), and turns it into a nicely formatted size in bytes/KB/MB.

Источник