I can save the uploaded image file in server as:
$("#postImage").click(()=> {
var canvas = cropper.getCroppedCanvas();
var width = canvas.width;
if(canvas == null) {
return alert("Could not upload the image. Make sure it is an image file.");
}
let image = new Image();
image.src = canvas.toDataURL();
image.id = "toBeUploaded";
canvas.toBlob((blob) => {
var formData = new FormData();
formData.append("croppedImage", blob);
$.ajax({
url: "/api/users/uploadImage",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: (uploadedImageURL, status, xhr) => {
if(xhr.status == 200) {
uploadedImageLink = uploadedImageURL;
}
else {
alert("Unable to Upload the Image selected. Please try again!");
return;
}
}
})
})
})
router.post("/uploadImage", upload.single("croppedImage"), async (req, res, next) => {
if(!req.file){
console.log("No file uploaded with the ajax request.");
return res.sendStatus(400);
}
var filePath = `/uploads/${req.file.filename}.png`;
var tempPath = req.file.path;
var targetPath = path.join(__dirname, `../../${filePath}`);
fs.rename(tempPath, targetPath, async error => {
if(error != null){
console.log(error)
return res.sendStatus(400);
}
res.status(200).send(filePath);
})
})<input id="filePost" accept="image/*" type="file"/>
<button id="postImage" type="button">OK</button>For image file, I have user cropper js package and used toBlob() function to call the uploadImage API. It works fine.
<input id="fileAudio" accept="audio/*" type="file"/>
<button id="postAudio" type="button">OK</button>However, now I want to save audio files in the same way. But from internet I found that toblob is for the image files. I tried using filereader() and many other ways but could not save the uploaded audio file in server side.
Can anyone suggest how to achieve it?