从 Google 相册上传多张照片

Question

The goal is to be able to select multiple photos from Google Photos on an Android device and upload them using a regular html file input control.

I am able to select multiple photos but only one is uploaded...

Using the Gallery I am able upload multiple photos. Any idea why?

Here is a tester: https://jsfiddle.net/7sL1v46e/

<input id="fileInput" type="file" multiple accept="image/*">

When multiple files are selected the number of selected files appears in front of the file input.

EDIT 1: included the attribute accept="image/*". Still doesn't work if source of the photos is Google Photos

Answer 1

I have experienced the same problem before. I used this line of code to bypass my problem:

<input type="file" id="fileInput" multiple accept="image/*">

if you want to upload only specified file types try using:

<input type="file" id="fileInput" multiple accept="image/*,.jpg,.png"/>

Answer 2

Same problem here. Google Photos picker allows multiple selection on Chrome but only returns one file.

Firefox doesn't support multiple file selection yet: https://caniuse.com/#feat=input-file-multiple

There is a bug report on Chromium about this but no sign of activity: https://bugs.chromium.org/p/chromium/issues/detail?id=348912

Guess we have to wait or implement a solution with the Picasa Web Albums Data API .

Answer 3

You should specify the input types you want to accept. For whatever reason, this makes everything work as expected.

<input type="file" id="images" multiple accept="image/*" />

Answer 4

Same problem here, with different versions of the 'Google Photos' App (eg 3.24.0.204162798 on Android 8.0).

The respective dialog is openend on the intent and I'm able to select multiple images but only one is returned to the HTML input element.

The HTML input element I'm using is the following:

<input id="file" type="file" accept="image/*" multiple></input>

I'm pretty sure that the HTML code is correct and should work, references:

• https://addpipe.com/blog/correct-syntax-html-media-capture/
• https://www.w3schools.com/tags/att_input_multiple.asp

Any hint is appreciated!

Edit:

Anybody know where I can submit a bug report for Google's 'Photos' App?

Answer 5

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input . While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

Usage

Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

For Multiple image upload

<input type="file" id="deviceCamera" multiple accept="image/*"/>

but from the "mobile" (image/*) input it let you select from Camera or some apps, but not Documents , and you weren't able to multi-select from them.

so now i'm just using:

<input type="file" multiple accept="image/*,.jpg,.gif,.png,.jpeg"/>

this gives me access to select from Documents and Camera but not any of the apps, but at least Documents allows you to select multiple images.