Блог

Я использую ReactJS, а базовым скриптом является typescript. Я пытаюсь реализовать функциональность перетаскивания. Ниже приведен код:

 function uploadImages(event: any) {
    const imageArray = []
    const greeter: HTMLHeadingElement = document.getElementById("app-images") as HTMLHeadingElement;
    if (greeter) {
      greeter.addEventListener("dragover", (event: DragEvent) => {
        event.preventDefault();
      }, false)
      greeter.addEventListener('drop', (dragEvent: DragEvent) => {
        dragEvent.preventDefault();
        if (event.target.files.length) {
          for (let i = 0; i < event.target.files.length; i  ) {
            imageArray.push(event.target.files[i]);
          }
          setImages(imageArray);
        }
      }, false)
    }
    if (event.target.files.length) {
      for (let i = 0; i < event.target.files.length; i  ) {
        imageArray.push(event.target.files[i]);
      }
      setImages(imageArray);
    }
  }

<div className="upload-container" id="app-images">
  <FileUploadLabel>
    <FileUploadInput
      type="file"
      multiple
      accept="image/*"
      onChange={(e) => uploadImages(e)}
    />
    Drop and Drop or <a>Browse</a> file to upload
    <i className="icon-upload"></i>
  </FileUploadLabel>
</div>

const FileUploadLabel = styled.label`
  border: 1px solid black;
  border-radius: 3px;
  padding: 3px;
`;
const FileUploadInput = styled.input`
  overflow: hidden;
  width: 0;
`;
 

Но всякий раз, когда я перетаскиваю раздел app-images, он открывает файл на новой вкладке. Не оставляйте его в разделе app-images. Как это решить?