Skip to content

Commit 98b5275

Browse files
chromium7chromium7
committed
Implement fetch request in edit page and API handler
1 parent 00f2eee commit 98b5275

File tree

9 files changed

+206
-121
lines changed

9 files changed

+206
-121
lines changed

‎api/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
from django.urls import path
2-
2+
from .views import FileUploadView
33

44
urlpatterns = [
5-
5+
path('upload', FileUploadView.as_view()),
66
]

‎api/views.py‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1-
from django.shortcuts import render
1+
from rest_framework.parsers import MultiPartParser
2+
from rest_framework.response import Response
3+
from rest_framework.views import APIView
24

3-
# Create your views here.
5+
class FileUploadView(APIView):
6+
parser_classes = [MultiPartParser]
7+
8+
def put(self, request, format=None):
9+
for file_entry in request.FILES.getlist('files'):
10+
print(type(file_entry))
11+
file_content = file_entry.read()
12+
print(request.data['filters'])
13+
14+
return Response({'message': 'success'})

‎frontend/src/components/Edit/EditFilters.js‎

Lines changed: 80 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,86 @@
11
import React from "react";
22
import styled from "styled-components";
33

4+
export default function EditFilters({ filters, setFilters }) {
5+
function checkboxHandler(e) {
6+
if (e.target.checked) {
7+
setFilters((curr) => [...curr, e.target.value]);
8+
} else {
9+
setFilters((curr) => curr.filter((value) => value != e.target.value));
10+
}
11+
}
12+
13+
return (
14+
<Container>
15+
<Checkbox>
16+
<input
17+
type="checkbox"
18+
class="checkbox-input"
19+
value="cartoon"
20+
name="cartoon"
21+
id="cartoon"
22+
onClick={checkboxHandler}
23+
/>
24+
<span class="checkbox-tile">
25+
<span class="checkbox-label">Cartoon</span>
26+
</span>
27+
</Checkbox>
28+
<Checkbox>
29+
<input
30+
type="checkbox"
31+
class="checkbox-input"
32+
value="blur"
33+
name="blur"
34+
id="blur"
35+
onClick={checkboxHandler}
36+
/>
37+
<span class="checkbox-tile">
38+
<span class="checkbox-label">Blur</span>
39+
</span>
40+
</Checkbox>
41+
<Checkbox>
42+
<input
43+
type="checkbox"
44+
class="checkbox-input"
45+
value="enhance"
46+
name="enhance"
47+
id="enhance"
48+
onClick={checkboxHandler}
49+
/>
50+
<span class="checkbox-tile">
51+
<span class="checkbox-label">Enhance</span>
52+
</span>
53+
</Checkbox>
54+
<Checkbox>
55+
<input
56+
type="checkbox"
57+
class="checkbox-input"
58+
value="edge_detect"
59+
name="edge_detect"
60+
id="edge_detect"
61+
onClick={checkboxHandler}
62+
/>
63+
<span class="checkbox-tile">
64+
<span class="checkbox-label">Edge detection</span>
65+
</span>
66+
</Checkbox>
67+
<Checkbox>
68+
<input
69+
type="checkbox"
70+
class="checkbox-input"
71+
value="face_detect"
72+
name="face_detect"
73+
id="face_detect"
74+
onClick={checkboxHandler}
75+
/>
76+
<span class="checkbox-tile">
77+
<span class="checkbox-label">Face detection</span>
78+
</span>
79+
</Checkbox>
80+
</Container>
81+
);
82+
}
83+
484
const Container = styled.div`
585
width: 100%;
686
margin: auto;
@@ -101,84 +181,3 @@ const Checkbox = styled.label`
101181
text-align: center;
102182
}
103183
`;
104-
105-
export default function EditFilters({ filters, setFilters }) {
106-
function checkboxHandler(e) {
107-
if (e.target.checked) {
108-
setFilters((curr) => [...curr, e.target.value]);
109-
} else {
110-
setFilters((curr) => curr.filter((value) => value != e.target.value));
111-
}
112-
console.log(filters);
113-
}
114-
115-
return (
116-
<Container>
117-
<Checkbox>
118-
<input
119-
type="checkbox"
120-
class="checkbox-input"
121-
value="cartoon"
122-
name="cartoon"
123-
id="cartoon"
124-
onClick={checkboxHandler}
125-
/>
126-
<span class="checkbox-tile">
127-
<span class="checkbox-label">Cartoon</span>
128-
</span>
129-
</Checkbox>
130-
<Checkbox>
131-
<input
132-
type="checkbox"
133-
class="checkbox-input"
134-
value="blur"
135-
name="blur"
136-
id="blur"
137-
onClick={checkboxHandler}
138-
/>
139-
<span class="checkbox-tile">
140-
<span class="checkbox-label">Blur</span>
141-
</span>
142-
</Checkbox>
143-
<Checkbox>
144-
<input
145-
type="checkbox"
146-
class="checkbox-input"
147-
value="enhance"
148-
name="enhance"
149-
id="enhance"
150-
onClick={checkboxHandler}
151-
/>
152-
<span class="checkbox-tile">
153-
<span class="checkbox-label">Enhance</span>
154-
</span>
155-
</Checkbox>
156-
<Checkbox>
157-
<input
158-
type="checkbox"
159-
class="checkbox-input"
160-
value="edge_detect"
161-
name="edge_detect"
162-
id="edge_detect"
163-
onClick={checkboxHandler}
164-
/>
165-
<span class="checkbox-tile">
166-
<span class="checkbox-label">Edge detection</span>
167-
</span>
168-
</Checkbox>
169-
<Checkbox>
170-
<input
171-
type="checkbox"
172-
class="checkbox-input"
173-
value="face_detect"
174-
name="face_detect"
175-
id="face_detect"
176-
onClick={checkboxHandler}
177-
/>
178-
<span class="checkbox-tile">
179-
<span class="checkbox-label">Face detection</span>
180-
</span>
181-
</Checkbox>
182-
</Container>
183-
);
184-
}

‎frontend/src/components/Edit/EditPage.js‎

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,52 @@ import React, { useState } from "react";
33
import DropZone from "./DropZone";
44
import EditButton from "../Buttons/EditButton";
55
import EditFilters from "./EditFilters";
6+
import ErrorPage from "../UI/ErrorPage";
67
import PageSpinner from "../UI/PageSpinner";
78
import styled from "styled-components";
89

9-
const Container = styled.div`
10-
padding: 3rem 0;
11-
text-align: center;
12-
13-
h1 {
14-
font-family: var(--text-title);
15-
margin-bottom: 1.4rem;
16-
}
17-
`;
18-
19-
const InsideContainer = styled.div`
20-
margin-top: 2.6rem;
21-
h2 {
22-
font-family: var(--text-title);
23-
}
24-
ul {
25-
list-style-type: none;
26-
}
27-
`;
28-
29-
export default function EditPage() {
10+
function EditPage() {
3011
const [files, setFiles] = useState([]);
3112
const [filters, setFilters] = useState([]);
32-
const [isLoading, setIsLoading] = useState(false);
13+
const [status, setStatus] = useState();
3314

3415
function send(e) {
3516
e.preventDefault();
17+
setStatus("loading");
18+
19+
// Make sure images and filters are present
20+
if (files.length === 0 || filters.length === 0) {
21+
console.log("error");
22+
return "";
23+
}
3624

37-
setIsLoading(true);
25+
let formData = new FormData();
26+
for (let file of files) {
27+
formData.append("files", file);
28+
}
29+
formData.append("filters", filters);
30+
31+
fetch(`http://127.0.0.1:8000/api/upload`, {
32+
method: "PUT",
33+
body: formData,
34+
})
35+
.then((response) => response.json())
36+
.then((data) => {
37+
console.log(data);
38+
})
39+
.catch((err) => {
40+
console.log(err);
41+
});
3842
}
3943

40-
if (isLoading) {
44+
if (status === "loading") {
4145
return <PageSpinner />;
4246
}
4347

48+
if (status === "error") {
49+
return <ErrorPage />;
50+
}
51+
4452
return (
4553
<Container className="container">
4654
<h1>Upload a picture to edit</h1>
@@ -55,3 +63,25 @@ export default function EditPage() {
5563
</Container>
5664
);
5765
}
66+
67+
export default EditPage;
68+
69+
const Container = styled.div`
70+
padding: 3rem 0;
71+
text-align: center;
72+
73+
h1 {
74+
font-family: var(--text-title);
75+
margin-bottom: 1.4rem;
76+
}
77+
`;
78+
79+
const InsideContainer = styled.div`
80+
margin-top: 2.6rem;
81+
h2 {
82+
font-family: var(--text-title);
83+
}
84+
ul {
85+
list-style-type: none;
86+
}
87+
`;

‎frontend/src/components/UI/ErrorPage.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { FaRegSadTear } from "react-icons/fa";
2+
import React from "react";
3+
import styled from "styled-components";
4+
5+
function ErrorPage() {
6+
return (
7+
<Container>
8+
<p>
9+
<FaRegSadTear />
10+
</p>
11+
<div>
12+
Something went wrong.
13+
<br />
14+
<a href="/">Go to homepage</a>
15+
</div>
16+
</Container>
17+
);
18+
}
19+
20+
export default ErrorPage;
21+
22+
const Container = styled.div`
23+
height: 100vh;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
align-items: center;
28+
text-align: center;
29+
30+
svg {
31+
width: 26px;
32+
height: 26px;
33+
}
34+
35+
a {
36+
color: var(--color-primary);
37+
}
38+
`;

‎frontend/src/components/UI/LoadingText.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ const Container = styled.div`
4444
.l-10 {
4545
animation-delay: 1.56s;
4646
}
47+
.l-11 {
48+
animation-delay: 1.68s;
49+
}
4750
4851
@keyframes loading {
4952
0% {
@@ -58,16 +61,17 @@ const Container = styled.div`
5861
export default function LoadingText() {
5962
return (
6063
<Container>
61-
<div class="l-1 letter">L</div>
62-
<div class="l-2 letter">o</div>
63-
<div class="l-3 letter">a</div>
64-
<div class="l-4 letter">d</div>
65-
<div class="l-5 letter">i</div>
66-
<div class="l-6 letter">n</div>
67-
<div class="l-7 letter">g</div>
68-
<div class="l-8 letter">.</div>
69-
<div class="l-9 letter">.</div>
70-
<div class="l-10 letter">.</div>
64+
<div class="l-1 letter">P</div>
65+
<div class="l-2 letter">r</div>
66+
<div class="l-3 letter">o</div>
67+
<div class="l-4 letter">c</div>
68+
<div class="l-5 letter">c</div>
69+
<div class="l-6 letter">e</div>
70+
<div class="l-7 letter">s</div>
71+
<div class="l-8 letter">s</div>
72+
<div class="l-9 letter">i</div>
73+
<div class="l-10 letter">n</div>
74+
<div class="l-11 letter">g</div>
7175
</Container>
7276
);
7377
}

‎frontend/src/components/UI/PageSpinner.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import styled from "styled-components";
55

66
const Container = styled.div`
77
height: 100vh;
8-
width: 100vw;
98
display: flex;
109
flex-direction: column;
1110
justify-content: center;

‎frontend/static/frontend/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/static/frontend/main.js.LICENSE.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,10 @@
122122
!*** ./src/components/Shared/icons.js ***!
123123
\****************************************/
124124

125+
/*!****************************************!*\
126+
!*** ./src/components/UI/ErrorPage.js ***!
127+
\****************************************/
128+
125129
/*!****************************************!*\
126130
!*** ./src/components/UI/animation.js ***!
127131
\****************************************/

0 commit comments

Comments
 (0)