How to use @wordpress/blob - 10 common examples

To help you get started, we’ve selected a few @wordpress/blob examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github front / gutenberg-js / src / js / gutenberg-overrides / packages / editor / build-module / components / rich-text / index.js View on Github external
event.dataTransfer ||
			this.editor.getDoc().dataTransfer ||
			// Removes the need for further `dataTransfer` checks.
			{ getData: () => '' };

    const { items = [], files = [], types = [] } = dataTransfer;
    const item = find([ ...items, ...files ], ({ type }) => /^image\/(?:jpe?g|png|gif)$/.test(type));
    const plainText = dataTransfer.getData('text/plain');
    const HTML = dataTransfer.getData('text/html');

    // Only process file if no HTML is present.
    // Note: a pasted file may have the URL as plain text.
    if (item && ! HTML) {
      const file = item.getAsFile ? item.getAsFile() : item;
      const content = rawHandler({
        HTML: `<img src="${createBlobURL(file)}">`,
        mode: 'BLOCKS',
        tagName: this.props.tagName,
      });
      const shouldReplace = this.props.onReplace &amp;&amp; this.isEmpty();

      // Allows us to ask for this information when we get a report.
      window.console.log('Received item:\n\n', file);

      if (shouldReplace) {
        // Necessary to allow the paste bin to be removed without errors.
        this.props.setTimeout(() =&gt; this.props.onReplace(content));
      }
      else if (this.props.onSplit) {
        // Necessary to get the right range.
        // Also done in the TinyMCE paste plugin.
        this.props.setTimeout(() =&gt; this.splitContent(content));
github WordPress / gutenberg / editor / components / rich-text / index.js View on Github external
event.dataTransfer ||
			this.editor.getDoc().dataTransfer ||
			// Removes the need for further `dataTransfer` checks.
			{ getData: () =&gt; '' };

		const { items = [], files = [], types = [] } = dataTransfer;
		const item = find( [ ...items, ...files ], ( { type } ) =&gt; /^image\/(?:jpe?g|png|gif)$/.test( type ) );
		const plainText = dataTransfer.getData( 'text/plain' );
		const HTML = dataTransfer.getData( 'text/html' );

		// Only process file if no HTML is present.
		// Note: a pasted file may have the URL as plain text.
		if ( item &amp;&amp; ! HTML ) {
			const file = item.getAsFile ? item.getAsFile() : item;
			const content = rawHandler( {
				HTML: `<img src="${ createBlobURL( file ) }">`,
				mode: 'BLOCKS',
				tagName: this.props.tagName,
			} );
			const shouldReplace = this.props.onReplace &amp;&amp; this.isEmpty();

			// Allows us to ask for this information when we get a report.
			window.console.log( 'Received item:\n\n', file );

			if ( shouldReplace ) {
				// Necessary to allow the paste bin to be removed without errors.
				this.props.setTimeout( () =&gt; this.props.onReplace( content ) );
			} else if ( this.props.onSplit ) {
				// Necessary to get the right range.
				// Also done in the TinyMCE paste plugin.
				this.props.setTimeout( () =&gt; this.splitContent( content ) );
			}
github WordPress / gutenberg / editor / components / rich-text / index.js View on Github external
event.dataTransfer ||
			this.editor.getDoc().dataTransfer ||
			// Removes the need for further `dataTransfer` checks.
			{ getData: () =&gt; '' };

		const { items = [], files = [], types = [] } = dataTransfer;
		const item = find( [ ...items, ...files ], ( { type } ) =&gt; /^image\/(?:jpe?g|png|gif)$/.test( type ) );
		const plainText = dataTransfer.getData( 'text/plain' );
		const HTML = dataTransfer.getData( 'text/html' );

		// Only process file if no HTML is present.
		// Note: a pasted file may have the URL as plain text.
		if ( item &amp;&amp; ! HTML ) {
			const file = item.getAsFile ? item.getAsFile() : item;
			const content = rawHandler( {
				HTML: `<img src="${ createBlobURL( file ) }">`,
				mode: 'BLOCKS',
				tagName: this.props.tagName,
			} );
			const shouldReplace = this.props.onReplace &amp;&amp; this.isEmpty();

			// Allows us to ask for this information when we get a report.
			window.console.log( 'Received item:\n\n', file );

			if ( shouldReplace ) {
				// Necessary to allow the paste bin to be removed without errors.
				this.props.setTimeout( () =&gt; this.props.onReplace( content ) );
			} else if ( this.props.onSplit ) {
				// Necessary to get the right range.
				// Also done in the TinyMCE paste plugin.
				this.props.setTimeout( () =&gt; this.splitContent( content ) );
			}
github Automattic / jetpack / extensions / blocks / tiled-gallery / deprecated / v1 / layout / index.js View on Github external
photonize( { height, width, url } ) {
		if ( ! url ) {
			return;
		}

		// Do not Photonize images that are still uploading or from localhost
		if ( isBlobURL( url ) || /^https?:\/\/localhost/.test( url ) ) {
			return url;
		}

		// Drop query args, photon URLs can't handle them
		// This should be the "raw" url, we'll add dimensions later
		const cleanUrl = url.split( '?', 1 )[ 0 ];

		const photonImplementation = isWpcomFilesUrl( url ) ? photonWpcomImage : photon;

		const { layoutStyle } = this.props;

		if ( isSquareishLayout( layoutStyle ) && width && height ) {
			const size = Math.min( PHOTON_MAX_RESIZE, width, height );
			return photonImplementation( cleanUrl, { resize: `${ size },${ size }` } );
		}
		return photonImplementation( cleanUrl );
github WordPress / gutenberg / packages / media-utils / src / utils / upload-media.js View on Github external
// Don't allow empty files to be uploaded.
		if ( mediaFile.size &lt;= 0 ) {
			triggerError( {
				code: 'EMPTY_FILE',
				message: __( 'This file is empty.' ),
				file: mediaFile,
			} );
			continue;
		}

		validFiles.push( mediaFile );

		// Set temporary URL to create placeholder media file, this is replaced
		// with final file from media gallery when upload is `done` below
		filesSet.push( { url: createBlobURL( mediaFile ) } );
		onFileChange( filesSet );
	}

	for ( let idx = 0; idx &lt; validFiles.length; ++idx ) {
		const mediaFile = validFiles[ idx ];
		try {
			const savedMedia = await createMediaFromFile( mediaFile, additionalData );
			const mediaObject = {
				...omit( savedMedia, [ 'alt_text', 'source_url' ] ),
				alt: savedMedia.alt_text,
				caption: get( savedMedia, [ 'caption', 'raw' ], '' ),
				title: savedMedia.title.raw,
				url: savedMedia.source_url,
			};
			setAndUpdateFiles( idx, mediaObject );
		} catch ( error ) {
github Automattic / wp-calypso / client / gutenberg / extensions / tiled-gallery / gallery-image / edit.js View on Github external
<img tabindex="0" src="{" width="" data-width="{" data-url="{" data-link="{" id="" data-id="{" height="" data-height="{" aria-label="{" alt="{">
				{ isBlobURL( origUrl ) &amp;&amp;  }
			
			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
		);

		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
		return (
			<figure>
				{ isSelected &amp;&amp; (
					<div>
						</div></figure>
github Automattic / wp-calypso / packages / jetpack-blocks / src / blocks / tiled-gallery / gallery-image / save.js View on Github external
export default function GalleryImageSave( props ) {
	const {
		alt,
		// caption,
		imageFilter,
		height,
		id,
		link,
		linkTo,
		origUrl,
		url,
		width,
	} = props;

	if ( isBlobURL( origUrl ) ) {
		return null;
	}

	let href;

	switch ( linkTo ) {
		case 'media':
			href = url;
			break;
		case 'attachment':
			href = link;
			break;
	}

	const img = (
github WordPress / gutenberg / packages / block-library / src / image / edit.js View on Github external
defaultedAlt = __( 'This image has an empty alt attribute' );
							}

							const img = (
								// Disable reason: Image itself is not meant to be interactive, but
								// should direct focus to block.
								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
								&lt;&gt;
									<img alt="{" src="{"> this.onImageError( url ) }
									/&gt;
									{ isBlobURL( url ) &amp;&amp;  }
								
								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
							);

							if ( ! isResizable || ! imageWidthWithinContainer ) {
								return (
									&lt;&gt;
										{ getInspectorControls( imageWidth, imageHeight ) }
										<div height="" style="{">
											{ img }
										</div>
									
								);
							}

							const currentWidth = width || imageWidthWithinContainer;
github WordPress / gutenberg / packages / block-library / src / file / transforms.js View on Github external
files.forEach( ( file ) => {
					const blobURL = createBlobURL( file );

					// File will be uploaded in componentDidMount()
					blocks.push( createBlock( 'core/file', {
						href: blobURL,
						fileName: file.name,
						textLinkHref: blobURL,
					} ) );
				} );
github WordPress / gutenberg / core-blocks / file / index.js View on Github external
transform: ( files ) => {
					const file = files[ 0 ];
					const blobURL = createBlobURL( file );

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

@wordpress/blob

Blob utilities for WordPress.

GPL-2.0-or-later
Latest version published 8 days ago

Package Health Score

95 / 100
Full package analysis