My html code is
<form action="/file_upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photos" id="photos" accept='image/*' multiple>
<input type="submit" value="Upload" id="upload_my_photos" disabled>
</form>
In sails I am using
uploadFiles = req.file("photos");
This is only fetching just single file.
Edit : I would also like to save the individual files. Below is the code I am using but no files are getting uploaded:
req.file('photos').upload(function (err, uploadedPhotos) {
if (err) return res.serverError(err);
async.eachSeries(uploadedPhotos,
function (uploadedFile, callback) {
sails.log("upload file size and name is " + uploadedFile.size + " " + uploadedFile.filename);
req.file(uploadedFile).upload({
dirname: "path/to/directory",
// saveAs: function (file, cb) { cb(null, file.filename); }
},
function onUploadComplete(err, files) {
if (err) return res.serverError(err);
if (files.length === 0) {
return res.badRequest('No file was uploaded');
}
sails.log("files uploaded");
});
}, function (err) {
// if any of the saves produced an error, err would equal that error
if (err) {
console.log(err);
} else {
return res.status(200).send({ success: false, message: "failed to upload" });
}
});
});
Sails req.file() is representing an incoming multipart file upload from the specified field.
You need to subscribe to the request with a callback in which the uploaded files will be passed as an second argument:
req.file('photos').upload(function (err, uploadedPhotos){
if (err) return res.serverError(err);
return res.json({
message: uploadedPhotos.length + ' file(s) uploaded successfully!',
files: uploadedPhotos
});
});
Related
I have a small HTML template and what I want is to upload image from one location to another. After selecting and clicking on the upload button, response gives me "Uploaded successfully" But the image is not in the destination folder. Please look into the below code.
HTML
<form id="frmUploader" enctype="multipart/form-data" action="book/api/Upload/" method="post">
<input type="file" name="imgUploader" multiple />
<input type="button" name="submit" id="btnSubmit" value="Upload" onclick="upload()"/>
</form>
index.js
function upload() {
axios.post(baseUrlLocal+'/book/api/Upload', {headers: headers})
.then(response => {
console.log(response.data.success)
if (response.data.success) {
console.log("hi: "+response)
// $.notify("New Book is Added to your Library", "success");
}
})
.catch(function (error) {
console.log(error)
// $.notify("Please check all the details","warn");
});
}`
book.js
var Storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, "../public/images/");
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" +
file.originalname);
}
});
var upload = multer({
storage: Storage
}).array("imgUploader", 3);
router.get("/image", function(req, res) {
res.sendFile(__dirname + "/index.html");
});
`router.post("/api/Upload", function(req, res) {
upload(req, res, function(err) {
if (err) {
return res.end("Something went wrong!");
}
return res.end("File uploaded sucessfully!.");
});
});`
I'm getting req.file as undefined. I have tried everything. I have searched for other solutions, but it's not a problem in input name="avatar" attr and upload.single("avatar").
Also, I'm getting an error in the console:
Error for image upload 400 - Bad Request
{"code":"ER_PARSE_ERROR","errno":1064,"sqlMessage":"You have an error
in your SQL syntax; check the manual that corresponds to your MySQL
server version for the right syntax to use near '?)' at line
1","sqlState":"42000","index":0,"sql":"INSERT INTO avatars (image)
VALUES(?)"}
I would say that it is because req.file is undefined.
Please, help me to understand what I'm doing wrong.
api.js:
var storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, "./assets/images/uploads");
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" +
file.originalname);
}
});
var upload = multer({
storage: storage,
limits: {fileSize: 1000000},
fileFilter: function(req, file, cb) {
checkFileType(file, cb);
}
});
function checkFileType(file, cb) {
const filetypes = /jpeg|jpg|png|gif/;
const extname = filetypes.test(file.originalname.toLowerCase());
const mimetype = filetypes.test(file.mimetype);
if(extname && mimetype) {
return cb(null, true);
} else {
cb('Error: Images only');
}
}
router.post("/upload", upload.single('avatar'), function(req, res) {
console.log(req.file); // <- ALWAYS UNDEFINED
pool.getConnection(function(err, connection) {
if (err) throw err;
connection.query('INSERT INTO avatars (image) VALUES(?)', req.file,
function (error, results, fields) {
if(error){
console.log("Error: " + error);
res.status(400).send(error);
}
res.status(200).end(JSON.stringify(results));
connection.release();
if (error) throw error;
});
});
});
html:
<form enctype="multipart/form-data">
<input class="form-control"
(change)="onFileSelected($event)"
type="file" name="avatar">
<button type="submit" class="btn btn-danger float-right" (click)="onUpload()">Upload image</button>
</form>
ctrl:
onFileSelected(event) {
if(event.target.files.length > 0) {
this.uploadImage = <File>event.target.files[0];
}
}
onUpload() {
if(this.uploadImage) {
this.friendService.uploadFile(this.uploadImage)
.subscribe(
data => {
return true;
},
error => {
console.error('Error for image upload ' + error);
return false;
})
}
}
service:
uploadFile(file): Observable<any> {
return this.http.post(`${this.apiUrl}/upload`, file)
.map(res => res.json())
.catch(this.handleError);
}
db mysql avatars table:
Field - image
Type - blob
Null - NO
Key Default Extra - Empty
while uploading file it should be form data and content type should be multipart/form-data
For your reference: File Upload In Angular?.
I hope this will help you.
I upload a file in HTML with nodejs module MULTER:
<form enctype = "multipart/form-data"
action = "/upload"
method = "POST">
<input type="file" name="file" >
<p></p>
<input type="submit" value="Upload File" name="submit" class="btn btn-primary">
</form>
<span>{{submit.message}}</span>
I want to show the response message not in on a new page which is now, I want to show it in the message span.
var upload = multer({ storage : storage}).single('file');
router.post('/upload', function(req, res){
upload(req, res, function(err) {
if(err){
return res.status(400).send({
message: 'wrong'
});
console.log("Error: '" + err + "'");
}else{
return res.status(200).send({
message: 'fine'
});
console.log('Uploaded file: ' + req.file.filename);
}
});
});
angularjs:
this.submit = function() {
$http.post("/upload", data)
.then(
function(res) {
console.log("posted successfully");
this.message = "succesful";
},
function(res) {
console.log(res.data.message);
this.message = res.data.message
}
);
}
How can I parse the response message to the html file without opening a new page. I want to show the response message in the html span response.
Does anyone know how to do this?
I want to know the easiest way to handle two separate file uploads, one for images and the other for audio. right now I am using multer and it uploads all multipart uploads to the same location. can I specify different locations for both file uploads?
Assuming you want to save the files to disk, you can do something like this:
var storage = multer.diskStorage({
destination: function(req, file, cb) {
if (file.fieldname === 'image-file') {
return cb(null, 'folder-for-image-uploads');
}
if (file.fieldname === 'audio-file') {
return cb(null, 'folder-for-audio-uploads');
}
cb(new Error('Unknown fieldname: ' + file.fieldname));
},
filename: function(req, file, cb) {
if (file.fieldname === 'image-file') {
return cb(null, 'image-filename.jpg');
}
if (file.fieldname === 'audio-file') {
return cb(null, 'audio-filename.mp3');
}
cb(new Error('Unknown fieldname: ' + file.fieldname));
}
});
var upload = multer({storage: storage});
app.post('/endpoint', upload.fields([{name: 'image-file', maxCount: 1}, {name: 'audio-file', maxCount: 1}]), function(req, res) {
// handle request, files already saved to disk
res.sendStatus(200);
}
For this to work, you need the name of input HTML elements to match the fieldname property, e.g.:
<form method="POST" action="/endpoint" enctype="multipart/form-data">
<input type="file" name="image-file">
<input type="file" name="audio-file">
<input type="submit">Submit</input>
</form>
I want to write logs into a Json file
newEntry = "User: " + lastUsername + " Time: "+now+ " Door: "+IOSDoor;
lastUserOpenClose += newEntry;
jsonString = JSON.stringify(lastUserOpenClose);
fs.writeFile("lastUserOpenClose.json", lastUserOpenClose, function(err) {
if(err) {
console.log(err);
} else {
console.log("Server-Log: The file was saved!");
}
});
But I'm overwriting the logs.
How to write somthing into a json file and don't overwrite the old logs?
You should use the fs.appendFile
Example:
fs.appendFile('message.txt', 'data to append', function (err) {
if (err) throw err;
console.log('The "data to append" was appended to file!');
});