Web-stories-wp: Media Upload Button

[jauyong]

Feature description

Not complex, but essential to get right from day one. For videos, we even want the ability to re-encode videos with external plugins if available.

Must be abstracted in order to allow easier porting to other platforms.

The old editor has a pretty confined code snippet, that can be reused.

Epic: Media upload and management

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

• When a user clicks on the Upload button, a WordPress media manager dialog should appear.
• This should show the upload tab by default.
• Where possible uploads / results should be filtered to only show support file formats.

Implementation brief

Implement the WP media manager backbone library, using media-utils

PoC.

A new source taxonomy will be added to attachment post type and a term of stories will be added to every attachment that is uploaded. This term will be used to easily filter media later.

QA testing instructions

Demo

Changelog entry

[spacedmonkey]

When trying to write up this ticket, I found it hard without explaining the background first. So I decided to write the background up a google doc. Please read this first, before continuing to read this comment.

In short I believe we should have 3 options.

1. Implement a simple file uploader that uses the REST API.

Pros

• Simple to implement as it uses media-utils
• High level of control.
• Permission controls

Cons

• No drag and drop
• No meta data editor screen
• No third party integrations.
• Not portable outside of WP

2. Use WP media manager.

Pro

• Simple to implement as it uses media-utils
• Permission controls
• Third party integrations.
• Meta data editor screen
• Drag and drop

Con

• Lack of control, on which tab is displayed first.
• Not portable outside of WP

3. Custom solution. Use existing component and build custom media uploader.

Pros

• High level of control.
• Permission controls
• Third party integrations.
• Meta data editor screen
• Drag and drop
• Portable outside of WP

Cons

• Completely custom solution requires maintenance
• No permission controls
• No third party integrations.

I would recommend option 2, as it stays in the WordPress interface. It also makes media uploading a core problem. Media uploader, can be hard and errorful on shared hosting.

[spacedmonkey]

Tagging @pbakaus for feedback.

[pbakaus]

@spacedmonkey yes, let's go with option 2 for the upload button. But independent of that, we do need to support drag & drop onto the main Canvas area, as well as the general media gallery area. I'm presuming that will have to use a variation of 1?

[spacedmonkey]

Tagging @pbakaus @miina @barklund for review.

I have broken the drag and drop media upload functionality into an ticket, as it is a different piece of work.

[pbakaus]

LGTM.

[spacedmonkey]

As the work is basically done in ampproject/amp-wp#3843 I have made the estimation for everyone. I am moving this ticket to code review.

[swissspidy]

If I am not mistaken this is still missing the hidden taxonomy part?

[spacedmonkey]

This functionality hasn’t been written yet. This is a more advanced feature that can wait.

One issue about the current implementation is that the backbone media dialog doesn’t have an easy to use / find callback when a media object is uploaded. This may result in us having to use the other media upload option listed above.

[pbakaus]

@spacedmonkey can we please look into making/proposing modifications in core for these. The callback and the "open media dialog and jump directly to this item" functionality seem crucial and hopefully not controversial.

Also, what should we do with this ticket? I'd rather not leave it hanging – if necessary, close this one and create a new dedicated one. Thanks!

[spacedmonkey]

Marking a image as selected will also be need for the featured image. I will update this ticket once that research as born out.

[spacedmonkey]

I have created a new ticket for the discovery ticket which is a placeholder for now. I am going to close this ticket out.