mirror of
https://github.com/voltbonn/profile-picture-generator.git
synced 2024-12-21 23:35:05 +00:00
added drop support: Just drop a file anywhere to use it
This commit is contained in:
thomasrosen
parent
497ba9f9d4
commit
2a792ab426
4 changed files with 79 additions and 4 deletions
|
|
@ -11,6 +11,7 @@
|
|||
"merge-images": "^2.0.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-dropzone": "^11.2.4",
|
||||
"react-scripts": "4.0.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
|
|
|
|||
26
src/App.css
26
src/App.css
|
|
@ -91,3 +91,29 @@ button:hover,
|
|||
.labelButton span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.droparea{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: calc(10px + 10vmin);
|
||||
|
||||
background: rgba(20, 0, 34, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.droparea.active{
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
30
src/App.js
30
src/App.js
|
|
@ -1,6 +1,7 @@
|
|||
import { useState, useEffect, useCallback } from 'react'
|
||||
import './App.css'
|
||||
import download from 'downloadjs'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import FrameChooser from './FrameChooser.js'
|
||||
import HeaderImage from './HeaderImage.svg'
|
||||
|
||||
|
|
@ -18,7 +19,8 @@ function App() {
|
|||
setFrameURL(newFrameURL)
|
||||
}, [setFrameURL])
|
||||
|
||||
const handleImage = useCallback(files_event => {
|
||||
|
||||
const handleReadFile = useCallback(file => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = reader_event => {
|
||||
const img = new Image()
|
||||
|
|
@ -52,8 +54,24 @@ function App() {
|
|||
img.src = reader_event.target.result
|
||||
setOriginalPhoto(reader_event.target.result)
|
||||
}
|
||||
reader.readAsDataURL(files_event.target.files[0])
|
||||
}, [setPhoto])
|
||||
reader.readAsDataURL(file)
|
||||
}, [])
|
||||
|
||||
const handleImage = useCallback(files_event => {
|
||||
handleReadFile(files_event.target.files[0])
|
||||
}, [handleReadFile])
|
||||
|
||||
const onDrop = useCallback(acceptedFiles => {
|
||||
handleReadFile(acceptedFiles[0])
|
||||
}, [handleReadFile])
|
||||
|
||||
const { isDragActive, getRootProps } = useDropzone({
|
||||
onDrop,
|
||||
accept: 'image/*',
|
||||
maxFiles: 1,
|
||||
noKeyboard: true,
|
||||
})
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
mergeImages([
|
||||
|
|
@ -66,9 +84,13 @@ function App() {
|
|||
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="App" {...getRootProps()}>
|
||||
<img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
|
||||
|
||||
<div className={isDragActive ? 'droparea active' : 'droparea'}>
|
||||
Drop your photo here ...
|
||||
</div>
|
||||
|
||||
<h2>Choose your Photo:</h2>
|
||||
<p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
|
||||
|
||||
|
|
|
|||
26
yarn.lock
26
yarn.lock
|
|
@ -2439,6 +2439,11 @@ atob@^2.1.2:
|
|||
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
|
||||
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
|
||||
|
||||
attr-accept@^2.2.1:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
|
||||
integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
|
||||
|
||||
autoprefixer@^9.6.1:
|
||||
version "9.8.6"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
|
||||
|
|
@ -4895,6 +4900,13 @@ file-loader@6.1.1:
|
|||
loader-utils "^2.0.0"
|
||||
schema-utils "^3.0.0"
|
||||
|
||||
file-selector@^0.2.2:
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
|
||||
integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
|
||||
dependencies:
|
||||
tslib "^2.0.3"
|
||||
|
||||
file-uri-to-path@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
|
||||
|
|
@ -8942,6 +8954,15 @@ react-dom@^17.0.1:
|
|||
object-assign "^4.1.1"
|
||||
scheduler "^0.20.1"
|
||||
|
||||
react-dropzone@^11.2.4:
|
||||
version "11.2.4"
|
||||
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.2.4.tgz#391a8d2e41a8a974340f83524d306540192e3313"
|
||||
integrity sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==
|
||||
dependencies:
|
||||
attr-accept "^2.2.1"
|
||||
file-selector "^0.2.2"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-error-overlay@^6.0.8:
|
||||
version "6.0.8"
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
|
||||
|
|
@ -10528,6 +10549,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
|
|||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.0.3:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
|
||||
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
|
||||
|
||||
tsutils@^3.17.1:
|
||||
version "3.17.1"
|
||||
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
|
||||
|
|
|
|||
Loading…
Reference in a new issue