I have developed a straightforward VueJS application and am currently grappling with incorporating an example for file upload functionality.
The proto file I am utilizing is as follows:
syntax = "proto3";
message File {
bytes content = 1;
}
message MetaData {
string name = 1;
string type = 2;
}
message FileUploadRequest {
oneof request {
MetaData metadata = 1;
File file = 2;
}
}
enum Status {
PENDING = 0;
IN_PROGRESS = 1;
SUCCESS = 2;
FAILED = 3;
}
message FileUploadResponse {
string name = 1;
Status status = 2;
}
service FileUploadService {
rpc upload(stream FileUploadRequest) returns(FileUploadResponse);
}
My initial step involves generating the client stub:
protoc -I=${DIR:-./api/} fileUpload.proto \
--js_out=import_style=commonjs,binary:${OUT_DIR:-./api} \
--grpc-web_out=import_style=typescript,mode=grpcwebtext:${OUT_DIR:-./api}
This process results in three files being created within the api directory:
├── api
│ ├── FileUploadServiceClientPb.ts
│ ├── fileUpload_pb.d.ts
| ├── fileUpload.proto
│ └── fileUpload_pb.js
└── src
├── App.vue
└── main
├── services
│ └── fileService.ts
└── views
My current aim is to integrate the generated client code into the FileService:
import { FileUploadServiceClient } from '../../../api/FileUploadServiceClientPb';
import { FileUploadRequest, FileUploadResponse, MetaData } from '../../../api/fileUpload_pb';
export default class FileService {
constructor(readonly fileUploadClient: FileUploadServiceClient) { }
uploadFile(file: File): Promise<FileUploadResponse | null> {
...
this.fileUploadClient.upload(request, {}, (err, response) => {
...
}
...
}
}
I am encountering the following two issues:
- The import of messages and types seems to be malfunctioning, yielding a "
" error.Uncaught SyntaxError: import not found: MetaData - Although the import of FileUploadServiceClient is successful, it fails to recognize the upload method.
I am using libprotoc 3.20.1 and protoc-gen-grpc-web 1.3.1
Despite conducting thorough research online, I have been unable to find a solution to address these problems:
Experimenting with different configurations of import_style and mode for grpc-web_out unfortunately did not resolve the issue either. Interestingly, generating server-side code in a Quarkus application functions flawlessly.