Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Intense pain

Browse Source 
- Fixed pfp upload text
This commit is contained in:
D3visionNL 2022-11-29 22:16:11 +01:00
parent 86ceaa5881
commit b5090c02ea
2 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/index.css
View File

@ -670,17 +670,18 @@ body:before{
.drop-container { .drop-container {
position: relative; position: relative;
display: flex; display: flex;
gap: 10px; gap: 2px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 200px; min-height: 200px;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
border: 2px dashed #555; border: 2px dashed #555;
color: var(--font-color); color: var(--font-color);
cursor: pointer; cursor: pointer;
transition: background .2s ease-in-out, border .2s ease-in-out; transition: background .2s ease-in-out, border .2s ease-in-out;
flex-wrap: nowrap;
} }
.drop-container:hover { .drop-container:hover {
@ -697,7 +698,7 @@ body:before{
} }
.drop-title { .drop-title {
font-size: 20px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
transition: color .2s ease-in-out; transition: color .2s ease-in-out;
@ -708,6 +709,7 @@ input[type=file] {
max-width: 100%; max-width: 100%;
padding: 5px; padding: 5px;
border: none !important; border: none !important;
display: none !important;
} }
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
@ -729,3 +731,14 @@ input[type=file]::file-selector-button {
input[type=file]::file-selector-button:hover { input[type=file]::file-selector-button:hover {
opacity: .8; opacity: .8;
} }
.fileName:empty{
display: none;
}
.fileName{
text-align: center;
overflow-wrap: anywhere;
}
.f-b0{
flex-basis: 0px !important;
}

19
src/pages/Home.js
View File

@ -86,6 +86,7 @@ const Profile = () => {
const [user] = useLoginContext(); const [user] = useLoginContext();
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const fileSelector = useRef(); const fileSelector = useRef();
const [fileName, setFileName] = useState(null);
const [error, setError] = useState(null); const [error, setError] = useState(null);
// For some reason this has to be done for onDrop to work // For some reason this has to be done for onDrop to work
@ -100,10 +101,16 @@ const Profile = () => {
if (!dataTransfer.files.length) return; if (!dataTransfer.files.length) return;
const [file] = dataTransfer.files; const [file] = dataTransfer.files;
fileSelector.value = file.name; console.log(file.name);
setFileName(`Selected: ${file.name}`);
setFile(file); setFile(file);
}; };
const fileGarbage = (event) => {
setFile(event.target.files[0]);
setFileName(`Selected: ${event.target.files[0].name}`);
};
const submit = async ({target: button}) => { const submit = async ({target: button}) => {
button.disabled = true; button.disabled = true;
if (!file) return; if (!file) return;
@ -127,13 +134,15 @@ const Profile = () => {
<p><b>Profile Picture</b></p> <p><b>Profile Picture</b></p>
<img width={256} height={256} src={`/api/users/${user.id}/avatar`} /> <img width={256} height={256} src={`/api/users/${user.id}/avatar`} />
</div> </div>
<div className="f-g"> <div className="f-g f-b0">
<p><b>Change Profile Picture</b></p> <p><b>Change Profile Picture</b></p>
<form className="f-g"> <form className="f-g f-b0">
<label onDrop={onDrop} onDragOver={onDragOver} htmlFor="pfp_upload" className="drop-container"> <label onDrop={onDrop} onDragOver={onDragOver} htmlFor="pfp_upload" className="drop-container">
<span className="drop-title">Drop your file here</span> <span className="drop-title">Drag &apos;n&apos; drop a file here</span>
or or
<input ref={fileSelector} onChange={(event) => setFile(event.target.files[0])} <span className="drop-title">Click to select a file</span>
<p className="fileName m-0">{fileName}</p>
<input ref={fileSelector} onChange={(event) => fileGarbage(event)}
type="file" id="pfp_upload" accept="image/*" required></input> type="file" id="pfp_upload" accept="image/*" required></input>
</label> </label>
<button onClick={submit} className="button primary mt-3">Submit</button> <button onClick={submit} className="button primary mt-3">Submit</button>