zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

finishing up drag-n-drop code, use param for filename with site_file/text_editor

Browse source
This commit is contained in:
Kyle Drake 2024-03-08 11:53:51 -06:00
parent 943271b509
commit f6af2cbbcf
7 changed files with 196 additions and 399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/api.rb
View file

@ -102,12 +102,12 @@ post '/api/upload' do
end
if current_site.too_many_files?(files.length)
api_error 400, 'too_many_files', "cannot exceed the maximum site files limit (#{current_site.plan_feature(:maximum_site_files)}), #{current_site.supporter? ? 'please contact support' : 'please upgrade to a supporter account'}"
api_error 400, 'too_many_files', "cannot exceed the maximum site files limit (#{current_site.plan_feature(:maximum_site_files)})"
end
files.each do |file|
if !current_site.okay_to_upload?(file)
api_error 400, 'invalid_file_type', "#{file[:filename]} is not a valid file type (or contains not allowed content) for this site, please upgrade to a supporter account to upload this file type"
api_error 400, 'invalid_file_type', "#{file[:filename]} is not a allowed file type for free sites, supporter required"
end
if File.directory? file[:filename]

10
app/dashboard.rb
View file

@ -8,7 +8,7 @@ get '/dashboard' do
current_site.save_changes validate: false
end
erb :'dashboard'
erb :'dashboard/index'
end
def dashboard_init
@ -30,3 +30,11 @@ def dashboard_init
@dir = params[:dir]
@file_list = current_site.file_list @dir
end
get '/dashboard/files' do
require_login
dashboard_init
dont_browser_cache
erb :'dashboard/files', layout: false
end

9
app/site_files.rb
View file

@ -177,7 +177,16 @@ get %r{\/site_files\/text_editor\/(.+)} do
dont_browser_cache
@filename = params[:captures].first
redirect '/site_files/text_editor?filename=' + Rack::Utils.escape(@filename)
end
get '/site_files/text_editor' do
require_login
dont_browser_cache
@filename = params[:filename]
extname = File.extname @filename
@ace_mode = case extname
when /htm|html/ then 'html'
when /js/ then 'javascript'

167
public/js/dashboard.js
View file

@ -11,13 +11,16 @@ function uploadFileFromButton() {
formData.append('from_button', $(form).find('input[name="from_button"]').val());
formData.append('dir', dirValue);
uploadFilesCount = 0
// Append files with modified filenames
$.each($('#uploadFiles')[0].files, function(i, file) {
var modifiedFileName = dirValue + '/' + file.name;
formData.append(modifiedFileName, file);
uploadFilesCount++;
});
// Submit the form data using jQuery's AJAX
alertClear();
$.ajax({
url: '/api/upload',
type: 'POST',
@ -25,12 +28,15 @@ function uploadFileFromButton() {
contentType: false, // This is required for FormData
processData: false, // This is required for FormData
success: function(data) {
console.log('Files successfully uploaded.');
location.reload()
alertType('success');
alertAdd(uploadFilesCount+' files uploaded successfully.');
reloadDashboardFiles();
},
error: function(xhr, status, error) {
console.error('Upload failed: ' + error);
location.reload()
var responseBody = JSON.parse(xhr.responseText);
alertType('error');
alertAdd(responseBody.message);
reloadDashboardFiles();
}
});
}
@ -40,9 +46,9 @@ $('#uploadFiles').change(function() {
});
var uploadForm = $('#uploadFilesButtonForm')[0];
var deleteForm = $('#deleteFilenameForm')[0];
var deleteForm = $('#deleteFilenameForm')[0];
function moveFileToFolder(event) {
function moveFileToFolder(event) {
var link = event.dataTransfer.getData("Text");
if(link) link = link.trim();
if(!link || link.startsWith('https://neocities.org/dashboard')) return;
@ -86,79 +92,60 @@ var uploadForm = $('#uploadFilesButtonForm')[0];
});
};
oReq.send();
}
}
function confirmFileRename(path) {
console.log(path)
function confirmFileRename(path) {
$('#renamePathInput').val(path);
$('#renameNewPathInput').val(path);
$('#renameModal').modal();
}
}
function confirmFileDelete(name) {
function confirmFileDelete(name) {
$('#deleteFileName').text(name);
$('#deleteConfirmModal').modal();
}
}
function fileDelete() {
function fileDelete() {
$('#deleteFilenameInput').val($('#deleteFileName').html());
$('#deleteFilenameForm').submit();
}
}
function clickUploadFiles() {
function clickUploadFiles() {
$("input[id='uploadFiles']").click()
}
}
function showUploadProgress() {
function showUploadProgress() {
$('#uploadingOverlay').css('display', 'block')
}
}
function hideUploadProgress() {
function hideUploadProgress() {
$('#progressBar').css('display', 'none')
$('#uploadingOverlay').css('display', 'none')
}
}
allUploadsComplete = false
/*
this.on("totaluploadprogress", function(progress, totalBytes, totalBytesSent) {
if(progress == 100)
allUploadsComplete = true
showUploadProgress()
$('#progressBar').css('display', 'block')
$('#uploadingProgress').css('width', progress+'%')
})
*/
allUploadsComplete = false
$('#createDir').on('shown', function () {
$('#createDir').on('shown', function () {
$('#newDirInput').focus();
})
})
$('#createFile').on('shown', function () {
$('#createFile').on('shown', function () {
$('#newFileInput').focus();
})
})
function listView() {
function listView() {
if(localStorage)
localStorage.setItem('viewType', 'list')
$('#filesDisplay').addClass('list-view')
}
}
function iconView() {
function iconView() {
if(localStorage)
localStorage.removeItem('viewType')
$('#filesDisplay').removeClass('list-view')
}
}
// Drop handler function to get all files
async function getAllFileEntries(dataTransferItemList) {
@ -210,8 +197,21 @@ async function uploadFile(file, dir, additionalFormData) {
formData.append(key, value);
}
// Append the file to the FormData, using the file name as key
var modifiedFileName = dir + '/' + file.webkitRelativePath || file.name;
var modifiedFileName;
if (file.webkitRelativePath === '') {
modifiedFileName = file.name;
} else {
modifiedFileName = file.webkitRelativePath;
}
if (dir && dir !== '/') {
modifiedFileName = dir.replace(/^\//, '') + '/' + modifiedFileName;
}
modifiedFileName = modifiedFileName.replace(/^\//, '');
console.log('modifiedFileName: '+modifiedFileName)
formData.append(modifiedFileName, file, modifiedFileName);
$('#uploadFileName').text(modifiedFileName).prepend('<i class="icon-file"></i> ');
@ -223,9 +223,17 @@ async function uploadFile(file, dir, additionalFormData) {
body: formData,
});
const result = await response.json();
console.log('Upload successful for', file.name, result);
if (result.result == 'error') {
fileUploadErrorCount++;
if(fileUploadErrorCount == 1) {
alertType('error');
}
alertAdd(result.message);
} else {
fileUploadSuccessCount++;
}
} catch (err) {
console.error('Upload error for', file.name, err);
}
}
@ -238,6 +246,8 @@ async function processEntry(entry, dir, additionalFormData) {
}
async function uploadFiles(fileEntries) {
alertClear();
// Collect additional form data
const form = document.getElementById('dropzone');
let additionalFormData = {};
@ -254,6 +264,8 @@ async function uploadFiles(fileEntries) {
$('#progressBar').css('display', 'block')
fileUploadCount = 0
fileUploadErrorCount = 0
fileUploadSuccessCount = 0
for (let entry of fileEntries) {
await processEntry(entry, dir, additionalFormData);
@ -263,18 +275,57 @@ async function uploadFiles(fileEntries) {
}
allUploadsComplete = true
location.reload();
if(fileUploadErrorCount > 0) {
alertAdd(fileUploadSuccessCount+'/'+fileUploadCount+' files uploaded successfully.');
} else {
alertType('success')
alertAdd(fileUploadSuccessCount+' files uploaded successfully.');
}
reloadDashboardFiles();
}
var elDrop = document.getElementById('dropzone');
function reInitDashboardFiles() {
var elDrop = document.getElementById('dropzone');
elDrop.addEventListener('dragover', function (event) {
elDrop.addEventListener('dragover', function (event) {
event.preventDefault();
});
});
elDrop.addEventListener('drop', async function (event) {
elDrop.addEventListener('drop', async function (event) {
event.preventDefault();
showUploadProgress();
let items = await getAllFileEntries(event.dataTransfer.items);
await uploadFiles(items);
});
});
}
function reloadDashboardFiles() {
$.get('/dashboard/files?dir='+encodeURIComponent($("#dir").val()), function(data) {
$('#filesDisplay').html(data);
reInitDashboardFiles();
});
}
function alertAdd(text) {
var a = $('#alertDialogue');
a.css('display', 'block');
a.append(text+'<br>');
}
function alertClear(){
var a = $('#alertDialogue');
a.css('display', 'none');
a.text('');
}
function alertType(type){
var a = $('#alertDialogue');
a.removeClass('alert-success');
a.removeClass('alert-error');
a.addClass('alert-'+type);
}
// for first time load
reInitDashboardFiles();

2
sass/_project-sass/_project-Base.scss
View file

@ -60,7 +60,7 @@ a{
@import 'project-Footer'; // Project Specific Footer Styling
.alert-error {
background-color:#F5BA00; color:#fff;
background-color:#f39c12; color:#fff;
}
.modal {

2
tests/site_file_tests.rb
View file

@ -410,7 +410,7 @@ describe 'site_files' do
it 'fails with unsupported file' do
upload 'flowercrime.wav' => Rack::Test::UploadedFile.new('./tests/files/flowercrime.wav', 'audio/x-wav')
_(JSON.parse(last_response.body)['message']).must_match /please upgrade to a supporter account/i
_(JSON.parse(last_response.body)['error_type']).must_equal 'invalid_file_type'
_(File.exists?(@site.files_path('flowercrime.wav'))).must_equal false
_(@site.site_changed).must_equal false
end

271
views/dashboard.erb
View file

@ -1,271 +0,0 @@
<style>
.dz-default {
display: none;
}
.dz-preview {
display: none;
}
.dz-processing {
display: none;
}
.dz-error {
display: none;
}
.dz-image-preview {
display: none;
}
</style>
<div class="header-Outro with-site-image dashboard">
<div class="row content wide">
<div class="col col-50 signup-Area">
<div class="signup-Form">
<fieldset class="content">
<a href="<%= current_site.uri %>" class="screenshot dashboard" style="background-image:url(<%= current_site.screenshot_url('index.html', '540x405') %>);"></a>
</fieldset>
</div>
</div>
<div class="col col-50">
<h2 class="eps"><%= current_site.title %></h2>
<p class="site-url">
<a href="<%= current_site.uri %>" target="_blank"><%= current_site.host %></a>
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site} %>'><i class="fa fa-share-alt"></i> <span>Share</span></a>
</p>
<ul>
<% if current_site.site_updated_at %>
<li>Last updated <%= current_site.site_updated_at.ago.downcase %></li>
<% end %>
<li>Using <strong><%= current_site.space_percentage_used %>% (<%= current_site.total_space_used.to_space_pretty %>) of your <%= current_site.maximum_space.to_space_pretty %></strong>.
<br>
<% unless current_site.is_education || current_site.supporter? %>Need more space? <a href="/supporter">Become a Supporter!</a><% end %></li>
<li><strong><%= current_site.views.format_large_number %></strong> views</li>
</ul>
</div>
</div> <!-- end .row -->
</div> <!-- end .header-Outro -->
<main class="content-Base" role="main">
<div class="content wide">
<% unless current_site.changed_count >= 1 %>
<div class="welcome">
<!-- <div class="close-button"></div> -->
<h4>Hello! Welcome to your new site.</h4>
To get started, click on the <strong>index.html</strong> file below to edit your home page. Once you make changes your website will begin appearing in our <a href="/browse">website gallery</a>. You can add more files (such as images) by dragging them from your computer into the box below. Need help building web sites? Try our <a href="/tutorial/html/">HTML tutorial</a>!
</div>
<% end %>
<%== flash_display %>
<div id="filesDisplay" class="files">
<div id="uploadingOverlay" class="uploading-overlay" style="display: none">
<div class="uploading">
<p>Uploading, please wait...</p>
<p id="uploadFileName"></p>
<div id="progressBar" class="progress-bar" style="display: none"><div id="uploadingProgress" class="progress" style="width: 0%"></div></div>
</div>
</div>
<div id="movingOverlay" class="uploading-overlay" style="display: none">
<div class="uploading">
<p>Moving file, please wait...</p>
</div>
</div>
<div class="header">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default iconview-button" title="Icon View" onclick="iconView()"><i class="fa fa-th"></i></button>
<button type="button" class="btn btn-default listview-button" title="List View" onclick="listView()"><i class="fa fa-list"></i></button>
</div>
<div class="breadcrumbs">
<% if params[:dir].nil? || params[:dir].empty? || params[:dir] == '/' %>
Home
<% else %>
<a href="/dashboard">Home</a>
<% end %>
<% if @dir %>
<% dir_array = @dir.split '/' %>
<% dir_array.each_with_index do |dir,i| %>
<% if i+1 < dir_array.length %>
<a href="/dashboard?dir=<%= Rack::Utils.escape dir_array[1..i].join('/') %>"><%= dir %></a> <i class="fa fa-angle-right"></i>
<% else %>
<%= dir %>
<% end %>
<% end %>
<% end %>
</div>
<div class="actions">
<a href="#createFile" class="btn-Action" data-toggle="modal"><i class="fa fa-file"></i> New File</a>
<a href="#createDir" class="btn-Action" data-toggle="modal"><i class="fa fa-folder"></i> New Folder</a>
<a href="#" class="btn-Action" onclick="clickUploadFiles(); return false"><i class="fa fa-arrow-circle-up"></i> Upload</a>
</div>
</div>
<div class="list">
<form action="/site_files/upload" id="dropzone">
<div class="dz-message" style="display: none"></div>
<input name="csrf_token" type="hidden" value="<%= csrf_token %>">
<input name="dir" type="hidden" value="<%= @dir %>">
<div class="upload-Boundary <%= @file_list.length <= 5 ? 'with-instruction' : '' %>">
<% @file_list.each do |file| %>
<div class="file filehover">
<% if file[:is_html] && current_site.screenshot_exists?(file[:path], '210x158') %>
<div class="html-thumbnail html fileimagehover">
<img src="<%= current_site.screenshot_url(file[:path], '210x158') %>" alt="">
<div class="overlay"></div>
</div>
<% elsif file[:is_image] && current_site.thumbnail_exists?(file[:path], '210x158') %>
<div class="html-thumbnail image fileimagehover">
<img src="<%= current_site.thumbnail_url(file[:path], '210x158') %>" alt="">
<div class="overlay"></div>
</div>
<% elsif file[:is_directory] %>
<div class="html-thumbnail folder fileimagehover" ondrop="moveFileToFolder(event)">
<div class="folder-icon"></div>
<div class="overlay"></div>
</div>
<% else %>
<div class="html-thumbnail misc fileimagehover">
<div class="misc-icon"><%= file[:ext][0..3] %></div>
<div class="overlay"></div>
</div>
<% end %>
<a class="title">
<%= file[:name] %>
</a>
<div class="column size">
<% if file[:size] %>
<%= file[:size].to_bytes_pretty %>
<% end %>
</div>
<div class="column updated">
<% if file[:updated_at] %>
<%= file[:updated_at].ago %>
<% end %>
</div>
<div class="overlay">
<div id="<%= Digest::SHA256.hexdigest file[:path] %>" style="display: none"><%= file[:path] %></div>
<% if file[:is_editable] %>
<a href="/site_files/text_editor/<%= file[:path] %>"><i class="fa fa-edit" title="Edit"></i> Edit</a>
<% end %>
<% if file[:is_directory] %>
<a href="?dir=<%= Rack::Utils.escape file[:path] %>"><i class="fa fa-edit" title="Manage"></i> Manage</a>
<% end %>
<% if !file[:is_root_index] %>
<a href="#" onclick="confirmFileRename($('#<%= Digest::SHA256.hexdigest file[:path] %>').text())"><i class="fa fa-file" title="Rename"></i> Rename</a>
<a href="#" onclick="confirmFileDelete($('#<%= Digest::SHA256.hexdigest file[:path] %>').text())"><i class="fa fa-trash" title="Delete"></i> Delete</a>
<% end %>
<% if file[:is_directory] %>
<a class="link-overlay" href="?dir=<%= Rack::Utils.escape file[:path] %>" title="View <%= file[:path] %>"></a>
<% else %>
<a class="link-overlay" href="<%= current_site.file_uri file[:path] %>" title="View <%= file[:path] == '/index.html' ? 'your site index' : file[:path] %>" target="_blank"></a>
<% end %>
</div>
</div>
<% end %>
</div>
</form>
</div>
</div>
<form method="POST" action="/site_files/delete" id="deleteFilenameForm">
<input name="csrf_token" type="hidden" value="<%= csrf_token %>">
<input type="hidden" id="deleteFilenameInput" name="filename">
</form>
<div class="modal hide fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
<h3 id="deleteConfirmModalLabel">Confirm deletion</h3>
</div>
<div class="modal-body">
<p>You are about to delete <strong><span id="deleteFileName"></span></strong>. Are you sure?</p>
</div>
<div class="modal-footer">
<button class="btn cancel" data-dismiss="modal" aria-hidden="true" type="button">Cancel</button>
<button class="btn-Action btn-danger" type="button" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</button>
</div>
</div>
<div class="modal hide fade" id="renameModal" tabindex="-1" role="dialog" aria-labelledby="renameModalLabel" aria-hidden="true">
<form method="post" action="/site_files/rename">
<input type="hidden" value="<%= csrf_token %>" name="csrf_token">
<input type="hidden" value="<%= @dir %>" name="dir">
<input type="hidden" id="renamePathInput" name="path">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
<h3 id="renameModalLabel">Rename / Move</h3>
</div>
<div class="modal-body">
<input id="renameNewPathInput" name="new_path" type="text">
<p>Note: We will automatically scrub any characters not matching: a-z A-Z 0-9 _ - .</p>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn-Action">Rename</button>
</div>
</form>
</div>
<div class="site-actions" style="margin-bottom:25px">
<% if !current_site.plan_feature(:no_file_restrictions) %>
<a href="/site_files/allowed_types">Allowed file types</a> |
<% end %>
<a href="/site_files/download">Download entire site</a> |
<% unless is_education? %>
<a href="/site_files/mount_info">Mount your site as a drive on your computer</a>
<% end %>
</div>
</div>
</main>
<form id="uploadFilesButtonForm" method="POST" action="/api/upload" enctype="multipart/form-data" style="display: none" onsubmit="event.preventDefault(); showUploadProgress(); uploadFileFromButton();">
<input name="csrf_token" type="hidden" value="<%= csrf_token %>">
<input name="from_button" type="hidden" value="true">
<input name="dir" type="hidden" id="dir" value="<%= @dir %>">
<input id="uploadFiles" type="file" name="file" multiple>
</form>
<div class="modal hide fade" id="createDir" tabindex="-1" role="dialog" aria-labelledby="createDirLabel" aria-hidden="true">
<form method="post" action="/site/create_directory">
<input type="hidden" value="<%= csrf_token %>" name="csrf_token">
<input type="hidden" value="<%= @dir %>" name="dir">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
<h3 id="createDirLabel">Create Folder</h3>
</div>
<div class="modal-body">
<input id="newDirInput" name="name" type="text" placeholder="folder_name">
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn-Action">Create</button>
</div>
</form>
</div>
<div class="modal hide fade" id="createFile" tabindex="-1" role="dialog" aria-labelledby="createFileLabel" aria-hidden="true">
<form method="post" action="/site_files/create">
<input type="hidden" value="<%= csrf_token %>" name="csrf_token">
<input type="hidden" value="<%= @dir %>" name="dir">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
<h3 id="createFileLabel">Create New File</h3>
</div>
<div class="modal-body">
<input id="newFileInput" name="filename" type="text" placeholder="newfile.html">
<p>Note: We will automatically scrub any characters not matching: a-z A-Z 0-9 _ - .</p>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn-Action">Create</button>
</div>
</form>
</div>
<script src="/js/dashboard.js"><script>