How to send zip file data to REST API using typescript?

Viewed 199

I want to upload a zip from GUI and save that zip file as it is in the /temp folder. In my application frontend code is written in typescript and backend code is written in golang.

When I am uploading a zip from the frontend the zip file data looks as follows in the browser console.:

data:application/x-zip-compressed;base64,UEsDBBQAAAAAAHdPvlQAAAAAAAAAAAAAAAAYAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvUEsDBBQAAAAAAFxPvlQAAAAAAAAAAAAAAAAeAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvZ3JhcGgvUEsDBBQAAAAAAFFPvlQAAAAAAAAAAAAAAAAiAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvZ3JhcGgvYXBpL1BLAwQUAAAA......

When I am trying to fetch the request in the backend then it is always null.

Is there any way to send the above data to the backend using typescript?

Below is my frontend code

handleFileInputChange = (_event, file) => {
    this.setState({ 
      filename: file.name });
    console.log(this.state.filename);
}

handleTextOrDataChange = value => {
    this.setState({ 
    fileData: value });
  }

handleClear = _event => this.setState({ filename: '', value: '' });

handleFileReadStarted = _fileHandle => this.setState({ isLoading: true });

handleFileReadFinished = _fileHandle => this.setState({ isLoading: false });

saveFileData = (filename: string, filedata: any) => {
    console.log("Filename:",filename);
    console.log("Filedata:",filedata); 
    var str = filedata;
    var splitted1: any
    var splitted = str.split(","); 
    for (let i=0;i<splitted.length;i++){
      splitted1 = splitted[1]
    }
  
    console.log(splitted1)
      API.sendFileNameAndFileData(filename,splitted1).then(response => {
        this.setState({
          fileSavestatusText: response.data,
        });
      });
  };

render(){
   return (
    <FileUpload
      id="archive-file"
      type="dataURL"
      value={value}
      filename={filename}
      filenamePlaceholder="Drag and drop a file or upload one"
      onFileInputChange={this.handleFileInputChange}
      onDataChange={this.handleTextOrDataChange}
      onTextChange={this.handleTextOrDataChange}
      onReadStarted={this.handleFileReadStarted}
      onReadFinished={this.handleFileReadFinished}
      onClearClick={this.handleClear}
      hideDefaultPreview
      browseButtonText="Upload"
      height='425px'
      width='810px'
     >
      {filename && (
       <div className="pf-u-m-md">
        <FileUploadIcon size="md" /> Custom preview here for your file named {filename}
        </div>
        )}
    </FileUpload>
    <Button className= { buttonstyle } variant="primary" onClick={() => 
      this.saveFileData(this.state.filename, this.state.fileData)}> Save
    </Button>
 );
}
1 Answers

I am handling responses in the backend by using the following ioutil function

body, err := ioutil.ReadAll(r.Body)
s := string(body)
fmt.Println(s)
dec, err := base64.StdEncoding.DecodeString(s)
if err != nil {
   panic(err)
}

and perform operations on the body variables and use it as the above code.

Related