Last active
June 27, 2018 09:18
-
-
Save sreepurnajasti/aa4313a573290f29e548ba8eaa24b085 to your computer and use it in GitHub Desktop.
multiple file upload using nodejs, jquery ajax(xhr) in frontend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>File upload Node.</title> | |
| </head> | |
| <body> | |
| <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post"> | |
| <input type="file" name="userPhoto" multiple accept=".xlsx,.xlx,.csv"/> | |
| <input type="submit" value="Upload Image" name="submit"> | |
| <!-- <input type='text' id='random' name='random'><br> --> | |
| <span id = "status"></span> | |
| </form> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $('#uploadForm').submit(function() { | |
| $("#status").empty().text("File is uploading..."); | |
| $(this).ajaxSubmit({ | |
| error: function(xhr) { | |
| status('Error: ' + xhr.status); | |
| }, | |
| success: function(response) { | |
| // console.log(response) | |
| alert(response); | |
| $("#status").empty().text(response); | |
| } | |
| }); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var express = require("express"); | |
| var bodyParser = require("body-parser"); | |
| var multer = require('multer'); | |
| var app = express(); | |
| app.use(bodyParser.json()); | |
| var maxSize = 1*1000*1000; | |
| var storage = multer.diskStorage({ | |
| destination: function (req, file, callback) { | |
| callback(null, './uploads'); | |
| }, | |
| filename: function (req, file, callback) { | |
| callback(null, file.fieldname + '-' + Date.now()); | |
| } | |
| }); | |
| var upload = multer({ | |
| storage : storage, | |
| limits: { fileSize: maxSize }, | |
| fileFilter: function(req, file, callback){ | |
| var mimeTypeList = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']; | |
| if(mimeTypeList.indexOf(file.mimetype)<=-1){ | |
| var cusError = new Error('File type is invalid'); | |
| cusError.code = 'INVALID_FILE_TYPE'; | |
| cusError.field = file.fieldname; | |
| return callback(cusError); | |
| }else{ | |
| return callback(null, true); | |
| } | |
| } | |
| }).array('userPhoto',2); | |
| app.get('/',function(req,res){ | |
| res.sendFile(__dirname + "/main.html"); | |
| }); | |
| app.post('/api/photo',function(req,res){ | |
| upload(req,res,function(err) { | |
| if(err) { | |
| console.log(err); | |
| switch(err.code){ | |
| case 'LIMIT_UNEXPECTED_FILE': | |
| res.end('Number of files choosen for uploading are greater than '+2); | |
| break; | |
| case 'LIMIT_FILE_SIZE': | |
| res.end('Choosen file size is greater than '+maxSize); | |
| break; | |
| case 'INVALID_FILE_TYPE': | |
| res.end('Choosen file is of invalid type'); | |
| break; | |
| } | |
| } | |
| res.end("File is uploaded successfully"); | |
| }); | |
| }); | |
| app.listen(3000,function(){ | |
| console.log("Working on port 3000"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment