Skip to content

File Upload Issue #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 15, 2024
Merged

File Upload Issue #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4601cf3
Editing Challenge files
SteveStef Mar 11, 2024
d9a6040
[feat] click author name to view profile
Laphatize Mar 11, 2024
1f29bd1
[merge] resolve merge conflicts
Laphatize Mar 11, 2024
f8305f1
Done file downloads and edits
SteveStef Mar 12, 2024
980de34
removed dead return home button in submission view
AbhiByreddy Mar 12, 2024
e2848e7
Teacher viewing student view bug fixed
SteveStef Mar 13, 2024
67b2b2e
Removed console.log and a rediect when not authed
SteveStef Mar 13, 2024
67787cf
Pushing to prod bug fixes
SteveStef Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/StandardNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export function StandardNav() {
try {
const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp';
const result = await request(endPoint, "GET", null);
console.log(result)
if (result) {
setPfp(result)
} else {
Expand All @@ -112,6 +111,7 @@ export function StandardNav() {
const result = await request(endPoint, 'GET', null);
if (!result || !result.length) return;

console.log("Here is the result");
console.log(result);

setNotificationData(
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboard/DashboardHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function DashboardHeader() {
<div className="mx-auto max-w-7xl ">
<div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
<div className="flex">
<a href="./settings">
<a href={`https://ctfguide.com/users/${username}`}>
{(pfp && (
<img
style={{ borderColor: '#ffbf00' }}
Expand Down
4 changes: 3 additions & 1 deletion src/components/dashboard/QuickSetttings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ export function QuickSettings() {
try {
request(`${process.env.NEXT_PUBLIC_API_URL}/account`, "GET", null)
.then((data) => {
document.getElementById('bio').value = data.bio;
if(document.getElementById('bio')) {
document.getElementById('bio').value = data.bio;
}
})
.catch((err) => {
console.log(err);
Expand Down
3 changes: 3 additions & 0 deletions src/components/groups/assignments/create-challenge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { MarkdownViewer } from '@/components/MarkdownViewer';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import fileApi from '@/utils/file-api';
import { getAuth } from 'firebase/auth';
import request from '@/utils/request';

const styles = {
Expand All @@ -18,6 +19,8 @@ const styles = {
h6: { fontSize: '1.2rem' },
};

const auth = getAuth();

export default function Createchall(props) {
const pages = [
{
Expand Down
164 changes: 137 additions & 27 deletions src/components/groups/assignments/updateChallengeInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import request from '@/utils/request';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import fileApi, { deleteFiles, getFileName, getFile } from '@/utils/file-api';
import { getAuth } from 'firebase/auth';
import fileApi from '@/utils/file-api';

const auth = getAuth();

Expand All @@ -30,6 +30,8 @@ const Editor = (props) => {
const [penaltyErr, setPenaltyErr] = useState('');
const [username, setUsername] = useState('anonymous');

const [existingFiles, setExistingFiles] = useState([]);

const [existingConfig, setExistingConfig] = useState('');
const [newConfig, setNewConfig] = useState('');
const [selectedFile, setSelectedFile] = useState(null);
Expand All @@ -50,28 +52,47 @@ const Editor = (props) => {
};

const sendToFileApi = async () => {
await uploadChallenge([]);
return;
const isValid = await validateNewChallege();
if (isValid) {
setIsCreating(true);
if (!selectedFile) {
await uploadChallenge('');
if(!validateNewChallege()) {
return;
}

const token = await auth.currentUser.accessToken;
setIsCreating(true);
let fileIds = [];
let idsToDelete = [];

for(let i = 0; i < existingFiles.length; i++) {
if(existingFiles[i].using) {
fileIds.push(existingFiles[i].fileId);
} else {
idsToDelete.push(existingFiles[i].fileId);
}
}

if(idsToDelete.length > 0) {
const res = await deleteFiles(idsToDelete, token);
if(!res) {
toast.error('Something went wrong with the file upload');
return;
}
}

if (selectedFile) {
const fileId = await fileApi(token, selectedFile);
if (fileId !== null) {
fileIds.push(fileId);
} else {
const token = await auth.currentUser.accessToken;
const fileId = await fileApi(token, selectedFile);
if(fileId !== null) {
await uploadChallenge(fileId);
} else {
toast.error('Something went wrong with the file upload');
}
toast.error('Something went wrong with the file upload');
return;
}
} else {
console.warn('Either the file, toke, or challenge is invalid');
}
await uploadChallenge(fileIds);
};

const downloadFile = async (fileId, filename) => {
await getFile(fileId, filename);
}

const uploadChallenge = async (fileIds) => {
const exConfig = existingConfig.replace('\n', ' && ');
const nConfig = newConfig.replace('\n', ' && ');
Expand All @@ -97,7 +118,6 @@ const Editor = (props) => {

const url = `${process.env.NEXT_PUBLIC_API_URL}/challenges/update-assignment-challenge`;
const data = await request(url, 'POST', challengeInfo);
//console.log(data);

if (data && data.success) {
window.location.href = ``;
Expand All @@ -108,13 +128,12 @@ const Editor = (props) => {
async function loadSolution() {
const url = `${process.env.NEXT_PUBLIC_API_URL}/challenges/solution/${props.challenge.id}/${props.classCode}`;
const data = await request(url, 'GET', null);
console.log(data);
if (data && data.success) {
setSolution(data.body.keyword);
}
}

function loadProps() {
async function loadProps() {
setClassCode(props.classCode);
setHints(props.challenge.hints);
setContentPreview(props.challenge.content);
Expand All @@ -133,13 +152,20 @@ const Editor = (props) => {
hintMessage.push(h[i].message);
hintPoints.push(h[i].penalty);
}

let tmp = [];
for (let i = 0; i < props.challenge.fileIds.length; i++) {
const name = await getFileName(props.challenge.fileIds[i]);
tmp.push({ name: name || "File " + i,
using: true, fileId: props.challenge.fileIds[i] });
}
setExistingFiles(tmp);

setPenalty(hintPoints);
setHints(hintMessage);
loadSolution();
}

console.log(hints);

useEffect(() => {
setUsername(localStorage.getItem('username'));
loadProps();
Expand Down Expand Up @@ -416,10 +442,77 @@ const Editor = (props) => {
<br></br>
</div>

<div className="px-5 py-1">
<h1>Import files from your computer</h1>

<label className="mt-4 flex h-32 w-full cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-neutral-600 bg-neutral-800 px-4 transition hover:border-neutral-500 focus:outline-none">








<div className="flex px-5">
<h1>Existing Challenge Files </h1>
<h1 style={{marginLeft:"35%"}}>Import files from your computer</h1>
</div>
<div className="px-5 py-1">
<div className="flex">

<label
style={{padding: "10px", width: "50%", overflowY: "auto"}}

className="mt-4 grid grid-cols-2 grid-flow-row h-32 gap-4 appearance-none justify-center rounded-md border-2 border-dashed border-neutral-600 bg-neutral-800 px-4 transition hover:border-neutral-500 focus:outline-none">
{existingFiles && existingFiles.length === 0 && (
<h1 className="text-white">No files attached</h1>
)}
{existingFiles && existingFiles.map((file, idx) => {
if(file.name.length > 24) {
file.name = file.name.substring(0, 24) + "...";
}
return(
<div
key={idx}
style={{maxHeight: "35px", fontSize: "13px"}}
className="rounded-lg bg-neutral-700 px-4 py-2 mb-2 text-white hover:bg-neutral-500/40">
<h1 className="flex">
<span
className="cursor-pointer hover:text-white-500"
onClick={() => {
let tmp = [...existingFiles];
tmp[idx].using = !tmp[idx].using;
setExistingFiles(tmp);
}}
>{file.name}{' '}</span>
<div className="py px-2">
{
file.using ? (
<i
style={{fontSize: "15px"}}
title="Completed!"
className="fas fa-check text-green-500"
></i>
) : (
<i
style={{fontSize: "15px"}}
title="Incomplete!"
className="fas fa-times text-red-500"
></i>
)
}
</div>
<div className="ml-auto">
<i
style={{fontSize: "15px"}}
onClick={() => downloadFile(file.fileId, file.name)}
className="cursor-pointer fas fa-download text-green-500 px-3">
</i>
</div>
</h1>
</div>
)})}
</label>

<label className="mt-4 flex h-32 w-1/2 cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-neutral-600 bg-neutral-800 px-4 transition hover:border-neutral-500 focus:outline-none">
<span className="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -448,16 +541,18 @@ const Editor = (props) => {
<input
style={{
position: 'absolute',
width: '57%',
width: '40%',
backgroundColor: 'yellow',
height: '13%',
}}
onChange={(e) => handleFileChange(e)}
type="file"
name="file_upload"
class="hidden"
className="hidden"
/>
</label>
</div>


<div className="bg-neutral-850 mb-10 mt-10 rounded-lg border border-neutral-500 px-4 py-2 text-white">
<b>🗒️ A note about file uploads</b>
Expand All @@ -468,10 +563,25 @@ const Editor = (props) => {
</div>
</div>















<button
onClick={sendToFileApi}
disabled={isCreating}
className="mr-2 mt-6 rounded-lg border-green-600 bg-green-900 px-4 py-2 text-2xl text-white shadow-lg hover:bg-green-800"
style={{margin: "10px"}}
>
<i class="fas fa-send"></i> { isCreating? "Updating..." : "Update Challenge" }
</button>
Expand Down
Loading