This is the second day of my participation in the August Text Challenge.More challenges in August

Realize the function

  • Components are developed based on the React-typescript project
  • Is about importing Excel file format concrete implementation
  • Support for click and drag imports
  • After importing, parse the document data into JSON format. Click OK to submit THE JSON data to the background through the interface
  • Component preview (UI reference elementUI drag and drop upload component)

implementation

The principle of

  • useFileReaderThe object’sFileReader.readAsText()Method to read file information to parseFileObjects can be from the user in oneinputElement after the file is selectedFileListObjects can also be generated from drag-and-drop operationsDataTransferObject that fires after reading is completeFileReader.onloadMethod, the parse read result isjsonFormat data

Train of thought

  • Click Upload:
    • Manually triggered when the drag area is clickedinputtheclickEvent, throughdisplay:noneHidden truthinputThe element
    // basic-upload.tsx

// Manually trigger the input click event
  const inputEl = useRef<HTMLInputElement>(null)
  const handleClick = () = > {
    if (inputEl.current) {
      inputEl.current.click()
    }
  }
return (
    <>
      <UploadDragger onClick={handleClick}>
        <div className='drag-tip'>
          <CloudUploadIcon />
          <div>Drag the file here, or click Upload</div>
        </div>
      </UploadDragger>
      <div className={classes.uploadTip}>To upload only files that match the template, click<span className={classes.downloadTemp} onClick={downloadTemp}>Download the template</span>
      </div>
      <input ref={inputEl} className={classes.inputInvisible} type='file' onChange={handleChange} accept={'png'} ></input>
    </>
  )
Copy the code
    • Listening to theinputthechangeEvent, parse the file
    // basic-upload.tsx

// Upload the parse file
  const handleChange = (evt: ChangeEvent<HTMLInputElement>) = > {
    let files = evt.target.files / / File object
    const reader = new FileReader() // FileReader object instance
    reader.onload = function fileReadCompleted() {
      let result = analyseBrokerFile(reader) // The analyseBrokerFile method parses the file as JSON data. }if (files) reader.readAsText(files[0].'gbk') // GBK code asynchronously reads files
  }
Copy the code
  • Drag and drop upload and parse
    • Listening to theonDropThe event,e.dataTransfer.filesObtain file information and parse it into A JSON file in the same way as above
    const UploadDragger = (props:PropType) = > {
  const { onClick } = props
  const classes = draggerStyles()

  const onDrop = (e: React.DragEvent) = > {
    e.preventDefault()
    let files= e.dataTransfer.files
    const reader = new FileReader()
    reader.onload = function fileReadCompleted() {
      let data = analyseBrokerFile(reader)
      ...
    }
    if (files) reader.readAsText(files[0].'gbk')}return (
    <div onClick={onClick} className={classes.dragger} onDrop={onDrop} onDragOver={onDragOver} onDragLeave={onDragLeave}>
      {props.children}
    </div>)}export default UploadDragger
Copy the code
  • Analytical method:analyseBrokerFileMethods are defined by themselves, according to different projects, differentExcelThe contents of the file are resolved to differentjsonThe data. When the file is read, the contents of the reader.result file are filtered and processed by means of regex, traversal, etc

conclusion

  • Drag and drop is implemented in the same way as single click upload, but the listening events are different
  • In addition, you can add some other features, such as upload progress, multi-file upload, file format filtering judgment, file size limits, and so on

reference

  • MDN