Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Wendys Racing Horses
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Analytics
Analytics
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
tu-wien
Wendys Racing Horses
Commits
d4680bd1
Commit
d4680bd1
authored
Mar 21, 2020
by
Ivaylo Ivanov
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
US02: Add UI for image upload
parent
0f5f0d22
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
76 additions
and
1 deletion
+76
-1
frontend/wendys-friends/package.json
frontend/wendys-friends/package.json
+3
-0
frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
...ends/src/app/component/add-horse/add-horse.component.html
+5
-0
frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
...riends/src/app/component/add-horse/add-horse.component.ts
+54
-1
frontend/wendys-friends/src/app/dto/horse.ts
frontend/wendys-friends/src/app/dto/horse.ts
+1
-0
frontend/wendys-friends/src/app/service/horse.service.ts
frontend/wendys-friends/src/app/service/horse.service.ts
+13
-0
No files found.
frontend/wendys-friends/package.json
View file @
d4680bd1
...
@@ -46,5 +46,8 @@
...
@@ -46,5 +46,8 @@
"ts-node"
:
"8.6.2"
,
"ts-node"
:
"8.6.2"
,
"tslint"
:
"6.0.0"
,
"tslint"
:
"6.0.0"
,
"typescript"
:
"3.7.5"
"typescript"
:
"3.7.5"
},
"browser"
:
{
"crypto"
:
false
}
}
}
}
frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
View file @
d4680bd1
...
@@ -51,6 +51,11 @@
...
@@ -51,6 +51,11 @@
<input
type=
"date"
class=
"form-control"
name=
"birthday"
[(ngModel)]=
"horse.birthday"
required
pattern=
"\d{4}-\d{2}-\d{2}"
>
<input
type=
"date"
class=
"form-control"
name=
"birthday"
[(ngModel)]=
"horse.birthday"
required
pattern=
"\d{4}-\d{2}-\d{2}"
>
</div>
</div>
<div
class=
"form-group"
>
<label
for=
"image"
>
Image
</label>
<input
type=
"file"
class=
"form-control-file"
name=
"image"
id=
"image"
(change)=
"handleImageInput($event.target.files)"
required
>
</div>
<button
type=
"submit"
class=
"btn btn-success"
[disabled]=
"!horseForm.form.valid"
(submit)=
"addHorse()"
>
Submit
</button>
<button
type=
"submit"
class=
"btn btn-success"
[disabled]=
"!horseForm.form.valid"
(submit)=
"addHorse()"
>
Submit
</button>
</form>
</form>
</div>
</div>
\ No newline at end of file
frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
View file @
d4680bd1
...
@@ -11,7 +11,8 @@ export class AddHorseComponent implements OnInit {
...
@@ -11,7 +11,8 @@ export class AddHorseComponent implements OnInit {
error
=
false
;
error
=
false
;
success
:
string
;
success
:
string
;
errorMessage
=
''
;
errorMessage
=
''
;
horse
:
Horse
=
new
Horse
(
null
,
null
,
null
,
null
,
null
,
null
,
null
);
horse
:
Horse
=
new
Horse
(
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
);
imageToUpload
:
File
=
null
;
constructor
(
private
horseService
:
HorseService
)
{
}
constructor
(
private
horseService
:
HorseService
)
{
}
...
@@ -49,6 +50,58 @@ export class AddHorseComponent implements OnInit {
...
@@ -49,6 +50,58 @@ export class AddHorseComponent implements OnInit {
);
);
}
}
/**
* Handles the input on the image input.
* Inspired from:
* https://stackoverflow.com/questions/47936183/angular-file-upload
* @param files
*/
public
handleImageInput
(
files
:
FileList
)
{
var
imageFile
:
File
=
files
.
item
(
0
);
// Generate a random bytes name to avoid conflicts
var
fileExt
:
string
=
imageFile
.
name
.
split
(
'
.
'
).
pop
();
var
newFileName
:
string
=
this
.
generateHex
(
20
)
+
'
.
'
+
fileExt
;
this
.
horse
.
imagePath
=
newFileName
;
// Upload the file
this
.
uploadFile
(
imageFile
,
newFileName
)
}
/**
* Uploads the file to the backend with the specified file name
* @param file
* @param newFileName
*/
private
uploadFile
(
file
:
File
,
newFileName
:
string
){
this
.
horseService
.
postFile
(
file
,
newFileName
).
subscribe
(
()
=>
{
console
.
log
(
"
Image successfully uploaded
"
);
},
error
=>
{
this
.
defaultServiceErrorHandling
(
error
)
});
}
/**
* Generates a random hex with the specified length
* Inspired from:
* https://stackoverflow.com/a/27747377
* @param len
*/
private
generateHex
(
len
:
number
):
string
{
var
arr
=
new
Uint8Array
((
len
)
/
2
)
window
.
crypto
.
getRandomValues
(
arr
)
return
Array
.
from
(
arr
,
this
.
dec2hex
).
join
(
''
)
}
/**
* Converts a decimal to its hex value
* @param dec
*/
private
dec2hex
(
dec
:
number
):
string
{
return
(
'
0
'
+
dec
.
toString
(
16
)).
substr
(
-
2
)
}
private
defaultServiceErrorHandling
(
error
:
any
)
{
private
defaultServiceErrorHandling
(
error
:
any
)
{
console
.
log
(
error
);
console
.
log
(
error
);
this
.
error
=
true
;
this
.
error
=
true
;
...
...
frontend/wendys-friends/src/app/dto/horse.ts
View file @
d4680bd1
...
@@ -6,6 +6,7 @@ export class Horse {
...
@@ -6,6 +6,7 @@ export class Horse {
public
score
:
number
,
public
score
:
number
,
public
birthday
:
Date
,
public
birthday
:
Date
,
public
race
:
ERace
,
public
race
:
ERace
,
public
imagePath
:
String
,
public
owner
:
number
)
{
public
owner
:
number
)
{
}
}
}
}
...
...
frontend/wendys-friends/src/app/service/horse.service.ts
View file @
d4680bd1
...
@@ -30,4 +30,17 @@ export class HorseService {
...
@@ -30,4 +30,17 @@ export class HorseService {
console
.
log
(
'
Add new horse
'
+
JSON
.
stringify
(
horse
));
console
.
log
(
'
Add new horse
'
+
JSON
.
stringify
(
horse
));
return
this
.
httpClient
.
post
<
Horse
>
(
this
.
messageBaseUri
,
horse
);
return
this
.
httpClient
.
post
<
Horse
>
(
this
.
messageBaseUri
,
horse
);
}
}
/**
*
*/
postFile
(
fileToUpload
:
File
,
newFileName
:
string
):
Observable
<
Object
>
{
// Prepare the form
var
formData
:
FormData
=
new
FormData
();
formData
.
append
(
'
file
'
,
fileToUpload
,
newFileName
);
// Upload the image and return the result
return
this
.
httpClient
.
post
(
this
.
messageBaseUri
+
'
/upload
'
,
formData
);
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment