How to Create A Gutenberg File Upload Custom Block

  • Resolved starapple

    (@starapple)


    1 year, 7 months ago

    Greetings,

    I wish to add a custom file upload block to a form in the Gutenberg editor. I found the snippet below in the WP documentation for adding a file tag but I am not sure how to implement it via a custom block plugin.

    import { FormFileUpload } from '@wordpress/components';

    const MyFormFileUpload = () => (
    <FormFileUpload accept="image/*"
    onChange={ ( event ) => console.log( event.currentTarget.files ) } >
    Upload
    </FormFileUpload>
    );

    How do I include the snippet in a JavaScript function so that I may enqueue it in a PHP file?

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter starapple

    (@starapple)

    1 year, 7 months ago

    @iu34 thanks for your reply. I seem to be missing something. The original snippet I posted has this"const MyFormFileUpload” that wraps around the FormFileUpload tag. What is the constant’s role in the script? Is it needed in the example you gave?

    Do I insert your code in the opening FormFieldUpload tag?

    This is what I have tried but get a WordPress error:

    import { registerBlockType } from '@wordpress/blocks';
    import { FormFileUpload } from '@wordpress/components';
    registerBlockType('custom/file-upload', {
    <FormFileUpload accept="image/*"
    title: 'file Upload',
    icon: 'upload',
    category: 'common',
    edit: () => (
    console.log(event.currentTarget.files)} > Upload
    ),
    save: () => null, // Save function returns null for dynamic blocks
    </FormFileUpload>
    });

    Thanks.

    Thread Starter starapple

    (@starapple)

    1 year, 7 months ago

    I have moved on to creating a form block and will create a new post with questions about the work so far.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to Create A Gutenberg File Upload Custom Block’ is closed to new replies.