Skip to content

Commit e987d25

Browse files
authored
[image_picker_for_web] Introduce image_picker_for_web package (flutter#2802)
1 parent 881552e commit e987d25

File tree

14 files changed

+522
-0
lines changed

14 files changed

+522
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 0.1.0
2+
3+
* Initial open-source release.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Copyright 2019 The Chromium Authors. All rights reserved.
2+
//
3+
// Redistribution and use in source and binary forms, with or without
4+
// modification, are permitted provided that the following conditions are
5+
// met:
6+
//
7+
// * Redistributions of source code must retain the above copyright
8+
// notice, this list of conditions and the following disclaimer.
9+
// * Redistributions in binary form must reproduce the above
10+
// copyright notice, this list of conditions and the following disclaimer
11+
// in the documentation and/or other materials provided with the
12+
// distribution.
13+
// * Neither the name of Google Inc. nor the names of its
14+
// contributors may be used to endorse or promote products derived from
15+
// this software without specific prior written permission.
16+
//
17+
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18+
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19+
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20+
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21+
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22+
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23+
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24+
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25+
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26+
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27+
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# image_picker_for_web
2+
3+
A web implementation of [`image_picker`][1].
4+
5+
## Browser Support
6+
7+
Since Web Browsers don't offer direct access to their users' file system,
8+
this plugin provides a `PickedFile` abstraction to make access access uniform
9+
across platforms.
10+
11+
The web version of the plugin puts network-accessible URIs as the `path`
12+
in the returned `PickedFile`.
13+
14+
### URL.createObjectURL()
15+
16+
The `PickedFile` object in web is backed by [`URL.createObjectUrl` Web API](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL),
17+
which is reasonably well supported across all browsers:
18+
19+
![Data on support for the bloburls feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/bloburls.png)
20+
21+
However, the returned `path` attribute of the `PickedFile` points to a `network` resource, and not a
22+
local path in your users' drive. See **Use the plugin** below for some examples on how to use this
23+
return value in a cross-platform way.
24+
25+
### input file "accept"
26+
27+
In order to filter only video/image content, some browsers offer an [`accept` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) in their `input type="file"` form elements:
28+
29+
![Data on support for the input-file-accept feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/input-file-accept.png)
30+
31+
This feature is just a convenience for users, **not validation**.
32+
33+
Users can override this setting on their browsers. You must validate in your app (or server)
34+
that the user has picked the file type that you can handle.
35+
36+
### input file "capture"
37+
38+
In order to "take a photo", some mobile browsers offer a [`capture` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture):
39+
40+
![Data on support for the html-media-capture feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/html-media-capture.png)
41+
42+
Each browser may implement `capture` any way they please, so it may (or may not) make a
43+
difference in your users' experience.
44+
45+
## Usage
46+
47+
### Import the package
48+
49+
This package is an unendorsed web platform implementation of `image_picker`.
50+
51+
In order to use this, you'll need to depend in `image_picker: ^0.6.7` (which was the first version of the plugin that allowed federation), and `image_picker_for_web: ^0.1.0`.
52+
53+
```yaml
54+
...
55+
dependencies:
56+
...
57+
image_picker: ^0.6.7
58+
image_picker_for_web: ^0.1.0
59+
...
60+
...
61+
```
62+
63+
### Use the plugin
64+
65+
You should be able to use `package:image_picker` _almost_ as normal.
66+
67+
Once the user has picked a file, the returned `PickedFile` instance will contain a
68+
`network`-accessible URL (pointing to a location within the browser).
69+
70+
The instace will also let you retrieve the bytes of the selected file across all platforms.
71+
72+
If you want to use the path directly, your code would need look like this:
73+
74+
```dart
75+
...
76+
if (kIsWeb) {
77+
Image.network(pickedFile.path);
78+
} else {
79+
Image.file(File(pickedFile.path));
80+
}
81+
...
82+
```
83+
84+
Or, using bytes:
85+
86+
```dart
87+
...
88+
Image.memory(await pickedFile.readAsBytes())
89+
...
90+
```
91+
92+
[1]: https://pub.dev/packages/image_picker
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
*.iml
2+
.gradle
3+
/local.properties
4+
/.idea/workspace.xml
5+
/.idea/libraries
6+
.DS_Store
7+
/build
8+
/captures
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
group 'io.flutter.image_picker_for_web'
2+
version '1.0'
3+
4+
buildscript {
5+
repositories {
6+
google()
7+
jcenter()
8+
}
9+
10+
dependencies {
11+
classpath 'com.android.tools.build:gradle:3.5.0'
12+
}
13+
}
14+
15+
rootProject.allprojects {
16+
repositories {
17+
google()
18+
jcenter()
19+
}
20+
}
21+
22+
apply plugin: 'com.android.library'
23+
24+
android {
25+
compileSdkVersion 28
26+
27+
defaultConfig {
28+
minSdkVersion 16
29+
}
30+
lintOptions {
31+
disable 'InvalidPackage'
32+
}
33+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
org.gradle.jvmargs=-Xmx1536M
2+
android.enableR8=true
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
distributionBase=GRADLE_USER_HOME
2+
distributionPath=wrapper/dists
3+
zipStoreBase=GRADLE_USER_HOME
4+
zipStorePath=wrapper/dists
5+
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
rootProject.name = 'image_picker_for_web'
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
package="io.flutter.image_picker_for_web">
3+
</manifest>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Copyright 2019 The Chromium Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
package io.flutter.image_picker_for_web;
6+
7+
import io.flutter.embedding.engine.plugins.FlutterPlugin;
8+
import io.flutter.plugin.common.PluginRegistry.Registrar;
9+
10+
/** ImagePickerWebPlugin */
11+
public class ImagePickerWebPlugin implements FlutterPlugin {
12+
@Override
13+
public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) {}
14+
15+
// This static function is optional and equivalent to onAttachedToEngine. It supports the old
16+
// pre-Flutter-1.12 Android projects. You are encouraged to continue supporting
17+
// plugin registration via this function while apps migrate to use the new Android APIs
18+
// post-flutter-1.12 via https://flutter.dev/go/android-project-migration.
19+
//
20+
// It is encouraged to share logic between onAttachedToEngine and registerWith to keep
21+
// them functionally equivalent. Only one of onAttachedToEngine or registerWith will be called
22+
// depending on the user's project. onAttachedToEngine or registerWith must both be defined
23+
// in the same class.
24+
public static void registerWith(Registrar registrar) {}
25+
26+
@Override
27+
public void onDetachedFromEngine(FlutterPluginBinding binding) {}
28+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#
2+
# To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html
3+
#
4+
Pod::Spec.new do |s|
5+
s.name = 'image_picker_for_web'
6+
s.version = '0.0.1'
7+
s.summary = 'No-op implementation of image_picker_for_web plugin to avoid build issues on iOS'
8+
s.description = <<-DESC
9+
temp fake image_picker_for_web plugin
10+
DESC
11+
s.homepage = 'https://github.com/flutter/plugins/tree/master/packages/image_picker/image_picker_for_web'
12+
s.license = { :file => '../LICENSE' }
13+
s.author = { 'Flutter Team' => '[email protected]' }
14+
s.source = { :path => '.' }
15+
s.source_files = 'Classes/**/*'
16+
s.public_header_files = 'Classes/**/*.h'
17+
s.dependency 'Flutter'
18+
19+
s.ios.deployment_target = '8.0'
20+
end

0 commit comments

Comments
 (0)