140 lines
No EOL
5.7 KiB
HTML
140 lines
No EOL
5.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Upload Files - Flask Files{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/upload.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="upload-container">
|
|
<h2>Upload Files</h2>
|
|
|
|
<div class="upload-tabs">
|
|
<button class="tab-btn active" data-tab="file-tab">Files</button>
|
|
<button class="tab-btn" data-tab="folder-tab">Folder</button>
|
|
</div>
|
|
|
|
<div class="upload-location">
|
|
<p>
|
|
Uploading to:
|
|
{% if parent_folder %}
|
|
<a href="{{ url_for('files.browser', folder_id=parent_folder.id) }}">{{ parent_folder.name }}</a>
|
|
{% else %}
|
|
<a href="{{ url_for('files.browser') }}">Root</a>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="tab-content active" id="file-tab">
|
|
<form id="file-upload-form" enctype="multipart/form-data" class="upload-form">
|
|
<input type="hidden" name="folder_id" value="{{ parent_folder.id if parent_folder else '' }}">
|
|
|
|
<div class="upload-dropzone" id="file-dropzone">
|
|
<i class="fas fa-cloud-upload-alt upload-icon"></i>
|
|
<p>Drag & drop files here to start uploading</p>
|
|
<p>or</p>
|
|
<label class="btn primary">
|
|
<i class="fas fa-file"></i> Select Files
|
|
<input type="file" name="files[]" multiple id="file-input" style="display: none">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="upload-progress-container">
|
|
<h4>Upload Progress</h4>
|
|
<div class="progress-overall">
|
|
<div class="progress-label">
|
|
<span>Overall Progress</span>
|
|
<span id="progress-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="upload-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Speed:</span>
|
|
<span class="stat-value" id="upload-speed">0 KB/s</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Uploaded:</span>
|
|
<span class="stat-value" id="uploaded-size">0 KB / 0 KB</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Remaining:</span>
|
|
<span class="stat-value" id="time-remaining">calculating...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selected-files">
|
|
<h4>Files</h4>
|
|
<div class="file-list" id="file-list"></div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}"
|
|
class="btn">Back to Browser</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="tab-content" id="folder-tab">
|
|
<form id="folder-upload-form" enctype="multipart/form-data" class="upload-form">
|
|
<input type="hidden" name="folder_id" value="{{ parent_folder.id if parent_folder else '' }}">
|
|
|
|
<div class="upload-dropzone folder-dropzone" id="folder-dropzone">
|
|
<i class="fas fa-folder-open upload-icon"></i>
|
|
<p>Select a folder to upload</p>
|
|
<p>(Some browsers may not fully support folder drag & drop)</p>
|
|
<label class="btn primary">
|
|
<i class="fas fa-folder"></i> Select Folder
|
|
<input type="file" name="files[]" webkitdirectory directory multiple id="folder-input"
|
|
style="display: none">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="upload-progress-container">
|
|
<h4>Upload Progress</h4>
|
|
<div class="progress-overall">
|
|
<div class="progress-label">
|
|
<span>Overall Progress</span>
|
|
<span id="folder-progress-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="folder-progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="upload-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Speed:</span>
|
|
<span class="stat-value" id="folder-upload-speed">0 KB/s</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Uploaded:</span>
|
|
<span class="stat-value" id="folder-uploaded-size">0 KB / 0 KB</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Remaining:</span>
|
|
<span class="stat-value" id="folder-time-remaining">calculating...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selected-files">
|
|
<h4>Folder Contents</h4>
|
|
<div class="file-list" id="folder-file-list"></div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}"
|
|
class="btn">Back to Browser</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
|
|
{% endblock %} |