I am facing with an problem which is at my opinion not working. I did install a library in angular https://github.com/vugar005/ngx-awesome-uploader And in the Frontend I am dealing with some code that the developer developed this library.
So my iteration will be like this.
the cropped image will be sent to my api in backend and there to save the files and to show the file in some other place.
The actual crop it saves a link with blob and there is my img. It is creating a GET
request with a link blob:http://localhost:4200/94a0c248-3a7a-47e5-b650-ad51138ee061
and there when I click this link there is my img.
This is my frontend code.
export class DemoFilePickerAdapter extends FilePickerAdapter {
constructor(private http: HttpClient) {
super();
}
public uploadFile(fileItem: FilePreviewModel) {
const form = new FormData();
form.append("file", fileItem.file);
const api = environment.backend;
console.log(fileItem.file);
const req = new HttpRequest("POST", `${api}/img`, form, {reportProgress: true});
return this.http.request(req)
.pipe(
map( (res: HttpEvent<any>) => {
if (res.type === HttpEventType.Response) {
return res.body.id.toString();
} else if (res.type === HttpEventType.UploadProgress) {
// Compute and show the % done:
const UploadProgress = +Math.round((100 * res.loaded) / res.total);
return UploadProgress;
}
})
);
}
}
This is the html.
<ngx-file-picker
[adapter]="adapter"
[enableCropper]="true"
>
</ngx-file-picker>
adapter = new DemoFilePickerAdapter(this.http);
constructor(private http: HttpClient) { }
And my backend API looks like this.
routes.post("/img", cvPhoto.save);
routes.get("/img", cvPhoto.get);
module.exports = {
async save(req, res) {
console.log(req.body);
res.send(`${__dirname}/cv.png`);
},
async get(req, res) {
res.sendFile(`${__dirname}/cv.png`);
}
}
from Saving image in the mongoDB backend as file from Angular it is not working as excepted
No comments:
Post a Comment