JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<body>

  <img id="depart" src="https://i.ibb.co/tbHH7VR/bookermini.png" alt="booker" ondragstart="drag(event)">


  <img id="test" src="https://i.ibb.co/dP98jKd/bobafettmini.png" alt="boba" ondragstart="drag(event)">

  <div id="zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

CSS

#zone {
   height: 112px;
   width: 112px;
   border-style: dotted;
 }

JavaScript

async getDataFromUnsplash(params: UNSPLASH): Promise<IMAGE_RESPONSE> {
    try {
      const { data } = await axios.get(`${upload_base_url}/search/photos`, {
        params,
      });
      const { results } = data;
      const imagePromises = await results.map(async (image: any) => {
        const imgData = {
          id: image.id,
          url: image.urls.raw,
        };
        if (this.includeBlob) {
          const image_blob = await fetch(image.urls.raw).then(r => r.blob());
          return { ...imgData, image_blob }
        }
        return imgData
      });
			const images= await Promise.all(imagesPromises)
      return { name: "unsplash", images };
    } catch (error) {
      console.error(error);
      return { name: "unsplash", error };
    }
  }