jayu108/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div> === single file select ===</div>
    <br/>
    <form id="uploadForm" action="/upload1" method="post" enctype="multipart/form-data" >

        <input type="file" name="image" id="myFile">
        <br/>
        <br/>
        <!-- <button type="submit">single image upload</button> -->
        <button>aios image upload</button>
    </form>

    <br/>
    <br/>
    <button id="defaultButtonEvent">default Button Tag event check!!</button>
    <br/>
    <br/>

    <div> === multple file select ===</div>
    <input type="file" name="image" multiple id="myFiles">

    <script>
        const form = document.getElementById('uploadForm');
        const defaultButton = document.getElementById('defaultButtonEvent');

        const uploadFile = async () => {
            const myImageFile = document.getElementById('myFile').files[0];
            console.log('---- image filename ----');
            console.log( myImageFile.name);

            const formData = new FormData();
            formData.append('image', myImageFile);
            formData.append('comment', 'hello text errrrrrrrr');

            axios.post('/upload1', formData, {
                headers: {
                    'content-type': 'multipart/form-data' // do not forget this
                }})
                .then(
                    () => {
                        console.log('--- axios success ----');
                        document.getElementById('myFile').value = '';
                    }
                ).catch(
                    () => {
                        console.log('--- axios failure ----');
                    }
                ).finally(
                    () => {
                        console.log('--- axios end ----');
                    }
                )


        }


        form.addEventListener('submit', (e) => {
            e.preventDefault();  // Form tag submit 방지 -- 따라서 서버로 파일 전송 안됨

            // --- 파일전송 구현하기 ----
            console.log('---- image submit ----');
            uploadFile();
        })

        defaultButton.addEventListener('submit', (e) => {
            e.preventDefault();
            console.log('---- defaultButton submit ----');
        })

        defaultButton.addEventListener('click', (e) => {
            e.preventDefault();
            console.log('---- defaultButton clicked ----');
        })

    </script>

</body>
</html>

## index.js
const express = require('express')
const req = require('express/lib/request')
const multer = require('multer')
// const upload = multer({ dest: 'uploads/' })

const app = express()
const port = 3000

// ---- 파일 저장용 폴더 uploadimages 필요 ---
const ImageStorage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, './uploadimages')
    },
    filename: (req, file, callback) => {
        callback(null, Date.now() + file.originalname)
    }
})

const upload = multer({ storage: ImageStorage })

app.get('/', (req, res) => {
//   res.send('Hello Image Test Nodejs Server!')
  console.log(__dirname);
  console.log('---------------------------');
  res.sendFile(__dirname + '/index.html');
})

app.post('/', function (req, res) {
    res.send('Got a POST request');
  });


app.post('/upload', function (req, res) {
res.send('Image Upload');
});

app.post('/upload1', upload.single('image'), function (req, res) {
    console.log(req.file);
    console.log('-----  singe image uploaded ---')
    console.log(req.body);
    console.log(req.body.comment);
    res.send('one image Uploaded');
    });

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

## package.json
{
  "name": "nodeserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "package.json": "^0.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
	<div> === single file select ===</div>
	<br/>
	<form id="uploadForm" action="/upload1" method="post" enctype="multipart/form-data" >

	<input type="file" name="image" id="myFile">
	<br/>
	<br/>
	<!-- <button type="submit">single image upload</button> -->
	<button>aios image upload</button>
	</form>

	<br/>
	<br/>
	<button id="defaultButtonEvent">default Button Tag event check!!</button>
	<br/>
	<br/>

	<div> === multple file select ===</div>
	<input type="file" name="image" multiple id="myFiles">

	<script>
	const form = document.getElementById('uploadForm');
	const defaultButton = document.getElementById('defaultButtonEvent');

	const uploadFile = async () => {
	const myImageFile = document.getElementById('myFile').files[0];
	console.log('---- image filename ----');
	console.log( myImageFile.name);

	const formData = new FormData();
	formData.append('image', myImageFile);
	formData.append('comment', 'hello text errrrrrrrr');

	axios.post('/upload1', formData, {
	headers: {
	'content-type': 'multipart/form-data' // do not forget this
	}})
	.then(
	() => {
	console.log('--- axios success ----');
	document.getElementById('myFile').value = '';
	}
	).catch(
	() => {
	console.log('--- axios failure ----');
	}
	).finally(
	() => {
	console.log('--- axios end ----');
	}
	)


	}


	form.addEventListener('submit', (e) => {
	e.preventDefault(); // Form tag submit 방지 -- 따라서 서버로 파일 전송 안됨

	// --- 파일전송 구현하기 ----
	console.log('---- image submit ----');
	uploadFile();
	})

	defaultButton.addEventListener('submit', (e) => {
	e.preventDefault();
	console.log('---- defaultButton submit ----');
	})

	defaultButton.addEventListener('click', (e) => {
	e.preventDefault();
	console.log('---- defaultButton clicked ----');
	})

	</script>

	</body>
	</html>
	const express = require('express')
	const req = require('express/lib/request')
	const multer = require('multer')
	// const upload = multer({ dest: 'uploads/' })

	const app = express()
	const port = 3000

	// ---- 파일 저장용 폴더 uploadimages 필요 ---
	const ImageStorage = multer.diskStorage({
	destination: (req, file, callback) => {
	callback(null, './uploadimages')
	},
	filename: (req, file, callback) => {
	callback(null, Date.now() + file.originalname)
	}
	})

	const upload = multer({ storage: ImageStorage })

	app.get('/', (req, res) => {
	// res.send('Hello Image Test Nodejs Server!')
	console.log(__dirname);
	console.log('---------------------------');
	res.sendFile(__dirname + '/index.html');
	})

	app.post('/', function (req, res) {
	res.send('Got a POST request');
	});


	app.post('/upload', function (req, res) {
	res.send('Image Upload');
	});

	app.post('/upload1', upload.single('image'), function (req, res) {
	console.log(req.file);
	console.log('----- singe image uploaded ---')
	console.log(req.body);
	console.log(req.body.comment);
	res.send('one image Uploaded');
	});

	app.listen(port, () => {
	console.log(`Example app listening on port ${port}`)
	})
	{
	"name": "nodeserver",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "node index.js",
	"test": "nodemon index.js"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"express": "^4.18.2",
	"multer": "^1.4.5-lts.1",
	"package.json": "^0.0.0"
	},
	"devDependencies": {
	"nodemon": "^2.0.22"
	}
	}