81 lines
2.3 KiB
HTML
81 lines
2.3 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block title %}CSV取込{% endblock %}
|
||
|
||
{% block content %}
|
||
<section>
|
||
<h2>CSV取込</h2>
|
||
{% if error_message %}
|
||
<p style="color: #b00020;">{{ error_message }}</p>
|
||
{% endif %}
|
||
<style>
|
||
.drop-zone {
|
||
border: 2px dashed #888;
|
||
padding: 24px;
|
||
text-align: center;
|
||
background: #fafafa;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.drop-zone.is-dragover {
|
||
background: #e9f2ff;
|
||
}
|
||
.drop-zone input[type="file"] {
|
||
display: none;
|
||
}
|
||
.drop-zone .file-name {
|
||
margin-top: 8px;
|
||
color: #555;
|
||
font-size: 0.9em;
|
||
}
|
||
</style>
|
||
<div>
|
||
<form method="post" enctype="multipart/form-data" id="js-csv-form">
|
||
{% csrf_token %}
|
||
<label class="drop-zone" id="js-drop-zone">
|
||
<strong>ここにCSVをドラッグ＆ドロップ</strong>
|
||
<div>またはクリックして選択</div>
|
||
<input type="file" name="csv_file" id="js-csv-input" accept=".csv">
|
||
<div class="file-name" id="js-file-name">ファイル未選択</div>
|
||
</label>
|
||
<button type="submit">アップロード</button>
|
||
</form>
|
||
</div>
|
||
<script>
|
||
const dropZone = document.querySelector('#js-drop-zone');
|
||
const fileInput = document.querySelector('#js-csv-input');
|
||
const fileName = document.querySelector('#js-file-name');
|
||
|
||
function updateFileName(files) {
|
||
if (!files || files.length === 0) {
|
||
fileName.textContent = 'ファイル未選択';
|
||
return;
|
||
}
|
||
fileName.textContent = files[0].name;
|
||
}
|
||
|
||
dropZone.addEventListener('dragover', (event) => {
|
||
event.preventDefault();
|
||
dropZone.classList.add('is-dragover');
|
||
});
|
||
|
||
dropZone.addEventListener('dragleave', () => {
|
||
dropZone.classList.remove('is-dragover');
|
||
});
|
||
|
||
dropZone.addEventListener('drop', (event) => {
|
||
event.preventDefault();
|
||
dropZone.classList.remove('is-dragover');
|
||
if (!event.dataTransfer?.files?.length) {
|
||
return;
|
||
}
|
||
fileInput.files = event.dataTransfer.files;
|
||
updateFileName(fileInput.files);
|
||
});
|
||
|
||
fileInput.addEventListener('change', (event) => {
|
||
updateFileName(event.target.files);
|
||
});
|
||
</script>
|
||
</section>
|
||
{% endblock %}
|