├── 1_basic ├── index.html ├── upload.php └── uploads │ └── test.txt ├── 2_content-type ├── index.html ├── upload.php └── uploads │ └── test.txt ├── 3_blacklist ├── index.html ├── upload.php └── uploads │ └── test.txt ├── README.md └── challenges ├── challenge2.html ├── challenge3.html ├── challenge4.html ├── challenge5.html ├── index.html ├── php ├── upload1.php ├── upload2.php ├── upload3.php ├── upload4.php └── upload5.php ├── static ├── css │ └── style.css ├── img │ └── logo.png └── js │ └── script.js └── uploads └── test.txt /1_basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

File Upload Vulnerability - Basic Demo

4 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_basic/upload.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Image File Upload Stats:

5 | 6 | Size: ".$_FILES["file"]["size"]; 17 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 18 | 19 | move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$_FILES["file"]["name"]); 20 | } 21 | 22 | 23 | ?> 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /1_basic/uploads/test.txt: -------------------------------------------------------------------------------- 1 | test -------------------------------------------------------------------------------- /2_content-type/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

File Upload Vulnerability - Content Type Check for PNG, JPG, JPEG & GIF

4 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_content-type/upload.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Image File Upload Stats:

5 | 6 | Size: ".$_FILES["file"]["size"]; 20 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 21 | echo "
Type: ".$_FILES["file"]["type"]; 22 | 23 | move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$_FILES["file"]["name"]); 24 | } 25 | else { 26 | echo "Please upload only image file. Valid Extension: png, jpg, jpeg, gif"; 27 | echo "
Type: ".$_FILES["file"]["type"]; 28 | } 29 | 30 | 31 | 32 | ?> 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /2_content-type/uploads/test.txt: -------------------------------------------------------------------------------- 1 | test -------------------------------------------------------------------------------- /3_blacklist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

File Upload Vulnerability - Blacklist Extension

4 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /3_blacklist/upload.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Image File Upload Stats:

5 | 6 | Size: ".$_FILES["file"]["size"]; 25 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 26 | echo "
Type: ".$_FILES["file"]["type"]; 27 | 28 | move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$_FILES["file"]["name"]); 29 | } 30 | 31 | 32 | ?> 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /3_blacklist/uploads/test.txt: -------------------------------------------------------------------------------- 1 | test -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FileUploadWeb 2 | Collection of Vulnerable Websites containing File Upload Vulnerability for practicing skill 3 | 4 | * Please move the `challenges` folder to `/var/www/html` folder: `sudo cp -r challenges /var/www/html` 5 | * Then give executable permission to `uploads` folder using this cmd: `sudo chmod 777 /var/www/html/challenges/uploads` 6 | * Run Apache2 service: `sudo service apache2 start` 7 | * Visit this url in your web browser: `localhost/challenges` 8 | 9 | ## Challenges 10 | 11 | * No Restriction 12 | * Content-Type Validation 13 | * Blacklist Extension Validation 14 | * Whitelist Extension Validation - 1 15 | * Whitelist Extension Validation - 2 16 | * Client-Side Validation (Coming soon) 17 | * Magic Header Validation (Coming soon) 18 | * GetImageSize() Function Based Validation (Coming Soon) 19 | 20 | 21 | -------------------------------------------------------------------------------- /challenges/challenge2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Content Type Validation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | 36 |

37 | 💡 Hint 38 |

39 | 40 | 41 | 42 |

43 |

44 |

Upload Files

45 |

46 |

47 |

Select File here

48 |

49 |

Files Supported: JPG, JPEG, PNG, GIF

50 | 58 |

59 | 60 |

61 |

62 | 63 | 64 | 65 | 66 | 67 | 85 | 86 | 87 | 88 |

89 |

Challenges

90 |

91 |

92 |

93 |

No Restriction

94 |

95 |

96 | 97 |

Easy

98 |

99 |

100 |

101 |

102 | 103 |

104 |

105 |

Content Type

106 |

107 |

108 | 109 |

Easy

110 |

111 |

112 |

113 |

114 | 115 |

116 |

117 |

Blacklist EXT Validation

118 |

119 |

120 | 121 |

Medium

122 |

123 |

124 |

125 |

126 | 127 |

128 |

129 |

Whitelist EXT Validation - 1

130 |

131 |

132 | 133 |

Medium

134 |

135 |

136 |

137 |

138 | 139 |

140 |

141 |

Whitelist EXT Validation - 2

142 |

143 |

144 | 145 |

Medium

146 |

147 |

148 |

149 |

150 |

151 |

152 | 153 | 154 | 155 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /challenges/challenge3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Blacklist Extension Validation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | 36 |

37 | 💡 Hint 38 |

39 | 40 | 41 | 42 |

43 |

44 |

Upload Files

45 |

46 |

47 |

Select File here

48 |

49 |

Files Supported: JPG, JPEG, PNG, GIF

50 | 58 |

59 | 60 |

61 |

62 | 63 | 64 | 65 | 66 | 67 | 85 | 86 | 87 | 88 |

89 |

Challenges

90 |

91 |

92 |

93 |

No Restriction

94 |

95 |

96 | 97 |

Easy

98 |

99 |

100 |

101 |

102 | 103 |

104 |

105 |

Content Type

106 |

107 |

108 | 109 |

Easy

110 |

111 |

112 |

113 |

114 | 115 |

116 |

117 |

Blacklist EXT Validation

118 |

119 |

120 | 121 |

Medium

122 |

123 |

124 |

125 |

126 | 127 |

128 |

129 |

Whitelist EXT Validation - 1

130 |

131 |

132 | 133 |

Medium

134 |

135 |

136 |

137 |

138 | 139 |

140 |

141 |

Whitelist EXT Validation - 2

142 |

143 |

144 | 145 |

Medium

146 |

147 |

148 |

149 |

150 |

151 |

152 | 153 | 154 | 155 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /challenges/challenge4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Whitelist Extension Validation - 1 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | 36 |

37 | 💡 Hint 38 |

39 | 40 | 41 | 42 |

43 |

44 |

Upload Files

45 |

46 |

47 |

Select File here

48 |

49 |

Files Supported: JPG, JPEG, PNG, GIF

50 | 58 |

59 | 60 |

61 |

62 | 63 | 64 | 65 | 66 | 67 | 85 | 86 | 87 | 88 |

89 |

Challenges

90 |

91 |

92 |

93 |

No Restriction

94 |

95 |

96 | 97 |

Easy

98 |

99 |

100 |

101 |

102 | 103 |

104 |

105 |

Content Type

106 |

107 |

108 | 109 |

Easy

110 |

111 |

112 |

113 |

114 | 115 |

116 |

117 |

Blacklist EXT Validation

118 |

119 |

120 | 121 |

Medium

122 |

123 |

124 |

125 |

126 | 127 |

128 |

129 |

Whitelist EXT Validation - 1

130 |

131 |

132 | 133 |

Medium

134 |

135 |

136 |

137 |

138 | 139 |

140 |

141 |

Whitelist EXT Validation - 2

142 |

143 |

144 | 145 |

Medium

146 |

147 |

148 |

149 |

150 |

151 |

152 | 153 | 154 | 155 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /challenges/challenge5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Whitelist Extension Validation - 2 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | 36 |

37 | NOTE: For This Exercise, Make sure to apply these settings 38 |

39 |

Edit phpX.conf (sudo vim /etc/apache2/mods-available/php*.conf)
Remove $ (dollar sign) from this line <FilesMatch ".+\.ph(ar|p|tml)$">

43 |
44 | 💡 Hint 45 |

46 | 47 | 48 | 49 |

50 |

51 |

Upload Files

52 |

53 |

54 |

Select File here

55 |

56 |

Files Supported: JPG, JPEG, PNG, GIF

57 | 65 |

66 | 67 |

68 |

69 | 70 | 71 | 72 | 73 | 74 | 92 | 93 | 94 | 95 |

96 |

Challenges

97 |

98 |

99 |

100 |

No Restriction

101 |

102 |

103 | 104 |

Easy

105 |

106 |

107 |

108 |

109 | 110 |

111 |

112 |

Content Type

113 |

114 |

115 | 116 |

Easy

117 |

118 |

119 |

120 |

121 | 122 |

123 |

124 |

Blacklist EXT Validation

125 |

126 |

127 | 128 |

Medium

129 |

130 |

131 |

132 |

133 | 134 |

135 |

136 |

Whitelist EXT Validation - 1

137 |

138 |

139 | 140 |

Medium

141 |

142 |

143 |

144 |

145 | 146 |

147 |

148 |

Whitelist EXT Validation - 2

149 |

150 |

151 | 152 |

Medium

153 |

154 |

155 |

156 |

157 | 158 |

159 |

160 | 161 | 162 | 163 | 178 | 179 | 180 | 181 | -------------------------------------------------------------------------------- /challenges/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | No Restriction 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 35 | 36 |

37 | 💡 Hint 38 |

39 | 40 | 41 | 42 |

43 |

44 |

Upload Files

45 |

46 |

47 |

Select File here

48 |

49 |

Files Supported: JPG, JPEG, PNG, GIF

50 | 58 |

59 | 60 |

61 |

62 | 63 | 64 | 65 | 66 | 67 | 85 | 86 | 87 | 88 |

89 |

Challenges

90 |

91 |

92 |

93 |

No Restriction

94 |

95 |

96 | 97 |

Easy

98 |

99 |

100 |

101 |

102 | 103 |

104 |

105 |

Content Type

106 |

107 |

108 | 109 |

Easy

110 |

111 |

112 |

113 |

114 | 115 |

116 |

117 |

Blacklist EXT Validation

118 |

119 |

120 | 121 |

Medium

122 |

123 |

124 |

125 |

126 | 127 |

128 |

129 |

Whitelist EXT Validation - 1

130 |

131 |

132 | 133 |

Medium

134 |

135 |

136 |

137 |

138 | 139 |

140 |

141 |

Whitelist EXT Validation - 2

142 |

143 |

144 | 145 |

Medium

146 |

147 |

148 |

149 |

150 |

151 |

152 | 153 | 154 | 155 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /challenges/php/upload1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Upload Stats 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 39 | 40 | 41 |
Name: ".$_FILES["file"]["name"]; 51 | echo "
Size: ".$_FILES["file"]["size"]; 52 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 53 | 54 | move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/".$_FILES["file"]["name"]); 55 | } 56 | 57 | 58 | ?> 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /challenges/php/upload2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Upload Stats 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 39 | 40 | 41 |
Name: ".$_FILES["file"]["name"]; 54 | echo "
Size: ".$_FILES["file"]["size"]; 55 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 56 | echo "
Type: ".$_FILES["file"]["type"]; 57 | 58 | move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/".$_FILES["file"]["name"]); 59 | } 60 | else { 61 | echo "

Please upload only image file. Valid Extension: png, jpg, jpeg, gif"; 62 | echo "
Type: ".$_FILES["file"]["type"]; 63 | } 64 | 65 | 66 | 67 | ?> 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /challenges/php/upload3.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Upload Stats 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 39 | 40 | 41 |
Please upload a Image file"; 55 | } 56 | 57 | else { 58 | echo "

Name: ".$_FILES["file"]["name"]; 59 | echo "
Size: ".$_FILES["file"]["size"]; 60 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 61 | echo "
Type: ".$_FILES["file"]["type"]; 62 | 63 | move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/".$_FILES["file"]["name"]); 64 | } 65 | 66 | 67 | ?> 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /challenges/php/upload4.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Upload Stats 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 39 | 40 | 41 |
Name: ".$_FILES["file"]["name"]; 52 | echo "
Size: ".$_FILES["file"]["size"]; 53 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 54 | echo "
Type: ".$_FILES["file"]["type"]; 55 | 56 | move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/".$_FILES["file"]["name"]); 57 | } 58 | else { 59 | echo "

Please upload a Image file!"; 60 | } 61 | 62 | ?> 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /challenges/php/upload5.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Upload Stats 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 33 | 34 | 39 | 40 | 41 |
Name: ".$_FILES["file"]["name"]; 54 | echo "
Size: ".$_FILES["file"]["size"]; 55 | echo "
Temp File: ".$_FILES["file"]["tmp_name"]; 56 | echo "
Type: ".$_FILES["file"]["type"]; 57 | 58 | move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/".$_FILES["file"]["name"]); 59 | } 60 | else { 61 | echo "

Please upload a Image file!"; 62 | } 63 | 64 | ?> 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /challenges/static/css/style.css: -------------------------------------------------------------------------------- 1 | /* Header CSS */ 2 | 3 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap'); 4 | /* CSS Above This Line is for Google Font Import - Do Not Copy*/ 5 | 6 | .brand-navigation { 7 | background-color: #06070d; 8 | display: flex; 9 | justify-content: center; 10 | } 11 | 12 | .content { 13 | width: 960px; 14 | height: 54px; 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; 18 | } 19 | 20 | .navigation { 21 | list-style: none; 22 | margin: 0; 23 | display: flex; 24 | justify-content: flex-end; 25 | font-family: "Poppins", sans-serif; 26 | text-transform: uppercase; 27 | font-size: 13px; 28 | } 29 | 30 | .navigation a { 31 | text-decoration: none; 32 | padding: 3em; 33 | color: #dbdbe2; 34 | } 35 | 36 | .logo-nav { 37 | max-width: 100px; 38 | } 39 | 40 | .button-dark { 41 | height: 28x; 42 | padding: 1px 20px; 43 | border-radius: 4px; 44 | background-color: #f30606; 45 | border-style: none; 46 | font-family: "Poppins", sans-serif; 47 | text-transform: uppercase; 48 | color: #FFFFFF; 49 | font-size: 13px; 50 | line-height: 26px; 51 | } 52 | 53 | /* Upload Form CSS */ 54 | 55 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 56 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 57 | 58 | * { 59 | margin: 0; 60 | padding: 0; 61 | box-sizing: border-box; 62 | font-family: "Poppins", sans-serif; 63 | } 64 | 65 | .container { 66 | height: 40vh; 67 | width: 100%; 68 | align-items: center; 69 | display: flex; 70 | justify-content: center; 71 | background-color: #fcfcfc; 72 | } 73 | 74 | .card { 75 | border-radius: 10px; 76 | box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); 77 | width: 600px; 78 | height: 260px; 79 | background-color: #ffffff; 80 | padding: 10px 30px 40px; 81 | } 82 | 83 | .card h3 { 84 | font-size: 22px; 85 | font-weight: 600; 86 | 87 | } 88 | 89 | .drop_box { 90 | margin: 10px 0; 91 | padding: 30px; 92 | display: flex; 93 | align-items: center; 94 | justify-content: center; 95 | flex-direction: column; 96 | border: 3px dotted #a3a3a3; 97 | border-radius: 5px; 98 | } 99 | 100 | .drop_box h4 { 101 | font-size: 16px; 102 | font-weight: 400; 103 | color: #2e2e2e; 104 | } 105 | 106 | .drop_box p { 107 | margin-top: 10px; 108 | margin-bottom: 20px; 109 | font-size: 12px; 110 | color: #a3a3a3; 111 | } 112 | 113 | .btn { 114 | text-decoration: none; 115 | background-color: #f30606; 116 | color: #ffffff; 117 | padding: 10px 20px; 118 | border: none; 119 | outline: none; 120 | transition: 0.3s; 121 | border-radius: 4px; 122 | } 123 | 124 | .btn:hover{ 125 | text-decoration: none; 126 | background-color: #ffffff; 127 | color: #f30606; 128 | padding: 10px 20px; 129 | border: none; 130 | outline: 1px solid #010101; 131 | } 132 | .form input { 133 | margin: 10px 0; 134 | width: 100%; 135 | background-color: #e2e2e2; 136 | border: none; 137 | outline: none; 138 | padding: 12px 20px; 139 | border-radius: 4px; 140 | } 141 | 142 | .invisible { 143 | display: none; 144 | } 145 | 146 | /* Footer CSS */ 147 | 148 | .footer{ 149 | background:#000; 150 | padding:30px 0px; 151 | font-family: 'Play', sans-serif; 152 | text-align:center; 153 | } 154 | 155 | .footer .row{ 156 | width:100%; 157 | margin:1% 0%; 158 | padding:0.6% 0%; 159 | color:gray; 160 | font-size:0.8em; 161 | } 162 | 163 | .footer .row a{ 164 | text-decoration:none; 165 | color:gray; 166 | transition:0.5s; 167 | } 168 | 169 | .footer .row a:hover{ 170 | color:#fff; 171 | } 172 | 173 | .footer .row ul{ 174 | width:100%; 175 | } 176 | 177 | .footer .row ul li{ 178 | display:inline-block; 179 | margin:0px 30px; 180 | } 181 | 182 | .footer .row a i{ 183 | font-size:2em; 184 | margin:0% 1%; 185 | } 186 | 187 | @media (max-width:720px){ 188 | .footer{ 189 | text-align:left; 190 | padding:5%; 191 | } 192 | .footer .row ul li{ 193 | display:block; 194 | margin:10px 0px; 195 | text-align:left; 196 | } 197 | .footer .row a i{ 198 | margin:0% 3%; 199 | } 200 | } 201 | 202 | /* Choose Challenge CSS */ 203 | .choose_challenge { 204 | padding-left: 50px; 205 | padding-right: 50px; 206 | padding-bottom: 50px; 207 | } 208 | .choose_challenge .fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;} 209 | .choose_challenge .fa-bolt:before{content:"\f0e7";} 210 | .choose_challenge .fa-hourglass-half:before{content:"\f252";} 211 | .choose_challenge .fa-trophy:before{content:"\f091";} 212 | .choose_challenge .fas{font-family:"Font Awesome 5 Free";} 213 | .choose_challenge .fas{font-weight:900;} 214 | .choose_challenge *{font-family:Inconsolata,monospace;} 215 | .choose_challenge *,::after,::before{box-sizing:border-box;} 216 | .choose_challenge h1{margin-top:0;margin-bottom:.5rem;} 217 | .choose_challenge p{margin-top:0;margin-bottom:1rem;} 218 | .choose_challenge .row{display:-webkit-box;display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;} 219 | .choose_challenge .col{position:relative;width:100%;padding-right:15px;padding-left:15px;} 220 | .choose_challenge .col{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;} 221 | .choose_challenge .card{background-color:#06070d;;border-radius:5px;cursor:pointer;height:110px;overflow:hidden;padding:.5em 1em;width:250px;-webkit-transition:all .2s;transition:all .2s;margin:15px auto;} 222 | .choose_challenge .card:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 7px 14px rgba(0,0,0,.35);} 223 | .choose_challenge .card-title{padding-left:5px;font-size:24px; color:#f30606;} 224 | .choose_challenge .card-data{width:100%;-webkit-box-pack:justify;justify-content:space-between;} 225 | .choose_challenge .card-data,.card-sub{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;} 226 | .choose_challenge .card-data .data,.card-data i,.card-sub .data,.card-sub i{margin:5px;} 227 | .choose_challenge .card-data>div>i,.card-data>div>p{color:#9096b4;} 228 | .choose_challenge .card-data>.solves>i,.card-data>.solves>p{color:#ffa600!important;} 229 | .choose_challenge .card-danger{border-top:3px solid #f30606;} 230 | .choose_challenge .card-secondary{border-top:3px solid #757aa1;} 231 | .choose_challenge .row{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));} 232 | 233 | @font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.eot#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-regular-400.svg#fontawesome) format("svg");} 234 | @font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.eot#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/webfonts/fa-solid-900.svg#fontawesome) format("svg");} 235 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyxq15Mjs.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;} 236 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyx615Mjs.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} 237 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyya15.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} 238 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyxq15Mjs.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;} 239 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyx615Mjs.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} 240 | @font-face{font-family:'Inconsolata';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/inconsolata/v30/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyya15.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} 241 | 242 | /* Tip Tool CSS */ 243 | @import url(https://fonts.googleapis.com/css?family=Audiowide); 244 | 245 | .tiptool { 246 | padding-top: 100px; 247 | text-align: center; 248 | } 249 | 250 | span { 251 | color: #e91e63; 252 | font-family: monospace; 253 | white-space: nowrap; 254 | } 255 | 256 | span:after { 257 | font-family: Arial, sans-serif; 258 | text-align: left; 259 | white-space: normal; 260 | } 261 | 262 | span:focus { 263 | outline: none; 264 | } 265 | 266 | .wrap { 267 | background: #ECF0F1; 268 | color: #607D8B; 269 | height: 100%; 270 | overflow: auto; 271 | padding: 1em 2.5em; 272 | text-align: center; 273 | width: 100%; 274 | } 275 | 276 | .tiptool .h1 { 277 | color: #e91e63; 278 | font-family: "Audiowide", cursive; 279 | font-size: 2em; 280 | font-size: 7vw; 281 | font-weight: bold; 282 | line-height: 1.2; 283 | margin: 0.5em 0 2.5em; 284 | text-shadow: 1px 1px 1px #fefefe; 285 | } 286 | 287 | @media (min-width: 1075px) { 288 | .tiptool h1 { 289 | font-size: 4.7em; 290 | } 291 | } 292 | 293 | pre { 294 | background: #fff; 295 | display: inline-block; 296 | font-size: .55em; 297 | margin-top: 2em; 298 | padding: 1em; 299 | } 300 | 301 | @media (min-width: 360px) { 302 | pre { 303 | font-size: .7em; 304 | } 305 | } 306 | 307 | @media (min-width: 500px) { 308 | pre { 309 | font-size: 1em; 310 | } 311 | } 312 | 313 | 314 | /*== start of code for tooltips ==*/ 315 | .tool { 316 | cursor: help; 317 | position: relative; 318 | } 319 | 320 | 321 | /*== common styles for both parts of tool tip ==*/ 322 | .tool::before, 323 | .tool::after { 324 | left: 50%; 325 | opacity: 0; 326 | position: absolute; 327 | z-index: -100; 328 | } 329 | 330 | .tool:hover::before, 331 | .tool:focus::before, 332 | .tool:hover::after, 333 | .tool:focus::after { 334 | opacity: 1; 335 | transform: scale(1) translateY(0); 336 | z-index: 100; 337 | } 338 | 339 | 340 | /*== pointer tip ==*/ 341 | .tool::before { 342 | border-style: solid; 343 | border-width: 1em 0.75em 0 0.75em; 344 | border-color: #3E474F transparent transparent transparent; 345 | bottom: 100%; 346 | content: ""; 347 | margin-left: -0.5em; 348 | transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s; 349 | transform: scale(.6) translateY(-90%); 350 | } 351 | 352 | .tool:hover::before, 353 | .tool:focus::before { 354 | transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; 355 | } 356 | 357 | 358 | /*== speech bubble ==*/ 359 | .tool::after { 360 | background: #3E474F; 361 | border-radius: .25em; 362 | bottom: 180%; 363 | color: #EDEFF0; 364 | content: attr(data-tip); 365 | margin-left: -8.75em; 366 | padding: 1em; 367 | transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; 368 | transform: scale(.6) translateY(50%); 369 | width: 17.5em; 370 | } 371 | 372 | .tool:hover::after, 373 | .tool:focus::after { 374 | transition: all .65s cubic-bezier(.84,-0.18,.31,1.26); 375 | } 376 | 377 | @media (max-width: 760px) { 378 | .tool::after { 379 | font-size: .75em; 380 | margin-left: -5em; 381 | width: 10em; 382 | } 383 | } 384 | -------------------------------------------------------------------------------- /challenges/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PushpenderIndia/FileUploadWeb/9c30a82a1f5fe7ffe746dd0fd8f667c38f11ecd5/challenges/static/img/logo.png -------------------------------------------------------------------------------- /challenges/static/js/script.js: -------------------------------------------------------------------------------- 1 | const dropArea = document.querySelector(".drop_box"), 2 | button = document.getElementById("choosefilebtn"), 3 | dragText = dropArea.querySelector("header"), 4 | input = dropArea.querySelector("input"); 5 | let file; 6 | var filename; 7 | 8 | button.onclick = () => { 9 | input.click(); 10 | }; 11 | 12 | input.addEventListener("change", function (e) { 13 | var fileName = e.target.files[0].name; 14 | let uploadText = document.getElementById("uploadText"); 15 | uploadText.classList.add("invisible"); 16 | 17 | let filenameText = document.getElementById("filenameText"); 18 | filenameText.classList.remove("invisible"); 19 | filenameText.innerHTML = `

${fileName}

`; 20 | 21 | let choosefilebtn = document.getElementById("choosefilebtn"); 22 | choosefilebtn.classList.add("invisible"); 23 | 24 | let submitButton = document.getElementById("submitButton"); 25 | submitButton.classList.remove("invisible"); 26 | 27 | }); 28 | 29 | function cyberacademy() { 30 | window.open("https://www.youtube.com/channel/UCRv-wp0CWtW2J33NkTId62w"); 31 | } -------------------------------------------------------------------------------- /challenges/uploads/test.txt: -------------------------------------------------------------------------------- 1 | test --------------------------------------------------------------------------------