Used media
--
+
-
-
App Icon by flaticon.com
- NajmunNahar +Icons used:
+ Fontawesome +
+ -
+
HTML, CSS, JS Libraries used:
+ TailwindCSS, + AXIOS http, + TailwindCSS Animations +
+ -
+
App Icon by flaticon.com
+ NajmunNahar
+ 
+ 
+
diff --git a/frontend/src/app/upload/upload.component.html b/frontend/src/app/upload/upload.component.html
index 2be1da3..f3616be 100644
--- a/frontend/src/app/upload/upload.component.html
+++ b/frontend/src/app/upload/upload.component.html
@@ -1,34 +1,66 @@
+
+Upload Your File
-
+
+
+
-
-
+
+
+
-
+
+
+
+
Drag and drop your files here or browse
- + +
+ 
+
+ {{ fileToUpload.name }}
+{{ fileToUpload.size | formatFileSizePipe }}
-
- Store for only one hour
+
+
-
- Allow only one download
+
+
-
- Protect download with password
+
+
Drag and drop files, or click to select the files you want to share.
+
+
+
+ {{ uploadProgress | number:'1.0-0' }}%
+ Uploading {{ fileToUpload.name }}...
+
+ 
+
+ File uploaded successfully!
+Drag and drop files, or click to select the files you want to share.
+
+
+
diff --git a/frontend/src/app/upload/upload.component.ts b/frontend/src/app/upload/upload.component.ts
index 0324250..316b99e 100644
--- a/frontend/src/app/upload/upload.component.ts
+++ b/frontend/src/app/upload/upload.component.ts
@@ -1,12 +1,169 @@
-import { Component } from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {DecimalPipe, NgIf} from "@angular/common";
+import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe";
+import {FormsModule} from "@angular/forms";
+import axios, {AxiosProgressEvent} from "axios";
+import { DevelopmentStore } from '../../store/DevelopmentStore';
@Component({
selector: 'app-upload',
standalone: true,
- imports: [],
+ imports: [
+ NgIf,
+ FormatFileSizePipePipe,
+ FormsModule,
+ DecimalPipe
+ ],
templateUrl: './upload.component.html',
styleUrl: './upload.component.scss'
})
export class UploadComponent {
+ @ViewChild('fileInput') fileInput!: ElementRef;
+ fileToUpload: File | null = null;
+
+ shortStorage: boolean = false;
+ singleDownload: boolean = false;
+ fileDescription: string = '';
+ passwordProtected: boolean = false;
+ password: string = 'nigga123';
+
+ uploadStarted: boolean = false;
+ uploadProgress = 0; // Real progress
+ targetUploadProgress = 0; // New target progress to reach
+ uploadFinished = false;
+ uploadSpeedBps: number = 0;
+
+
+
+ constructor(private developmentStore: DevelopmentStore) {
+ this.uploadSpeedTest();
+ }
+
+ /**
+ * Manages the file input click or drag and drop
+ */
+ onFileSelected(event: any): void {
+ const files = event.target.files;
+ if (files && files.length > 0) {
+ this.handleFiles(files);
+ }
+ }
+ onDragOver(event: DragEvent): void {
+ event.preventDefault();
+ event.stopPropagation();
+ // Optionally add visual feedback
+ }
+ onDrop(event: DragEvent): void {
+ event.preventDefault();
+ event.stopPropagation();
+ const files = event.dataTransfer?.files;
+ if (files && files.length > 0) {
+ this.handleFiles(files);
+ }
+ // Remove visual feedback
+ }
+ handleFiles(files: FileList): void {
+ for(let i = 0; i < files.length; i++) {
+ const file = files[i];
+ this.fileToUpload = file;
+ }
+ this.calculateEstimatedUploadTime();
+ }
+
+ startUpload(): void {
+ if (this.fileToUpload) {
+ console.log(`Uploading file: ${this.fileToUpload.name}, Short storage: ${this.shortStorage}, Single download: ${this.singleDownload}, Password protected: ${this.passwordProtected}`);
+ this.uploadStarted = true;
+ const formData = this.buildFormDataObject();
+
+ const config = {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ 'Access-Control-Allow-Origin': '*', // Allow CORS
+ },
+ onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+ if (progressEvent.total) {
+ this.targetUploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
+ } else {
+ this.uploadProgress = 99; // Unable to compute progress since total size is unknown
+ console.error('Unable to compute progress since total size is unknown');
+ }
+ this.smoothProgressUpdate();
+ }
+ };
+
+ axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
+ .then(response => {
+ console.log('Upload completed successfully:', response.data);
+ this.uploadFinished = true;
+ })
+ .catch(error => {
+ console.error('Upload failed:', error.response ? error.response.data : error.message);
+ });
+ }
+ }
+
+ buildFormDataObject(): FormData {
+ const formData = new FormData();
+ formData.append('file', this.fileToUpload as Blob);
+ formData.append('password', this.passwordProtected ? this.password : '');
+ formData.append('singleDownload', this.singleDownload.toString());
+ formData.append('shortStorage', this.shortStorage.toString());
+ formData.append('fileDescription', this.fileDescription);
+ return formData;
+ }
+
+ private uploadSpeedTest() {
+ const start = new Date().getTime(); // Start timer
+
+ // Create a 1MB payload for upload
+ const payload = new ArrayBuffer(1024 * 1024); // 1MB
+ const uint8View = new Uint8Array(payload);
+ for (let i = 0; i < uint8View.length; i++) {
+ uint8View[i] = 0;
+ }
+
+ axios({
+ method: 'post',
+ url: 'http://localhost/api/v1/upload-speed-test',
+ data: uint8View,
+ headers: {
+ 'Content-Type': 'application/octet-stream',
+ 'Access-Control-Allow-Origin': '*', // Allow CORS
+ },
+ onUploadProgress: function(progressEvent) {
+ // Optional: handle progress events for feedback
+ }
+ })
+ .then(response => {
+ const end = new Date().getTime(); // End timer
+ const duration = (end - start) / 1000; // Convert ms to seconds
+ const bitsUploaded = payload.byteLength * 8;
+ this.uploadSpeedBps = bitsUploaded / duration;
+ console.log("Speed test ping finished.");
+ })
+ .catch(error => {
+ console.error('Error during upload test:', error);
+ });
+ }
+
+ private calculateEstimatedUploadTime() : void {
+ const fileSize = this.fileToUpload?.size;
+ const uploadSpeed = this.uploadSpeedBps / 8; // Convert bits per second to bytes per second
+ if (fileSize && uploadSpeed) {
+ const estimatedTimeInSeconds = fileSize / uploadSpeed;
+ console.log(`Estimated upload time: ${estimatedTimeInSeconds} seconds`);
+ }
+ }
+
+ smoothProgressUpdate() {
+ if (this.uploadProgress < this.targetUploadProgress) {
+ this.uploadProgress += 0.01 * (this.targetUploadProgress - this.uploadProgress);
+ requestAnimationFrame(this.smoothProgressUpdate.bind(this));
+ } else if (this.uploadProgress > this.targetUploadProgress) {
+ // Handle overshoot
+ this.uploadProgress = this.targetUploadProgress;
+ }
+ }
}
diff --git a/frontend/src/assets/circle-check-solid.svg b/frontend/src/assets/circle-check-solid.svg
new file mode 100644
index 0000000..504bf80
--- /dev/null
+++ b/frontend/src/assets/circle-check-solid.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/assets/file-solid.svg b/frontend/src/assets/file-solid.svg
new file mode 100644
index 0000000..f953184
--- /dev/null
+++ b/frontend/src/assets/file-solid.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/store/DevelopmentStore.ts b/frontend/src/store/DevelopmentStore.ts
new file mode 100644
index 0000000..4ae2945
--- /dev/null
+++ b/frontend/src/store/DevelopmentStore.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+/**
+ * THIS IS NOT A OBSERVABLE STORE.
+ * This store automatically identifies if the env is production or development.
+ * If this app is running on development mode, it will add port 80 to the base url.
+ */
+export class DevelopmentStore {
+ private isDevelopment: boolean;
+
+ constructor() {
+ this.isDevelopment = location.port === '4200';
+ }
+
+ getIsDevelopment(): boolean {
+ return this.isDevelopment;
+ }
+
+ getBaseUrl(): string {
+ if (this.isDevelopment) {
+ return 'http://localhost:80/';
+ } else {
+ return window.location.origin;
+ }
+ }
+}
diff --git a/src/main/java/de/w665/sharepulse/config/CorsConfig.java b/src/main/java/de/w665/sharepulse/config/CorsConfig.java
new file mode 100644
index 0000000..37f5971
--- /dev/null
+++ b/src/main/java/de/w665/sharepulse/config/CorsConfig.java
@@ -0,0 +1,22 @@
+package de.w665.sharepulse.config;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Profile;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+@Profile("development")
+public class CorsConfig implements WebMvcConfigurer {
+
+ // NEVER LEAVE THIS CONFIGURATION IN PRODUCTION
+ @Override
+ public void addCorsMappings(CorsRegistry registry) {
+ System.out.println("CORS CONFIGURATION ENABLED | DEVELOPMENT PROFILE");
+ System.out.println("IF YOU SEE THIS MESSAGE IN PRODUCTION, PLEASE DISABLE DEVELOPEMENT MODE IN APPLICATION.PROPERTIES");
+ registry.addMapping("/api/v1/**")
+ .allowedOrigins("*")
+ .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
+ .allowedHeaders("*");
+ }
+}
diff --git a/src/main/java/de/w665/sharepulse/rest/mappings/SpeedTest.java b/src/main/java/de/w665/sharepulse/rest/mappings/SpeedTest.java
index 8a3a71c..2abd779 100644
--- a/src/main/java/de/w665/sharepulse/rest/mappings/SpeedTest.java
+++ b/src/main/java/de/w665/sharepulse/rest/mappings/SpeedTest.java
@@ -1,12 +1,16 @@
package de.w665.sharepulse.rest.mappings;
import de.w665.sharepulse.rest.ApiRestController;
+import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
+import java.io.InputStream;
@Slf4j
@RestController
@@ -18,7 +22,7 @@ public class SpeedTest extends ApiRestController {
*/
@GetMapping("/speed-test")
public void speedTest(HttpServletResponse response) {
- byte[] dummyData = new byte[1024 * 1024];
+ byte[] dummyData = new byte[1024 * 1024 / 2];
response.setContentType("application/octet-stream");
response.setContentLength(dummyData.length);
response.setStatus(HttpServletResponse.SC_OK);
@@ -30,4 +34,23 @@ public class SpeedTest extends ApiRestController {
return;
}
}
+
+ @PostMapping("/upload-speed-test")
+ public void uploadSpeedTest(HttpServletRequest request, HttpServletResponse response) {
+ final int maxBytes = 1024 * 1024 / 2; // Limit to 0.5MB
+ byte[] buffer = new byte[1024]; // Buffer to read data
+ int bytesRead;
+ int totalBytesRead = 0;
+
+ try (InputStream inputStream = request.getInputStream()) {
+ while ((bytesRead = inputStream.read(buffer)) != -1 && totalBytesRead < maxBytes) {
+ totalBytesRead += bytesRead;
+ }
+ response.setStatus(HttpServletResponse.SC_OK);
+ } catch (IOException e) {
+ log.error("Upload speed test failed.", e);
+ response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
+ }
+ }
+
}
diff --git a/src/main/java/de/w665/sharepulse/rest/mappings/Upload.java b/src/main/java/de/w665/sharepulse/rest/mappings/Upload.java
index ee14611..e887ec5 100644
--- a/src/main/java/de/w665/sharepulse/rest/mappings/Upload.java
+++ b/src/main/java/de/w665/sharepulse/rest/mappings/Upload.java
@@ -30,6 +30,9 @@ public class Upload extends ApiRestController {
@RequestParam(value = "password", required = false) String password,
@RequestParam(value = "singleDownload", defaultValue = "false") boolean singleDownload,
@RequestParam(value = "fileDescription", required = false) String fileDescription) {
+
+ // TODO: Handle shortStorage0
+
if (file.isEmpty()) {
log.debug("User tried to upload an empty file. IP: " + request.getRemoteAddr());
return new ResponseEntity<>("Please select a file to upload.", HttpStatus.NOT_ACCEPTABLE);
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 05b0892..ce36a92 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -22,3 +22,6 @@ rethinkdb.database=sharepulse
# Miscellaneous
server.port=80
spring.application.name=sharepulse
+
+# Spring profiles (Options: development, production) (Controls cors)
+spring.profiles.active=development
\ No newline at end of file
+