Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create file blocks when dropping multiple files at once #11297

Merged
merged 4 commits into from
Nov 1, 2018
Merged

Create file blocks when dropping multiple files at once #11297

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e150eda
Create file blocks when dropping multiple files at once
ocean90 Oct 31, 2018
a09ff91
Remove the check for file types as it has a higher priority
ocean90 Oct 31, 2018
622b358
Merge branch 'master' into fix/drop-file-blocks
ocean90 Nov 1, 2018
edadef0
Add changelog entry
ocean90 Nov 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions packages/block-library/src/file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,20 +77,27 @@ export const settings = {
from: [
{
type: 'files',
isMatch: ( files ) => files.length === 1,
isMatch( files ) {
return files.length > 0;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isMatch is required per

gutenberg/packages/editor/src/components/block-drop-zone/index.js

Line 62 in fe51bd0

( transform ) => transform.type === 'files' && transform.isMatch( files )
so this is just a simple sanity check.

},
// We define a lower priorty (higher number) than the default of 10. This
// ensures that the File block is only created as a fallback.
priority: 15,
transform: ( files ) => {
const file = files[ 0 ];
const blobURL = createBlobURL( file );
const blocks = [];

// File will be uploaded in componentDidMount()
return createBlock( 'core/file', {
href: blobURL,
fileName: file.name,
textLinkHref: blobURL,
files.map( ( file ) => {
const blobURL = createBlobURL( file );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of scope of this PR but I thought I'd mention for context. Ideally, we shouldn't rely on the edit function to properly upload the file and use the final URL. Instead we should avoid storing temporary attributes in blocks.

That said, we don't have a proper solution for this problem at the moment, we'll more likely need to think about a "reactive" transform API but this is not high-priority.


// File will be uploaded in componentDidMount()
blocks.push( createBlock( 'core/file', {
href: blobURL,
fileName: file.name,
textLinkHref: blobURL,
} ) );
} );

return blocks;
},
},
{
Expand Down