Rnmobile/upload media file #13128

marecar3 · 2018-12-28T14:27:36Z

Description

This is the supporting PR for upload image file from react native Gutenberg editor

How has this been tested?

This PR can be tested from WPAndroid PR

Screenshots

Add upload media file callback Show spinner and opacity when image is uploading

mzorz

Again nice job @marecar3 , left some comments!

mzorz · 2019-01-04T15:39:01Z

packages/block-library/src/image/edit.native.js

+							style={ { textAlign: 'center' } }
+							underlineColorAndroid="transparent"
+							value={ caption }
+							placeholder={ 'Write caption…' }


This could be passed through i18n, like _( 'Write caption...' )

Thanks @mzorz ! Fixed and pushed.

mzorz · 2019-01-04T15:40:00Z

packages/block-library/src/image/edit.native.js

+					{ toolbarEditButton }
+				</BlockControls>
+				<Image
+					style={ { width: '100%', height: 200, opacity: opacity } }


I can see this value was there before this change, but wondering why height: 200, is there anything specific to that value?

Maybe we can ask @etoledom about this one, as this change was made a long time ago?

I saw that this was changed with this PR #13096
so @etoledom , you can ignore above question :) Thanks.

mzorz · 2019-01-04T15:41:45Z

packages/block-library/src/image/edit.native.js

+		const toolbarEditButton = (
+			<Toolbar>
+				<ToolbarButton
+					className="components-toolbar__control"


is there a reason for having a double underscore "__" in this name? should it be a normal dash?

It is part of the CSS coding standards for Gutenberg. I would ask if we actually need the className in the native implementation

Yeah, thanks @koke. We don't need that one, I removed it.

It is part of the CSS coding standards for Gutenberg.

TIL - thanks @koke

packages/block-library/src/image/edit.native.js

mzorz · 2019-01-04T17:37:18Z

packages/block-library/src/image/edit.native.js

+		);
+
+		const http = 'http';
+		const showSpinner = url !== undefined ? ! url.includes( http ) : false;


can we perhaps extend this logic to a more generic Utils class or if not, at least method on its own? I'm thinking something more explicit like isRemoteUrl() that hides the logic inside to determine whether an URI is a remote resource or not, etc. Such const http constant should belong within the scope of such function only, etc.

See for reference https://github.com/wordpress-mobile/WordPress-Android/pull/8879/files#diff-02f567e707c1df878dfea548cfec3da7R453, this:

URLUtil.isNetworkUrl(mediaUrl)

as in Android's utils https://developer.android.com/reference/android/webkit/URLUtil#isNetworkUrl(java.lang.String)

You can import { isURL } from '@wordpress/url' 😉

https://github.com/WordPress/gutenberg/blob/master/packages/url/README.md

Thanks @mzorz , @koke . I have updated the code to use isURL method like @koke suggested.

etoledom

Hey @marecar3 ! Thank you for your great work!

I like the idea of leaving all the networking to the parents app, while we use Gutenberg to show the upload state to the user. 👌

I tried a fast implementation on the iOS side of media upload to see if we could have any compatibility issue. Sadly I did found a complication that didn't let me finish it. I explained that on a code comment.

Apart of that it looks good! I also added a small clean up comment but I don't think that is a blocking thing.

One more comment: I was working on another PR (#13096) that modifies the image/edit.native.js file quite a lot too. I think that we will have a big merge conflict there. Let's chat to see what we can do about it. 😛

etoledom · 2019-01-07T07:44:12Z

packages/block-library/src/image/edit.native.js

+	}
+
+	addMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.addListener( 'mediaUpload' + mediaId, this.mediaUpload );


I believe we will have a problem here with iOS. As you can see here, on iOS we need to know ahead of time what events do we support by overriding - (NSArray<NSString *> *)supportedEvents and returning an array with the event names.

Because of that, we can not have dynamic events names like appending the media id to it.

Do you think it would be possible to send the media id as a parameter instead?

Do you think it would be possible to send the media id as a parameter instead?

Good call there 👍

Hey @etoledom, thanks for the update. I wasn't aware of this one as this approach was working in some lower version. I will fix this. Thanks for letting me know.

cc: @SergioEstevao

etoledom · 2019-01-07T07:53:17Z

packages/block-library/src/image/edit.native.js

+	}
+
+	removeMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.removeListener( 'mediaUpload' + mediaId, this.mediaUpload );


I think it would be good to hide the implementation of adding/removing listeners inside the react-native-gutenberg-bridge module. Something similar to what we already have in here.

If we can also hide the RNReactNativeGutenbergBridge.onMediaLibraryPress it would be great too. Even though we didn't do it before, probably is good to have all the available communication methods in one place.

Hey @etoledom, thanks for the comments. I have changed the code as we discussed.

marecar3 · 2019-01-14T09:39:52Z

Hey @mzorz @etoledom @koke, thanks for the feedback.
I would need a few more hours to hopefully finish hack week after which I will respond to your comments. Thanks again!

Updated

Removed className from ToolbarButton

# Conflicts: # packages/block-library/src/image/edit.native.js

etoledom · 2019-01-18T11:56:58Z

I manage to merge changes from this PR #13096 into my PR and it seems that it's working. Please, take a look at merge result if I have done it in a good way

Looking good! Thank you for that. ✨

* Add serverID to finish media upload with success event. * Refactor code to have early exit. * Support setting id when selecting from media library.

…rnmobile/372-add-title-to-gutenberg-mobile * 'master' of https://github.com/WordPress/gutenberg: (56 commits) Save package-lock.json file changes (#13481) Plugin: Deprecate gutenberg_add_responsive_body_class (#13461) Add speak messages to the feature toggle component. (#13385) Plugin: Deprecate gutenberg_kses_allowedtags (#13460) Plugin: Deprecate gutenberg_bulk_post_updated_messages (#13472) Plugin: Avoid calling deprecated gutenberg_silence_rest_errors (#13446) Plugin: Deprecate gutenberg_remove_wpcom_markdown_support (#13473) Fix: Categories block: add custom classes only to wrapper (#13439) is-shallow-equal: Use ES5 ruleset from eslint-plugin module (#13428) Update and Organize Contributors Guide per #12916 (#13352) Dismissible-notices: fix text overlapping icon (X) (#13371) Framework: Remove 5.0-merged REST API integrations (#13408) Plugin: Remove 5.0-merged block registration functions, integrations (#13412) Framework: Bump minimum required WP to 5.x (#13370) [Mobile] Improve keyboard hide button (#13415) Improve castError handling of non strings (#13315) Fix: File block add custom class (#13432) Consider making Fullscreen Mode effects visible only on larger screens (#13425) Update plugin version to 4.9.0 (#13436) DateTimePicker: fix prop warning for (#12933) ...

…le/upload_media_file

*Upload captured photo

SergioEstevao

Looking good!

mzorz

LGTM!

mzorz · 2019-01-25T23:48:52Z

note: I've added small changes in #13516 that would be great to merge into this one first @marecar3 🙇 (thanks!)

Upload media file

mzorz and others added 5 commits December 20, 2018 10:41

temporarily disable link formatting

49bb394

Make sure RichText resigns focus when unmounted (#13048)

96a73c5

Implemented react native spinner

93057b2

Add upload button in media placeholder

0a0764e

Transform ImageEdit from function to class

1876d22

Add upload media file callback Show spinner and opacity when image is uploading

marecar3 mentioned this pull request Dec 28, 2018

Gb/upload media file wordpress-mobile/WordPress-Android#8879

Merged

Fixed lint issues

8a363f9

marecar3 requested review from Tug, koke and etoledom December 28, 2018 15:16

marecar3 self-assigned this Dec 28, 2018

marecar3 added 3 commits December 28, 2018 16:36

Fixed lint errors

db23d43

Put some space between components in media-placeholder

ff11770

Rename state constants to match style convention

704b755

mzorz mentioned this pull request Dec 28, 2018

[WPAndroid] Wire up media handling with GutenbergEditorFragment and GutenbergEditPostActivity wordpress-mobile/gutenberg-mobile#459

Closed

2 tasks

Implements a native version of post-title.

e2b08e1

mzorz reviewed Jan 4, 2019

View reviewed changes

diegoreymendez added 2 commits January 4, 2019 18:59

Merge branch 'master' into mobileissue/372-add-title-to-gutenberg-mobile

40b7c9c

Removes some unnecessary log calls.

d5910a8

etoledom reviewed Jan 7, 2019

View reviewed changes

diegoreymendez added 3 commits January 10, 2019 16:54

Merge branch 'master' into rnmobile/372-add-title-to-gutenberg-mobile

08108a0

Submits a few lint fixes.

047f1d8

Fixes a linting issue.

4f55ba9

pinarol mentioned this pull request Jan 15, 2019

iOS - Add ability to scroll to caret when typing goes under the keyboard wordpress-mobile/gutenberg-mobile#474

Merged

marecar3 added 5 commits January 16, 2019 12:20

Merge branch 'master' into rnmobile/upload_media_file

7b823ec

Rename callback methods to follow naming convention

e5d8d3f

Updated

Updated spinner to match the specs

2668862

Moved placeholder string to localization format

408cb1e

Removed className from ToolbarButton

Merge branch 'master' into rnmobile/upload_media_file

50c9a12

# Conflicts: # packages/block-library/src/image/edit.native.js

Fixed lint tests

5814a4c

marecar3 and others added 12 commits January 18, 2019 13:01

Merge branch 'master' into rnmobile/upload_media_file

e0d5d9b

Start listen for progress media upload if it's didn't finish

a5a200b

Merge branch 'master' into rnmobile/upload_media_file

c9d7b9f

Merge branch 'master' into rnmobile/upload_media_file

9ea8f39

Merge branch 'master' into rnmobile/upload_media_file

b822344

Merge branch 'master' into rnmobile/upload_media_file

e4bf38e

RN Mobile - Upload media file ios (#13421)

6129033

* Add serverID to finish media upload with success event. * Refactor code to have early exit. * Support setting id when selecting from media library.

Merge branch 'rnmobile/372-add-title-to-gutenberg-mobile' into rnmobi…

74aeb23

…le/upload_media_file

Merge branch 'master' into rnmobile/upload_media_file

345d356

Fix lint errors.

9fecd69

Rnmobile/upload captured photo (#13450)

028ab55

*Upload captured photo

SergioEstevao approved these changes Jan 25, 2019

View reviewed changes

youknowriad added this to the 5.0 (Gutenberg) milestone Jan 25, 2019

marecar3 mentioned this pull request Jan 25, 2019

Gb/feature upload media file wordpress-mobile/WordPress-Android#9120

Merged

1 task

mzorz approved these changes Jan 25, 2019

View reviewed changes

mzorz mentioned this pull request Jan 25, 2019

Introduce onImageQueryReattach interface #13516

Merged

mzorz and others added 2 commits January 28, 2019 08:25

using onImageQueryReattach (#13516)

93e6e95

Merge branch 'master' into rnmobile/upload_media_file

2fc48c9

marecar3 merged commit 2ca9e14 into master Jan 28, 2019

marecar3 deleted the rnmobile/upload_media_file branch January 28, 2019 14:18

This was referenced Feb 4, 2019

Bump plugin version to 5.0.0-rc.1 #13652

Merged

Bump plugin version to 5.0.0 #13689

Closed

Bump plugin version to 5.0.0 #13692

Merged

youknowriad pushed a commit that referenced this pull request Mar 6, 2019

Rnmobile/upload media file (#13128)

c2dd3a9

Upload media file

youknowriad pushed a commit that referenced this pull request Mar 6, 2019

Rnmobile/upload media file (#13128)

5673438

Upload media file

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rnmobile/upload media file #13128

Rnmobile/upload media file #13128

marecar3 commented Dec 28, 2018

mzorz left a comment

mzorz Jan 4, 2019

marecar3 Jan 16, 2019

mzorz Jan 4, 2019

marecar3 Jan 16, 2019

marecar3 Jan 16, 2019

mzorz Jan 4, 2019

koke Jan 14, 2019

marecar3 Jan 16, 2019

mzorz Jan 21, 2019

mzorz Jan 4, 2019

mzorz Jan 4, 2019

koke Jan 14, 2019

marecar3 Jan 16, 2019

etoledom left a comment •

edited

Loading

etoledom Jan 7, 2019

mzorz Jan 7, 2019

marecar3 Jan 16, 2019

etoledom Jan 7, 2019

marecar3 Jan 17, 2019

marecar3 commented Jan 14, 2019

etoledom commented Jan 18, 2019

SergioEstevao left a comment

mzorz left a comment

mzorz commented Jan 25, 2019 •

edited

Loading

Rnmobile/upload media file #13128

Rnmobile/upload media file #13128

Conversation

marecar3 commented Dec 28, 2018

Description

How has this been tested?

Screenshots

mzorz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etoledom left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marecar3 commented Jan 14, 2019

etoledom commented Jan 18, 2019

SergioEstevao left a comment

Choose a reason for hiding this comment

mzorz left a comment

Choose a reason for hiding this comment

mzorz commented Jan 25, 2019 • edited Loading

etoledom left a comment •

edited

Loading

mzorz commented Jan 25, 2019 •

edited

Loading