I am facing an issue with my NestJS server where I have uploaded images but cannot access them as they appear to be some unreadable data. I have tried converting them to a blob and then setting it as an object URL for the image tag, but that also did not work. Here is the upload code:
@Post('upload')
@UseInterceptors(FileInterceptor('file',{
storage: diskStorage({
destination: './uploads',
filename: editFileName,
}),
fileFilter: imageFileFilter,
}))
uploadFile(@UploadedFile() file){
console.log(file);
file.filename = file.originalname;
const response = {
originalname: file.originalname,
filename: file.filename,
}
return response;
}
The above code successfully saves the image as "index-53a2.jpg" in the uploads folder. When trying to retrieve the image using a GET request:
@Get()
display(@Res() res){
res.sendFile('index-53a2.jpg',{ root: './uploads' })
}
the response shows unreadable encoded data.
I used the following code for testing:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#abc').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'http:/localhost:3000/student/upload',
method:'POST',
data: new FormData(this),
contentType: false,
cache:false,
processData:false,
success: function (data) {
console.log(data);
// location.reload();
}
});
});
});
function fun(){
$.ajax({
url: 'http://localhost:3000/student',
success: function(data){
console.log('s',data);
let blob = new Blob([data]);
var objectURL = URL.createObjectURL(blob);
document.getElementById('img').src = objectURL;
},
error: function(data){
console.log('e',data);
}
});
}
</script>
</head>
<body>
<img alt="Image" id="img">
<form enctype= "multipart/form-data" id="abc">
<input type="file" name="file" required accept="image/*"><br>
<input name="submit" type="submit" value="Submit">
</form>
<button onclick="fun()">Button</button>
</body>
</html>
This HTML code is just for testing purposes, but my main objective is to use this server to retrieve student image and data from Angular and save it in MongoDB. I need guidance on how to send an image from Angular to NestJS, where to save it (MongoDB or NestJS server), and how to achieve this.
Your help would be greatly appreciated!!! Thank you in advance.