JCS
JCS

Reputation: 1101

Upload multiple photos from Google Photos

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

Upvotes: 8

Views: 993

Answers (2)

Vignesh Kumar A
Vignesh Kumar A

Reputation: 28403

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.

Upvotes: 0

fny
fny

Reputation: 33537

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/*" />

Upvotes: 1

Related Questions