Meta tags:
description=Explore Data Views actions and what you can do with them, such as interacting with WordPress through the REST API or displaying modal windows.;

Headings (most frequently used words):

the, to, images, media, library, with, processes, and, actions, from, data, views, adding, action, of, upload, spinner, image, blob, reply, before, you, start, add, notification, boxes, outcome, indicate, uploading, in, progress, modal, window, full, implementation, output, wrapping, up, responses, have, an, idea, for, new, post, subscribe, blog, download, convert, it, create, formdata, send, request, wp, rest, api, keeping, track, using, state, variables, displaying, component, leave, cancel, learn, how, contribute, review, tips, guidelines,

Text of the page (most frequently used words):
the (301), image (63), and (53), you (52), this (44), wordpress (43), with (43), media (38), from (34), upload (34), data (32), can (32), for (31), #component (31), const (31), #window (29), action (29), item (29), that (28), new (27), images (26), actions (22), label (21), code (20), api (20), blob (20), original (19), add (19), request (19), views (18), size (18), see (17), app (17), your (16), post (16), library (16), import (16), url (16), rest (16), following (15), user (15), apifetch (15), true (15), callback (15), using (14), dataviews (14), modal (14), spinner (14), about (13), display (13), open (13), error (13), foreach (13), share (12), will (12), when (12), project (12), button (12), components (12), formdata (12), method (12), opens (11), notification (11), hstack (11), return (11), object (11), state (11), visit (10), our (10), use (10), react (10), article (10), each (10), fetch (10), isuploadingitems (10), create (10), slug (10), processes (10), time (9), progress (9), now (9), definition (9), urls (9), createnotice (9), title (9), send (9), account (8), some (8), boxes (8), text (8), noticeui (8), onsuccessmediaupload (8), onerrormediaupload (8), convert (8), await (8), items (8), variable (8), array (8), property (7), fields (7), are (7), view (7), available (7), uploaded (7), usestate (7), vstack (7), withnotices (7), noticeoperations (7), setisuploadingitems (7), console (7), download (7), formdatawithimage (7), closemodal (7), selected (7), function (7), users (7), org (6), plugins (6), email (6), how (6), these (6), adding (6), icon (6), displayed (6), selectcontrol (6), previsuploadingitems (6), filter (6), success (6), log (6), raw (6), body (6), one (6), above (6), start (6), developers (5), search (5), layout (5), plugin (5), developer (5), common (5), also (5), has (5), full (5), select (5), table (5), defaultlayouts (5), oimageuploaded (5), content (5), successfully (5), async (5), file (5), then (5), rendermodal (5), setsize (5), triggered (5), provide (5), uploading (5), specific (5), endpoint (5), format (5), next (4), previous (4), com (4), get (4), themes (4), subscribe (4), blog (4), have (4), reply (4), but (4), elements (4), click (4), could (4), created (4), admin (4), apis (4), feature (4), used (4), gutenberg (4), which (4), make (4), through (4), them (4), while (4), being (4), process (4), primary (4), should (4), enablesorting (4), _blank (4), topics (4), div (4), width (4), height (4), paginationinfo (4), slugloading (4), status (4), jpg (4), isdismissible (4), responserequestimage (4), blobimage (4), modalheader (4), justify (4), value (4), onclick (4), via (4), let (4), defined (4), call (4), functions (4), every (4), track (4), its (4), before (4), only (4), since (4), box (4), generate (4), directly (4), response (4), list (4), git (4), tumblr (3), linkedin (3), mastodon (3), bluesky (3), learn (3), everything (3), need (3), tips (3), guidelines (3), contribute (3), notify (3), comments (3), selection (3), options (3), behavior (3), more (3), 2024 (3), https (3), categories (3), props (3), feedback (3), would (3), into (3), updates (3), design (3), concepts (3), interact (3), wrapping (3), playground (3), github (3), windows (3), appear (3), complete (3), perform (3), element (3), dataphotos (3), primaryfield (3), img_src (3), render (3), alt_description (3), enableglobalsearch (3), author (3), getvalue (3), map (3), topic (3), setview (3), processeddata (3), rendered (3), isprimary (3), supportsbulk (3), path (3), want (3), left (3), point (3), like (3), uses (3), define (3), any (3), top (3), indicate (3), displaying (3), been (3), beginning (3), added (3), keeping (3), logic (3), methods (3), allows (3), photos (3), form (3), promise (3), steps (3), take (3), properties (3), setting (3), was (3), build (3), resources (3), blocks (3), youtube (2), swag (2), events (2), documentation (2), patterns (2), showcase (2), hosting (2), news (2), other (2), address (2), posts (2), name (2), website (2), browser (2), comment (2), required (2), not (2), published (2), after (2), working (2), sorting (2), field (2), header (2), dataview (2), work (2), what (2), approach (2), types (2), instructions (2), key (2), september (2), juanma (2), garrido (2), responses (2), advanced (2), whatsapp (2), telegram (2), reddit (2), mail (2), providing (2), core (2), interesting (2), something (2), able (2), repo (2), issues (2), check (2), getting (2), started (2), two (2), part (2), there (2), live (2), wptrainingteam (2), devblog (2), displays (2), choose (2), opened (2), multiple (2), all (2), filtersortandpaginate (2), gettopicselementsformat (2), usememo (2), __experimentaltext (2), __experimentalhstack (2), __experimentalvstack (2), mediafield (2), src (2), false (2), first_name (2), last_name (2), classname (2), span (2), parseint (2), type (2), occurred (2), append (2), spacing (2), __nexthasnomarginbottom (2), keys (2), small_s3 (2), onchange (2), right (2), __next40pxdefaultsize (2), variant (2), location (2), length (2), default (2), final (2), implementation (2), output (2), info (2), find (2), others (2), over (2), same (2), version (2), replace (2), set (2), provided (2), remember (2), improving (2), show (2), uploads (2), inside (2), operations (2), starts (2), include (2), variables (2), running (2), good (2), screen (2), operation (2), receive (2), failure (2), catch (2), handle (2), notice (2), additional (2), provides (2), notices (2), outcome (2), message (2), includes (2), requests (2), offers (2), several (2), such (2), automatically (2), including (2), ready (2), html (2), containing (2), transmitted (2), step (2), prepare (2), sent (2), binary (2), here (2), enable (2), multi (2), changes (2), npm (2), explained (2), throughout (2), interface (2), sort (2), pictures (2), dataset (2), site (2), snippets (2), close, trademark, intellectual, foundation, channel, tiktok, instagram, facebook, page, threads, formerly, twitter, buddypress, bbpress, matt, donate, involved, privacy, join, 916, subscribers, know, writing, review, knowledge, fellow, idea, follow, save, marked, leave, cancel, worked, fine, updating, stopped, entire, disappears, searching, reason, different, much, convenient, than, standard, section, thank, november, govard, hours, session, explaining, ideas, behind, www, watch, o1fic4n_hvw, extenders, tags, reviewing, milana_cap, oandregal, greenshady, bph, tool, possibilities, love, hear, found, ran, weren, please, thoughts, package, interested, biweekly, shared, tag, got, deeper, tasks, performed, covered, foundational, concludes, series, exploring, potential, powered, demo, allowing, shown, once, simultaneously, clicking, three, dot, reveals, mode, hovered, panel, third, party, service, subpage, under, settings, observe, utils, i18n, style, scss, source, grid, img, alt, thumb, target, href, rel, noreferrer, description, topic_photos, topic_photo_item, touppercase, filterby, operators, isany, isnone, isall, isnotall, perpage, translators, onchangeview, export, look, calls, sizes, photo, stored, development, examples, storybook, first, nicer, dropdown, between, mechanism, upon, ignored, they, finally, conditionally, still, statement, navigate, empty, remove, emptying, completely, occurs, pieces, adds, updated, keep, removed, needs, ensure, monitor, ongoing, holds, indicator, perfect, scrollto, scroll, ensuring, don, miss, notifications, parent, group, together, fragment, fails, prompted, went, wrong, receives, details, informing, returned, definitions, yet, chain, destructured, wherever, place, information, line, contains, among, managed, wrap, higher, order, store, system, however, isn, great, experience, individually, bulk, public, documented, installation, handbook, wrapper, around, advantages, making, completing, base, headers, nonce, represents, server, perspective, submit, creates, appending, encoded, multipart, http, way, successful, encapsulated, instance, asynchronous, returns, declare, avoid, chains, operator, network, large, native, reference, basically, preliminary, proper, consider, needed, given, receiving, enabled, become, alias, run, enables, passed, prop, current, links, corresponding, help, commits, clone, checkout, part1, starting, continuing, off, contents, video, showcasing, features, laying, groundwork, explores, interacting, creating, friendly, real, informed, executed, intermediate, dialogs, launch, further, tools, listed, leverage, datasets, custom, screens, learned, almost, month, discovered, were, nice, job, board, enterprise, five, future, openverse, forums, education,

Text of the page (random words):
on each one of the items selected check here the complete list of properties that can be used to define actions for the data views items now that the upload media action is created let s take some time to consider the steps needed to upload an image to the media library given a url download the image from the provided url and convert it to a blob create a formdata object with the image blob that can be sent as the body of the post request send a post request with apifetch to the proper endpoint of the wordpress rest api to add the image to the media library basically you ll need to make a post request to a specific rest api url including data with the image in binary format to do this some preliminary steps are required to prepare the data for the rest api request add these steps as comments of the foreach callback to have them as a reference as we add the logic for each step const actions id upload media callback images images foreach image 1 download the image and convert it to a blob 2 create formdata with the image blob 3 send the request to the wp rest api download the image and convert it to a blob the image url for each item is available at image urls raw so you could use the browser s native fetch method to download each image and convert the response to a blob to send an image in a post request you need to convert it into a format that can be transmitted over the network a common format for this is a binary large object blob add this code to the foreach s callback function images foreach async image 1 download the image and convert it to a blob const responserequestimage await fetch image urls raw const blobimage await responserequestimage blob since fetch is an asynchronous method that returns a promise you can declare the foreach callback as an async function this allows you to use the await operator and avoid promise chains to handle the promise responses the successful response from fetch is encapsulated in a response instance which includes a blob method this method allows you to directly generate a blob from the response create formdata with the image blob with the image in blob format the next step is to prepare the data to be sent in an http request to the rest api one way to send data in a post request is to use a formdata object as the request body methods like fetch or wordpress apifetch can use a formdata object as the body of request this data is encoded and transmitted with the content type set to multipart form data add this code to the foreach s callback function images foreach async image 2 create formdata with the image blob const formdatawithimage new formdata formdatawithimage append file blobimage image slug jpg the code above creates a new formdata object appending a file field containing the image in blob format a formdata object represents html form data from the server s perspective it would be as if you submit the data from an html form send the request to the wp rest api at this point everything is ready to do the rest api request with the apifetch method apifetch is a wrapper around window fetch that offers several advantages when making requests to the wp rest api such as automatically completing the base url for the rest api endpoint and including the nonce in the request headers go to the beginning of app js and import apifetch method from wordpress api fetch import apifetch from wordpress api fetch now add this code to the foreach s callback function images foreach async image 3 send the request to the wp rest api with apifetch await apifetch path wp v2 media method post body formdatawithimage then console log the code above uses apifetch to do a post request to the wp v2 media endpoint as documented in the rest api handbook you can create a media item in the wordpress installation via post requests to the wp v2 media endpoint public rest api has been part of the core since wp 4 7 your data views now includes a new feature that allows you to upload displayed photos directly to the media library you can upload images individually or select multiple images for bulk uploading however the feedback the user is getting about the upload process isn t great as it only provides a message in the console let s work on improving this user experience notification boxes with the outcome of the upload processes wordpress provides a notification system that can be managed via the notices store a good approach to interact with the notices ui is to wrap your react component with the withnotices higher order component by wrapping your app component with withnotices your component will receive the additional props noticeoperations and noticeui noticeoperations is an object that contains the createnotice method among others which you can use to generate a specific notification box noticeui is the notice react component that will be displayed when a notification box is created go to the beginning of app js and import withnotices method from wordpress components import withnotices from wordpress components go to the line that starts the definition of your app component and replace it with the following code const app withnotices noticeoperations noticeui const createnotice noticeoperations you can use the createnotice method destructured from noticeoperations to create notification boxes that will appear wherever you place the noticeui component on your react app s screen these notification boxes can be used to provide information to the user about the success or failure of images uploaded to the media library chain the following then and catch methods to the apifetch call to handle the success or error of the api request using the yet to be defined onsuccessmediaupload and onerrormediaupload functions 3 send the request to the wp rest api with apifetch await apifetch path wp v2 media method post body formdatawithimage then onsuccessmediaupload catch onerrormediaupload now add the following code to the app component and before the call of these functions with the onsuccessmediaupload and onerrormediaupload functions definitions const onsuccessmediaupload oimageuploaded const title oimageuploaded title rendered createnotice status success content __ title jpg successfully uploaded to media library isdismissible true const onerrormediaupload error console log error createnotice status error content __ an error occurred isdismissible true the onsuccessmediaupload receives the object returned by the wp v2 media endpoint with the details of the image successfully uploaded with this info you can generate a success box informing the user about the success of the image upload if the upload operation fails the onerrormediaupload will receive the specific error that prompted the failure of the upload operation inside this function you can also call a error box to notify the user that something went wrong to display the notification boxes triggered by the createnotice methods add the noticeui component to the return of the app component return noticeui dataviews react components can only return one parent element so you can use the fragment component to group your elements together since notification boxes will appear at the top of the screen you can add the following code at the start of the upload media callback to scroll to the top each time this action is triggered ensuring users don t miss any notifications window scrollto 0 0 a spinner to indicate uploading processes in progress a good ui element that could also be added is an indicator of uploading processes in progress the spinner component from wordpress components is perfect for this but before using the spinner component some logic needs to be added to ensure it is displayed only while upload processes are running to monitor the ongoing upload processes you can use a state variable that holds an array of all the uploads in progress keeping track of the upload processes using state variables include the following code at the start of your app component to add a state variable using usestate const isuploadingitems setisuploadingitems usestate the isuploadingitems state variable will keep track of the upload operations in progress every time a new image starts its upload process its slug will be added to the isuploadingitems array and every time a new image is successfully uploaded its slug will be removed from the isuploadingitems array every time a state variable is updated the react component is re rendered add the following code at the beginning of the foreach callback inside the upload media action s callback setisuploadingitems previsuploadingitems previsuploadingitems image slug the code above adds every image s slug being selected for upload to the isuploadingitems state variable array to remove an image s slug from the isuploadingitems state variable array when it has been successfully uploaded or emptying it completely when an error occurs you can add the following pieces of code to the onsuccessmediaupload and onerrormediaupload functions const onsuccessmediaupload oimageuploaded setisuploadingitems previsuploadingitems previsuploadingitems filter slugloading slugloading title const onerrormediaupload error setisuploadingitems displaying the spinner component while the isuploadingitems state variable array is not empty the spinner component should be displayed to indicate to the user that there s some uploading process in progress navigate to the top of app js and import the spinner component from wordpress components import spinner from wordpress components finally to conditionally display the spinner component while any of the image uploads are still in progress add the following code to the return statement of the app component return isuploadingitems length spinner dataviews action with modal window remember the action you created in the previous article to display an image in full size what about improving this action to show a modal so users can choose the size of the image they want to open in a new window data views actions provide a mechanism to display a modal window when triggered through the rendermodal property you can define a react component that will be displayed upon the action call as a modal window when the rendermodal property is provided the callback property is ignored a modalheader property can also be defined to set a header text for the modal window you could replace the see original action definition with the following code id see original label __ see original modalheader __ see original image action label rendermodal items item closemodal return div button onclick closemodal window open item urls raw _blank open original image in new window button div the code above would open a modal when the action is triggered over an image and provide a button to open the original image in a new window this is the same behavior defined in the previous version via callback but with a modal window in between let s make this modal window nicer and more interesting by providing a dropdown so users can select the size of the image to be opened in a new window first import some components to be used in the modal window import selectcontrol button __experimentaltext as text __experimentalhstack as hstack __experimentalvstack as vstack from wordpress components the selectcontrol button text hstack and vstack are wordpress components available for wordpress development with react you can find live examples of these components and others in the gutenberg storybook next use the following code to define the see original action id see original label __ see original modalheader __ see original image action label rendermodal items item closemodal const size setsize usestate raw return vstack spacing 5 text select the size you want to open for item slug text hstack justify left selectcontrol __nexthasnomarginbottom label size value size options object keys item urls filter url url small_s3 map url label url value url onchange setsize hstack hstack justify right button __next40pxdefaultsize variant primary onclick closemodal window open item urls size _blank open image from original location button hstack vstack the code above uses the selectcontrol component to display the sizes available for each image from the object with the info for each photo the image size selected is stored in the size state variable through the setsize function the button component s onclick calls the closemodal available via props and then opens the selected image with the selected size in a new window now when you click on the see original action on an image you should see a modal window like the following one full implementation and output at this point the final src app js file of the project should look like this import dataviews filtersortandpaginate from wordpress dataviews wp import gettopicselementsformat from utils import usestate usememo from wordpress element import selectcontrol button __experimentaltext as text __experimentalhstack as hstack __experimentalvstack as vstack spinner withnotices from wordpress components import __ from wordpress i18n import apifetch from wordpress api fetch import style scss source data definition import dataphotos from data defaultlayouts definition const primaryfield id const mediafield img_src const defaultlayouts table layout primaryfield grid layout primaryfield mediafield fields definition const fields id img_src label __ image render item img alt item alt_description src item urls thumb enablesorting false id id label __ id enableglobalsearch true id author label __ author getvalue item item user first_name item user last_name render item a target _blank href item user url rel noreferrer item user first_name item user last_name a enableglobalsearch true id alt_description label __ description enableglobalsearch true id topics label __ topics elements gettopicselementsformat dataphotos render item return div classname topic_photos item topics map topic span key topic classname topic_photo_item topic touppercase span div filterby operators isany isnone isall isnotall enablesorting false id width label __ width getvalue item parseint item width enablesorting true id height label __ height getvalue item parseint item height enablesorting true const app withnotices noticeoperations noticeui const createnotice noticeoperations const isuploadingitems setisuploadingitems usestate view and setview definition const view setview usestate type table perpage 10 layout defaultlayouts table layout fields img_src id alt_description author topics width height processeddata and paginationinfo definition const data processeddata paginationinfo usememo return filtersortandpaginate dataphotos view fields view const onsuccessmediaupload oimageuploaded const title oimageuploaded title rendered setisuploadingitems previsuploadingitems previsuploadingitems filter slugloading slugloading title createnotice status success translators s is the image title content title jpg __ successfully uploaded to media library isdismissible true const ...