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>
);
}