react#DragEvent TypeScript Examples

function onDrag(event: DragEvent) {
  const target = event.target as HTMLElement;

  event.dataTransfer.setData('text', target.id);

  if (target) {
    target.style.background = '#A855F7';
  }
}

function onDragOver(event: DragEvent) {
  event.preventDefault();

  const target = event.target as HTMLElement;

  if (target) {
    target.style.borderColor = '#3B82F6';
  }
}

function onDrop(event: DragEvent) {
  event.preventDefault();

  const target = event.target as HTMLElement;
  const data = event.dataTransfer.getData('text');
  const box = document.getElementById(data) as HTMLElement;

  target.appendChild(box);

  if (box) {
    box.style.background = '#3B82F6';
  }
}

function onDragEnter(event: DragEvent) {
  event.preventDefault();

  const target = event.target as HTMLElement;
  const data = event.dataTransfer.getData('text');
  const box = document.getElementById(data) as HTMLElement;

  target.style.borderColor = '#3B82F6';

  if (box) {
    box.style.background = '#3B82F6';
  }
}

function onDragLeave(event: DragEvent) {
  event.preventDefault();

  const target = event.target as HTMLElement;

  if (target) {
    target.style.borderColor = '#DBEAFE';
  }
}

export async function handleDrop(ev: DragEvent): Promise<SwarmFile[]> {
  const files: SwarmFile[] = []

  if (ev.dataTransfer.items) {
    const { items } = ev.dataTransfer
    const entries = []

    for (let i = 0; i < items.length; i++) {
      const item = items[i]
      const entry = item.webkitGetAsEntry()

      if (entry) entries.push(...(await scanFiles(entry)))
    }

    // This is deliberately a separate loop because item.file() function mutates the dataTransferItems object
    for (let i = 0; i < entries.length; i++) {
      const f = await fileEntry2File(entries[i])
      files.push(f)
    }
  } else {
    // Use DataTransfer interface to access the file(s), this is a fallback as we can not handle directories here (even though this API is newer)
    for (let i = 0; i < ev.dataTransfer.files.length; i++) files.push(convertSwarmFile(ev.dataTransfer.files[i]))
  }

  return files
}

export function drop(callback: Function, event: DragEvent<any>) {
  event.preventDefault();
  const { type, name } = JSON.parse(event.dataTransfer?.getData('component'));
  callback({
    type,
    name,
    position: {
      clientX: event.clientX,
      clientY: event.clientY
    }
  });
}

FileInput = ({ label, id, onChange, valid }: FileInputProps) => {
  const [dragging, setDragging] = useState(false)

  const addDrag = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault()
    setDragging(true)
  }

  const removeDrag = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault()
    setDragging(false)
  }

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault()
    setDragging(false)
    const file = event.dataTransfer.items[0].getAsFile()
    if (file) onChange?.(file)
  }

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) onChange?.(file)
  }

  return (
    <Wrapper onDrop={handleDrop} onDragOver={addDrag} onDragLeave={removeDrag}>
      <HiddenFileInput as="input" type="file" id={id} onChange={handleChange} />
      <Label htmlFor={id} valid={valid} dragging={dragging}>
        {label} <Upload />
      </Label>
    </Wrapper>
  )
}

export function Orderable({ children, enabled, onMoveChild }: OrderableProps) {
  const [draggedIndex, setDraggedIndex] = useState<number>();
  const [dropIndex, setDropIndex] = useState<number>();

  const getClassName = (index: number) => {
    if (index !== dropIndex || draggedIndex == null) {
      return;
    }

    if (index < draggedIndex) {
      return 'drop-bar-top';
    }

    if (index > draggedIndex) {
      return 'drop-bar-bottom';
    }
  };

  const onDragEnter = (index: number) => {
    if (draggedIndex == null) {
      return;
    }

    setDropIndex(index);
  };

  const onDragOver = (event: DragEvent) => {
    if (draggedIndex == null) {
      return;
    }

    event.preventDefault();
  };

  const onDrop = (event: DragEvent) => {
    if (draggedIndex == null || dropIndex == null || draggedIndex === dropIndex) {
      return;
    }

    event.preventDefault();
    onMoveChild(draggedIndex, dropIndex);
  };

  const onDragEnd = () => {
    setDraggedIndex(undefined);
    setDropIndex(undefined);
  };

  return (
    <>
      {children.map((child, index) => (
        <div
          className={getClassName(index)}
          draggable={enabled}
          key={child.key}
          onDragEnd={onDragEnd}
          onDragEnter={() => onDragEnter(index)}
          onDragOver={onDragOver}
          onDragStart={() => setDraggedIndex(index)}
          onDrop={onDrop}
        >
          {child}
        </div>
      ))}
    </>
  );
}

ServerListItem: React.FC<ServerListItemProps> = props => {
  const {
    item,
    selectedServer,
    isLast,
    dragTarget,
    dragSort,
    setDragTarget,
    setDragSource
  } = props;

  const styles = useStyles();
  const ref = useRef<HTMLDivElement>(null);
  const theme: Theme = useTheme();

  const onDragStart = (e: DragEvent<HTMLDivElement>) => {
    setCloneElement((e.target as HTMLDivElement).cloneNode(true) as HTMLDivElement);
    (e.target as HTMLDivElement).style.opacity = "0.2";
    setDragSource(item.id);
    e.dataTransfer.setDragImage(img, 0, 0);
  };

  const onDragEnd = (e: DragEvent<HTMLDivElement>) => {
    if (cloneElement) {
      (e.target as HTMLDivElement).style.opacity = "1";
      dragSort();
      cloneElement.remove();
      setCloneElement(null);
    }
  }

  const onDragEnter = () => {
    if (cloneElement) {
      setDragTarget(item.id);
      cloneElement.remove();
      cloneElement.style.transition = 'all 0.3s linear';
      cloneElement.style.border = `dashed 2px ${theme.palette.primary.main}`;
      ref.current?.prepend(cloneElement);
    }
  };

  const isInOver = dragTarget.current === item.id;

  return (
    <>
      <div
        ref={ref}
        draggable={true}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onDragEnter={onDragEnter}
        className={clsx(styles.wrapper, isInOver && styles.highlight)}
      >
        <If
          condition={item.type === 'group'}
          then={<ServerListItemGroup {...props} item={(props.item as GroupConfig)} selectedServer={selectedServer} />}
          else={<ServerListItemSingle {...props} item={(props.item as Config)} selected={selectedServer === item.id} />}
        />
      </div>
      {!isLast && <GradientDivider />}
    </>
  );
}

export function allowDrop(event: DragEvent) {
  event.preventDefault();
}

export function drag(type: string, name: string, event: DragEvent<any>) {
  event.dataTransfer?.setData('component', JSON.stringify({type, name}));
}

ImageUpload = ({ desktop, image, setImage }: ImageUploadProps) => {
  const [imageBase64, setImageBase64] = useState("");
  const [imageLink, setImageLink] = useState("");
  const [imageFromURL, setImageFromURL] = useState(true);
  const [dragOver, setDragOver] = useState(false);
  const [loading, setLoading] = useState(false);
  const [hasImage, setHasImage] = useState(false);

  const previewImage = (image: Blob | File) => {
    const reader = new FileReader();
    reader.readAsDataURL(image);
    reader.onloadend = () => {
      setImageBase64(reader.result as string);
      setHasImage(true);
      setLoading(false);
    };
  };

  useEffect(() => {
    if (image) {
      if (is<string>(image)) {
        setImageBase64(image);
        setHasImage(true);
      } else {
        previewImage(image);
      }
    } else {
      setImageBase64("");
      setImageLink("");
      setImageFromURL(true);
      setDragOver(false);
      setLoading(false);
      setHasImage(false);
    }
  }, [image]);

  const getImageFromURL = (url: string) => {
    setLoading(true);
    fetch(url)
      .then((response) => response.blob())
      .then((blob) => {
        setLoading(false);
        setImage(blob);
      })
      .catch((err) => {
        setLoading(false);
        queue.notify({ title: `Failed to fetch image: ${err}` });
      });
  };

  const handleChange = ({
    target: { name, value },
  }: ChangeEvent<HTMLInputElement>) => {
    if (name === "imageLink") {
      setImageLink(value);
    }
    const regex = RegExp("https?://.+(?:.(?:jpe?g|png)|;image)");
    if (regex.test(value)) {
      getImageFromURL(value);
    }
  };

  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
    if (!imageFromURL) {
      e.preventDefault();
      e.stopPropagation();
      setDragOver(true);
    }
  };

  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
    if (!imageFromURL) {
      e.preventDefault();
      e.stopPropagation();
      setDragOver(false);
    }
  };

  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
    if (!imageFromURL) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
    if (!imageFromURL) {
      e.preventDefault();
      e.stopPropagation();
      setLoading(true);
      const {
        dataTransfer: {
          files: [file],
        },
      } = e;
      if (!file.type.includes("image")) {
        queue.notify({ title: "Error: file is not an image." });
        setDragOver(false);
        setLoading(false);
      } else {
        setImage(file);
        setDragOver(false);
      }
    }
  };

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setLoading(true);
    const {
      target: { files },
    } = e;
    if (files) {
      const [file] = files;
      setImage(file);
      setDragOver(false);
    }
  };

  const fromUrl = () => {
    setImageFromURL(true);
  };

  const fromFile = () => {
    setImageFromURL(false);
    setImageLink("");
  };
  const imageTextField = imageFromURL ? (
    <TextField
      autoComplete="off"
      helpText={{
        children: "Must be valid link",
        persistent: false,
        validationMsg: true,
      }}
      icon="link"
      label="Image link"
      name="imageLink"
      onChange={handleChange}
      outlined
      pattern="https?://.+\.(?:jpg|jpeg|png)"
      value={imageLink}
    />
  ) : null;
  const areaInner = hasImage ? (
    <div
      className="image-display-image"
      style={{
        backgroundImage: `url(${imageBase64.replace(
          "/keysets%2F",
          "/thumbs%2F"
        )})`,
      }}
    />
  ) : loading ? null : desktop && !imageFromURL ? (
    <div className="drag-label">
      <Icon icon={iconObject(<AddPhotoAlternate />, { size: "medium" })} />
      <Typography className="caption" tag="p" use="body2">
        Drag image here
      </Typography>
    </div>
  ) : (
    <div className="drag-label">
      <Icon icon={iconObject(<AddPhotoAlternate />, { size: "medium" })} />
    </div>
  );
  const loadingIndicator = loading ? (
    <div className={classNames("loading-indicator", { image: hasImage })}>
      <CircularProgress size="large" />
    </div>
  ) : null;
  const actions = !imageFromURL ? (
    <CardActions>
      <CardActionButtons>
        <div className="file-input">
          <CardActionButton htmlFor="file-upload" label="Browse" tag="label" />
          <input
            accept=".png, .jpg, .jpeg"
            id="file-upload"
            onChange={handleFileChange}
            type="file"
          />
        </div>
        <CardActionButton label="From URL" onClick={fromUrl} />
      </CardActionButtons>
    </CardActions>
  ) : (
    <CardActions>
      <CardActionButtons>
        <CardActionButton label="From file" onClick={fromFile} />
      </CardActionButtons>
    </CardActions>
  );
  return (
    <Card className="image-upload" outlined>
      <Typography className="image-upload-title" tag="h3" use="caption">
        Image*
      </Typography>
      <div className="image-upload-form">
        <div
          className={classNames("image-display", {
            image: hasImage,
            over: dragOver,
          })}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          {loadingIndicator}
          {areaInner}
        </div>
        {imageTextField}
      </div>
      {actions}
    </Card>
  );
}

export default function Upload({ setFiles }: Props): ReactElement {
  const classes = useStyles()
  const ref = useRef<HTMLInputElement>(null)
  const navigate = useNavigate()
  const [isDragging, setIsDragging] = useState<boolean>(false)
  const [agreedToTerms, setAgreedToTerms] = useState(Boolean(window.localStorage.getItem('agreedToTerms')))

  useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute('directory', '')
      ref.current.setAttribute('mozdirectory', '')
      ref.current.setAttribute('webkitdirectory', '')
    }
  }, [ref])

  const handleAgree = () => {
    setAgreedToTerms(true)
    window.localStorage.setItem('agreedToTerms', Date.now().toString())
  }

  const onDragOver = (ev: DragEvent<HTMLDivElement>) => {
    ev.preventDefault()
    ev.stopPropagation()

    setIsDragging(true)
  }

  const onDrop = async (ev: DragEvent<HTMLDivElement>) => {
    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault()
    ev.stopPropagation()

    setFiles(await handleDrop(ev))
    setIsDragging(false)
  }

  const handleFiles = (fileList: FileList | null) => {
    const files = []

    if (fileList) for (let i = 0; i < fileList.length; i++) files.push(convertSwarmFile(fileList[i]))
    setFiles(files)
  }

  const onDragLeave = (ev: DragEvent<HTMLDivElement>) => {
    ev.preventDefault()
    ev.stopPropagation()

    setIsDragging(false)
  }

  if (!agreedToTerms) return <TermsAndConditionsPopup handleAgree={handleAgree} />

  return (
    <div onDragOver={onDragOver} onDrop={onDrop}>
      <>
        {isDragging && (
          <div onDragLeave={onDragLeave} className={classes.dragOverlay}>
            <Typography className={classes.dragOverlayChildren} variant="button">
              {text.addFile.dragHeader}
            </Typography>
            <Typography variant="body1" className={classes.dragOverlayChildren}>
              {text.addFile.dragTagline}
            </Typography>
          </div>
        )}
      </>
      <Layout
        top={[
          <Header
            key="top1"
            leftAction={
              <IconButton onClick={() => navigate(ROUTES.LANDING_PAGE)}>
                <ArrowLeft strokeWidth={1} />
              </IconButton>
            }
          >
            {text.addFile.header}
          </Header>,
          <Typography key="top2" variant="body1">
            {text.addFile.tagline}
          </Typography>,
        ]}
        center={[
          <Button variant="contained" key="center1" component="label" size="large" className={classes.button}>
            <Plus strokeWidth={1} />
            {text.addFile.addFileAction}
            <input
              type="file"
              hidden
              multiple
              onChange={event => {
                handleFiles(event.target.files)
              }}
            />
            <Plus style={{ opacity: 0 }} />
          </Button>,
          <Button variant="contained" key="center2" component="label" size="large" className={classes.button}>
            <Plus strokeWidth={1} />
            {text.addFile.addFolderAction}
            <input
              type="file"
              hidden
              multiple
              ref={ref}
              onChange={event => {
                handleFiles(event.target.files)
              }}
            />
            <Plus style={{ opacity: 0 }} />
          </Button>,
        ]}
        bottom={[
          <Typography key="bottom" variant="body1">
            {text.addFile.disclaimer}
          </Typography>,
        ]}
      />
    </div>
  )
}