How to use the @wordpress/blob.createBlobURL function in @wordpress/blob

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 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 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,
					} );
				},
			},
github WordPress / gutenberg / packages / block-library / src / audio / transforms.js View on Github external
transform( files ) {
				const file = files[ 0 ];
				// We don't need to upload the media directly here
				// It's already done as part of the `componentDidMount`
				// in the audio block
				const block = createBlock( 'core/audio', {
					src: createBlobURL( file ),
				} );

				return block;
			},
		},
github WordPress / gutenberg / packages / blocks / src / api / raw-handling / image-corrector.js View on Github external
decoded = atob( data );
		} catch ( e ) {
			node.src = '';
			return;
		}

		const uint8Array = new Uint8Array( decoded.length );

		for ( let i = 0; i &lt; uint8Array.length; i++ ) {
			uint8Array[ i ] = decoded.charCodeAt( i );
		}

		const name = type.replace( '/', '.' );
		const file = new File( [ uint8Array ], name, { type } );

		node.src = createBlobURL( file );
	}

	// Remove trackers and hardly visible images.
	if ( node.height === 1 || node.width === 1 ) {
		node.parentNode.removeChild( node );
	}
}
github Automattic / vip-go-mu-plugins-built / jetpack / extensions / blocks / videopress / editor.js View on Github external
files.forEach( file => {
								const block = createBlock( 'core/video', {
									src: createBlobURL( file ),
								} );
								mediaUpload( {
									filesList: [ file ],
									onFileChange: ( [ { id, url } ] ) => {
										onChange( block.clientId, { id, src: url } );
									},
									allowedTypes: [ 'video' ],
								} );
								blocks.push( block );
							} );
							return blocks;
github WordPress / gutenberg / packages / block-library / src / gallery / transforms.js View on Github external
images: files.map( ( file ) => pickRelevantMediaFiles( {
						url: createBlobURL( file ),
					} ) ),
				} );

@wordpress/blob

Blob utilities for WordPress.

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

Package Health Score

95 / 100
Full package analysis