1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00

Mobile: allow attaching image or any other file

This commit is contained in:
Laurent Cozic 2017-11-19 15:18:07 +00:00
parent ca20a2a1c2
commit ea077852a1
10 changed files with 140 additions and 74 deletions

View File

@ -137,6 +137,7 @@ android {
}
dependencies {
compile project(':react-native-image-picker')
compile project(':react-native-vector-icons')
compile project(':react-native-fs')
compile fileTree(dir: "libs", include: ["*.jar"])

View File

@ -1,38 +1,37 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="net.cozic.joplin"
android:versionCode="2"
android:versionName="0.8.0">
xmlns:tools="http://schemas.android.com/tools"
package="net.cozic.joplin"
android:versionCode="2"
android:versionName="0.8.0">
<uses-permission android:name="android.permission.INTERNET" />
<!-- <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> -->
<!-- <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove"/>
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:launchMode="singleInstance">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:launchMode="singleInstance">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>

View File

@ -3,6 +3,7 @@ package net.cozic.joplin;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.imagepicker.ImagePickerPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
@ -30,6 +31,7 @@ public class MainApplication extends Application implements ReactApplication {
return Arrays.<ReactPackage>asList(
new ImageResizerPackage(),
new MainReactPackage(),
new ImagePickerPackage(),
new ReactNativeDocumentPicker(),
new RNFetchBlobPackage(),
new RNFSPackage(),

View File

@ -5,7 +5,7 @@ buildscript {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
classpath 'com.android.tools.build:gradle:2.2.+'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files

View File

@ -1,4 +1,6 @@
rootProject.name = 'Joplin'
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-image-resizer'

View File

@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@ -55,6 +54,7 @@
EA501DCDCF4745E9B63ECE98 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7D46CBDF8846409890AD7A84 /* Octicons.ttf */; };
EC11356C90E9419799A2626F /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 51BCEC3BC28046C8BB19531F /* EvilIcons.ttf */; };
FBF57CE2F0F448FA9A8985E2 /* libsqlite3.0.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 0EB8BCAEA9AA41CAAE460443 /* libsqlite3.0.tbd */; };
AF99EEC6C55042F7BFC87583 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 44A39642217548C8ADA91CBA /* libRNImagePicker.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -404,6 +404,8 @@
F5E37D05726A4A08B2EE323A /* libRNFetchBlob.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFetchBlob.a; sourceTree = "<group>"; };
FD370E24D76E461D960DD85D /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
FF411B45E68B4A8CBCC35777 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
A4716DB8654B431D894F89E1 /* RNImagePicker.xcodeproj */ = {isa = PBXFileReference; name = "RNImagePicker.xcodeproj"; path = "../node_modules/react-native-image-picker/ios/RNImagePicker.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
44A39642217548C8ADA91CBA /* libRNImagePicker.a */ = {isa = PBXFileReference; name = "libRNImagePicker.a"; path = "libRNImagePicker.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -439,6 +441,7 @@
929CA5ABC80E4D398AFC4E44 /* libSQLite.a in Frameworks */,
FBF57CE2F0F448FA9A8985E2 /* libsqlite3.0.tbd in Frameworks */,
AE6BB3A2FDA34D01864A721A /* libRNVectorIcons.a in Frameworks */,
AF99EEC6C55042F7BFC87583 /* libRNImagePicker.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -706,6 +709,7 @@
DF1C50EBC11E46A3AF87F80A /* RCTImageResizer.xcodeproj */,
CCDE9E9AF09B45F391B1C2AF /* SQLite.xcodeproj */,
711CBD21F0894B83A2D8E234 /* RNVectorIcons.xcodeproj */,
A4716DB8654B431D894F89E1 /* RNImagePicker.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -1392,6 +1396,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = JoplinTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
@ -1404,6 +1409,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1428,6 +1434,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = JoplinTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
@ -1440,6 +1447,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1465,6 +1473,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = Joplin/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1492,6 +1501,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = Joplin/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1526,6 +1536,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = "Joplin-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1537,6 +1548,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1571,6 +1583,7 @@
"$(SRCROOT)/../node_modules/react-native-image-resizer/ios/RCTImageResizer",
"$(SRCROOT)/../node_modules/react-native-sqlite-storage/src/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-image-picker\ios",
);
INFOPLIST_FILE = "Joplin-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1582,6 +1595,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1616,6 +1630,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.Joplin-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";
@ -1646,6 +1661,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.Joplin-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";

View File

@ -51,6 +51,10 @@
</dict>
</dict>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>To allow attaching images to a note</string>
<key>NSCameraUsageDescription</key>
<string>To allow attaching a photo to a note</string>
<key>UIAppFonts</key>
<array>
<string>Entypo.ttf</string>

View File

@ -25,6 +25,7 @@ const RNFetchBlob = require('react-native-fetch-blob').default;
const { DocumentPicker, DocumentPickerUtil } = require('react-native-document-picker');
const ImageResizer = require('react-native-image-resizer').default;
const shared = require('lib/components/shared/note-screen-shared.js');
const ImagePicker = require('react-native-image-picker');
class NoteScreenComponent extends BaseScreenComponent {
@ -185,7 +186,7 @@ class NoteScreenComponent extends BaseScreenComponent {
async pickDocument() {
return new Promise((resolve, reject) => {
DocumentPicker.show({ filetype: [DocumentPickerUtil.images()] }, (error,res) => {
DocumentPicker.show({ filetype: [DocumentPickerUtil.allFiles()] }, (error,res) => {
if (error) {
// Also returns an error if the user doesn't pick a file
// so just resolve with null.
@ -207,56 +208,77 @@ class NoteScreenComponent extends BaseScreenComponent {
});
}
async attachFile_onPress() {
const res = await this.pickDocument();
if (!res) {
reg.logger().info('Did not get any file (user cancel?)');
showImagePicker(options) {
return new Promise((resolve, reject) => {
ImagePicker.showImagePicker(options, (response) => {
resolve(response);
});
});
}
async resizeImage(localFilePath, targetPath, mimeType) {
const maxSize = Resource.IMAGE_MAX_DIMENSION;
let dimensions = await this.imageDimensions(localFilePath);
reg.logger().info('Original dimensions ', dimensions);
if (dimensions.width > maxSize || dimensions.height > maxSize) {
dimensions.width = maxSize;
dimensions.height = maxSize;
}
reg.logger().info('New dimensions ', dimensions);
const format = mimeType == 'image/png' ? 'PNG' : 'JPEG';
reg.logger().info('Resizing image ' + localFilePath);
const resizedImage = await ImageResizer.createResizedImage(localFilePath, dimensions.width, dimensions.height, format, 85);
const resizedImagePath = resizedImage.uri;
reg.logger().info('Resized image ', resizedImagePath);
RNFetchBlob.fs.cp(resizedImagePath, targetPath); // mv doesn't work ("source path does not exist") so need to do cp and unlink
try {
RNFetchBlob.fs.unlink(resizedImagePath);
} catch (error) {
reg.logger().info('Error when unlinking cached file: ', error);
}
}
async attachFile(pickerResponse, fileType) {
if (!pickerResponse) {
reg.logger().warn('Got no response from picker');
return;
}
const localFilePath = res.uri;
if (pickerResponse.error) {
reg.logger().warn('Got error from picker', pickerResponse.error);
return;
}
if (pickerResponse.didCancel) {
reg.logger().info('User cancelled picker');
return;
}
const localFilePath = pickerResponse.uri;
reg.logger().info('Got file: ' + localFilePath);
reg.logger().info('Got type: ' + res.type);
// res.uri,
// res.type, // mime type
// res.fileName,
// res.fileSize
reg.logger().info('Got type: ' + pickerResponse.type);
let resource = Resource.new();
resource.id = uuid.create();
resource.mime = res.type;
resource.title = res.fileName ? res.fileName : _('Untitled');
resource.mime = pickerResponse.type;
resource.title = pickerResponse.fileName ? pickerResponse.fileName : _('Untitled');
let targetPath = Resource.fullPath(resource);
if (res.type == 'image/jpeg' || res.type == 'image/jpg' || res.type == 'image/png') {
const maxSize = Resource.IMAGE_MAX_DIMENSION;
let dimensions = await this.imageDimensions(localFilePath);
reg.logger().info('Original dimensions ', dimensions);
if (dimensions.width > maxSize || dimensions.height > maxSize) {
dimensions.width = maxSize;
dimensions.height = maxSize;
}
reg.logger().info('New dimensions ', dimensions);
const format = res.type == 'image/png' ? 'PNG' : 'JPEG';
reg.logger().info('Resizing image ' + localFilePath);
const resizedImage = await ImageResizer.createResizedImage(localFilePath, dimensions.width, dimensions.height, format, 85);
const resizedImagePath = resizedImage.uri;
reg.logger().info('Resized image ', resizedImagePath);
RNFetchBlob.fs.cp(resizedImagePath, targetPath); // mv doesn't work ("source path does not exist") so need to do cp and unlink
try {
RNFetchBlob.fs.unlink(resizedImagePath);
} catch (error) {
reg.logger().info('Error when unlinking cached file: ', error);
}
if (pickerResponse.type == 'image/jpeg' || pickerResponse.type == 'image/jpg' || pickerResponse.type == 'image/png') {
await this.resizeImage(localFilePath, targetPath, pickerResponse.mime);
} else {
RNFetchBlob.fs.cp(localFilePath, targetPath);
if (fileType === 'image') {
dialogs.error(this, _('Unsupported image type: %s', pickerResponse.type));
return;
} else {
RNFetchBlob.fs.cp(localFilePath, targetPath);
}
}
await Resource.save(resource, { isNew: true });
@ -268,6 +290,19 @@ class NoteScreenComponent extends BaseScreenComponent {
this.setState({ note: newNote });
}
async attachImage_onPress() {
const options = {
mediaType: 'photo',
};
const response = await this.showImagePicker(options);
await this.attachFile(response, 'image');
}
async attachFile_onPress() {
const response = await this.pickDocument();
await this.attachFile(response, 'all');
}
toggleIsTodo_onPress() {
shared.toggleIsTodo_onPress(this);
}
@ -294,7 +329,8 @@ class NoteScreenComponent extends BaseScreenComponent {
let output = [];
output.push({ title: _('Attach file'), onPress: () => { this.attachFile_onPress(); } });
output.push({ title: _('Attach image'), onPress: () => { this.attachImage_onPress(); } });
output.push({ title: _('Attach any other file'), onPress: () => { this.attachFile_onPress(); } });
output.push({ title: _('Delete note'), onPress: () => { this.deleteNote_onPress(); } });
// if (isTodo) {

View File

@ -4645,6 +4645,11 @@
"utf8": "2.1.2"
}
},
"react-native-image-picker": {
"version": "0.26.7",
"resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-0.26.7.tgz",
"integrity": "sha1-rS7pV/f2zAE5aJPqA9hMsq2y43Y="
},
"react-native-image-resizer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-image-resizer/-/react-native-image-resizer-1.0.0.tgz",

View File

@ -24,6 +24,7 @@
"react-native-document-picker": "^2.1.0",
"react-native-fetch-blob": "^0.10.6",
"react-native-fs": "^2.8.1",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-material-dropdown": "^0.5.2",
"react-native-popup-dialog": "^0.9.35",