|
| 1 | +import React from 'react' |
| 2 | +import Classnames from 'classnames' |
| 3 | +import Octicon, { Key } from '@primer/octicons-react' |
| 4 | +import BsCustomFileInput from 'bs-custom-file-input' |
| 5 | +import Alert from './Alert' |
| 6 | + |
| 7 | +export default class Upload extends React.Component { |
| 8 | + constructor() { |
| 9 | + super() |
| 10 | + this.url = '/api/v1/upload' |
| 11 | + |
| 12 | + this.handleFile = this.handleFile.bind(this) |
| 13 | + this.handleUpload = this.handleUpload.bind(this) |
| 14 | + this.handleDrop = this.handleDrop.bind(this) |
| 15 | + this.handleDragOn = this.handleDragOn.bind(this) |
| 16 | + this.handleDragOff = this.handleDragOff.bind(this) |
| 17 | + this.uploadFile = this.uploadFile.bind(this) |
| 18 | + this.reGenPassword = this.reGenPassword.bind(this) |
| 19 | + |
| 20 | + this.state = { |
| 21 | + error: null, |
| 22 | + mask: false, |
| 23 | + } |
| 24 | + } |
| 25 | + |
| 26 | + UNSAFE_componentDidMount() { |
| 27 | + BsCustomFileInput.init() |
| 28 | + } |
| 29 | + |
| 30 | + classes() { |
| 31 | + return Classnames({ |
| 32 | + 'app-outer': true, |
| 33 | + 'loading-mask': this.state.mask, |
| 34 | + }) |
| 35 | + } |
| 36 | + |
| 37 | + dndClasses() { |
| 38 | + return Classnames({ |
| 39 | + 'col-sm-4': true, |
| 40 | + 'container-fluid': true, |
| 41 | + 'is-dragover': this.state.isDragOver, |
| 42 | + }) |
| 43 | + } |
| 44 | + |
| 45 | + genPassword(length) { |
| 46 | + function genString() { |
| 47 | + var array = new Uint16Array(length) |
| 48 | + window.crypto.getRandomValues(array) |
| 49 | + var array = Array.apply([], array) |
| 50 | + array = array.filter(function(x) { |
| 51 | + // -.0-9A-Za-z |
| 52 | + return x >= 45 && x <=46 || x >= 48 && x<=57 || x >= 65 && x<= 90 || x >= 97 && x <= 122 |
| 53 | + }) |
| 54 | + return String.fromCharCode.apply(String, array) |
| 55 | + } |
| 56 | + var randomString = genString() |
| 57 | + while (randomString.length < length) { |
| 58 | + randomString += genString() |
| 59 | + } |
| 60 | + return randomString |
| 61 | + } |
| 62 | + |
| 63 | + reGenPassword(event) { |
| 64 | + var btn = event.currentTarget |
| 65 | + btn.blur() |
| 66 | + var val = btn.parentNode.nextSibling.value = this.genPassword(gdprshare.config.passwordLength) |
| 67 | + } |
| 68 | + |
| 69 | + uploadFile(data, filename) { |
| 70 | + var formData = new FormData() |
| 71 | + var file = new File( |
| 72 | + [ data ], |
| 73 | + { |
| 74 | + type: 'application/octet-stream' |
| 75 | + }, |
| 76 | + ) |
| 77 | + |
| 78 | + var email = this.refs.email.value |
| 79 | + formData.append('file', file, filename) |
| 80 | + formData.append('filename', filename) |
| 81 | + formData.append('count', this.refs.count.value) |
| 82 | + formData.append('expiry', this.refs.expiry.value) |
| 83 | + formData.append('email', email) |
| 84 | + |
| 85 | + window.localStorage.setItem('email', email) |
| 86 | + |
| 87 | + window.fetch(this.url, { |
| 88 | + method: 'POST', |
| 89 | + body: formData, |
| 90 | + }).then(function (response) { |
| 91 | + if (response.ok) |
| 92 | + this.props.history.push( |
| 93 | + 'uploaded', |
| 94 | + { |
| 95 | + location: location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + response.headers.get('Location'), |
| 96 | + // unencrypted filename |
| 97 | + filename: this.refs.file.files[0].name, |
| 98 | + password: this.refs.password.value, |
| 99 | + } |
| 100 | + ) |
| 101 | + else { |
| 102 | + response.clone().json().then(function(data) { |
| 103 | + this.setState({ |
| 104 | + error: data.message, |
| 105 | + mask: false, |
| 106 | + }) |
| 107 | + }.bind(this), gdprshare.fetcherr.bind(this, response)) |
| 108 | + } |
| 109 | + }.bind(this), gdprshare.rejecterr.bind(this)) |
| 110 | + } |
| 111 | + |
| 112 | + encrypt(clearText, salt, password, callback) { |
| 113 | + window.crypto.subtle.importKey( |
| 114 | + 'raw', |
| 115 | + new TextEncoder().encode(password), |
| 116 | + { name: 'PBKDF2' }, |
| 117 | + false, |
| 118 | + [ 'deriveBits', 'deriveKey' ] |
| 119 | + ).then(function (keyMaterial) { |
| 120 | + var iv = window.crypto.getRandomValues(new Uint8Array(12)) |
| 121 | + |
| 122 | + gdprshare.deriveKey(keyMaterial, salt, function (key) { |
| 123 | + var gcmParams = { |
| 124 | + name: 'aes-gcm', |
| 125 | + iv: iv, |
| 126 | + } |
| 127 | + window.crypto.subtle.encrypt(gcmParams, key, clearText).then(function(cipherText) { |
| 128 | + callback(Buffer.concat([iv, Buffer.from(cipherText)])) |
| 129 | + }.bind(this), gdprshare.rejecterr.bind(this)) |
| 130 | + }.bind(this)) |
| 131 | + }.bind(this), gdprshare.rejecterr.bind(this)) |
| 132 | + } |
| 133 | + |
| 134 | + handleDrop(event) { |
| 135 | + event.preventDefault() |
| 136 | + event.stopPropagation() |
| 137 | + |
| 138 | + this.setState({ |
| 139 | + isDragOver: false |
| 140 | + }) |
| 141 | + |
| 142 | + var files = event.dataTransfer.files |
| 143 | + if (!this.checkFileSize(files[0], event)) |
| 144 | + return |
| 145 | + |
| 146 | + this.refs.file.files = files |
| 147 | + //this.handleUpload(event) |
| 148 | + this.refs.submit.click() |
| 149 | + } |
| 150 | + |
| 151 | + handleUpload(event) { |
| 152 | + event.preventDefault() |
| 153 | + if (this.state.mask) |
| 154 | + return |
| 155 | + |
| 156 | + this.setState({ |
| 157 | + error: null, |
| 158 | + mask: true, |
| 159 | + }) |
| 160 | + |
| 161 | + var password = this.refs.password.value |
| 162 | + var salt = window.crypto.getRandomValues(new Uint8Array(32)) |
| 163 | + var file = this.refs.file.files[0] |
| 164 | + |
| 165 | + // encryption of filename |
| 166 | + this.encrypt(new TextEncoder().encode(file.name), salt, password, function (cipherText) { |
| 167 | + var filename = Buffer.concat([salt, Buffer.from(cipherText)]).toString('base64') |
| 168 | + |
| 169 | + var reader = new FileReader() |
| 170 | + reader.onload = function () { |
| 171 | + // encryption of file |
| 172 | + this.encrypt(reader.result, salt, password, function (clearText) { |
| 173 | + this.uploadFile(clearText, filename) |
| 174 | + }.bind(this)) |
| 175 | + }.bind(this) |
| 176 | + reader.readAsArrayBuffer(file) |
| 177 | + }.bind(this)) |
| 178 | + } |
| 179 | + |
| 180 | + checkFileSize(file) { |
| 181 | + if (!file) |
| 182 | + return |
| 183 | + var allowedSize = gdprshare.config.maxFileSize |
| 184 | + |
| 185 | + if (file.size > allowedSize * 1024 * 1024) { |
| 186 | + this.setState({ |
| 187 | + error: 'File to big, maximum allowed size: ' + allowedSize + ' MiB.', |
| 188 | + }) |
| 189 | + this.refs.file.value = null |
| 190 | + return false |
| 191 | + } |
| 192 | + return true |
| 193 | + } |
| 194 | + |
| 195 | + handleFile(event) { |
| 196 | + var file = event.currentTarget.files[0] |
| 197 | + if (!this.checkFileSize(file, event)) |
| 198 | + return |
| 199 | + } |
| 200 | + |
| 201 | + handleDragOn(event) { |
| 202 | + event.preventDefault() |
| 203 | + event.stopPropagation() |
| 204 | + this.setState({ |
| 205 | + isDragOver: true |
| 206 | + }) |
| 207 | + } |
| 208 | + |
| 209 | + handleDragOff(event) { |
| 210 | + event.preventDefault() |
| 211 | + event.stopPropagation() |
| 212 | + this.setState({ |
| 213 | + isDragOver: false |
| 214 | + }) |
| 215 | + } |
| 216 | + |
| 217 | + render() { |
| 218 | + return ( |
| 219 | + <div className={this.dndClasses()} onDrop={this.handleDrop} onDragEnter={this.handleDragOn} onDragOver={this.handleDragOn} onDragLeave={this.handleDragOff} onDragEnd={this.handleDragOff}> |
| 220 | + <div className={this.classes()}> |
| 221 | + <h4 className="text-center">GDPRShare Upload</h4> |
| 222 | + <form ref="form" className="app-inner" onSubmit={this.handleUpload}> |
| 223 | + <div className="form-group row"> |
| 224 | + <label htmlFor="file" className="col-sm-3 col-form-label col-form-label-sm"> |
| 225 | + File |
| 226 | + </label> |
| 227 | + <div className="col-sm-9"> |
| 228 | + <div className="custom-file"> |
| 229 | + <input className="custom-file-input form-control form-control-sm" id="file" type="file" ref="file" onChange={this.handleFile} required="required" autoFocus="autoFocus" /> |
| 230 | + <label className="custom-file-label col-form-label col-form-label-sm" htmlFor="file"> |
| 231 | + Select or drop file |
| 232 | + </label> |
| 233 | + </div> |
| 234 | + </div> |
| 235 | + </div> |
| 236 | + |
| 237 | + <div> |
| 238 | + <div className="form-group row"> |
| 239 | + <label htmlFor="email" className="col-sm-3 col-form-label col-form-label-sm"> |
| 240 | + Notification |
| 241 | + </label> |
| 242 | + <div className="col-sm-9"> |
| 243 | + <input className="form-control form-control-sm" id="email" type="email" ref="email" placeholder="Enter email (optional)" maxLength="255" aria-describedby="emailHelp" |
| 244 | + defaultValue={window.localStorage.getItem('email')} |
| 245 | + /> |
| 246 | + <small id="emailHelp" className="form-text text-muted">Email address to receive download notifications</small> |
| 247 | + </div> |
| 248 | + </div> |
| 249 | + |
| 250 | + <div className="form-group row"> |
| 251 | + <label htmlFor="count" className="col-sm-3 col-form-label col-form-label-sm"> |
| 252 | + Count |
| 253 | + </label> |
| 254 | + <div className="col-sm-9"> |
| 255 | + <input className="form-control form-control-sm" className="form-control form-control-sm" id="count" type="number" ref="count" min="1" max="15" defaultValue="1" required="required" aria-describedby="countHelp" /> |
| 256 | + <small id="countHelp" className="form-text text-muted">Maximum number of downloads before file is deleted</small> |
| 257 | + </div> |
| 258 | + </div> |
| 259 | + |
| 260 | + <div className="form-group row"> |
| 261 | + <label htmlFor="expiry" className="col-sm-3 col-form-label col-form-label-sm"> |
| 262 | + Expiry |
| 263 | + </label> |
| 264 | + <div className="col-sm-9"> |
| 265 | + <input className="form-control form-control-sm" id="expiry" type="number" ref="expiry" min="1" max="14" defaultValue="7" required="required" aria-describedby="expiryHelp" /> |
| 266 | + <small id="expiryHelp" className="form-text text-muted">Maximum days before file is deleted</small> |
| 267 | + </div> |
| 268 | + </div> |
| 269 | + </div> |
| 270 | + |
| 271 | + <div className="form-group row"> |
| 272 | + <label htmlFor="password" className="col-sm-3 col-form-label col-form-label-sm"> |
| 273 | + Password |
| 274 | + </label> |
| 275 | + <div className="col-sm-9"> |
| 276 | + <div className="input-group"> |
| 277 | + <div className="input-group-prepend"> |
| 278 | + <button onClick={this.reGenPassword} type="button" className="input-group-text"> |
| 279 | + <Octicon icon={Key} /> |
| 280 | + </button> |
| 281 | + </div> |
| 282 | + <input className="form-control form-control-sm" id="password" type="text" ref="password" placeholder="Password" maxLength="255" |
| 283 | + defaultValue={this.genPassword(gdprshare.config.passwordLength)} required="required" |
| 284 | + /> |
| 285 | + </div> |
| 286 | + </div> |
| 287 | + </div> |
| 288 | + <div className="text-center col-sm-12"> |
| 289 | + <input type="submit" ref="submit" className="btn btn-primary" value="Upload"/> |
| 290 | + </div> |
| 291 | + |
| 292 | + </form> |
| 293 | + |
| 294 | + <br /> |
| 295 | + |
| 296 | + <Alert error={this.state.error} /> |
| 297 | + </div> |
| 298 | + </div> |
| 299 | + ) |
| 300 | + } |
| 301 | +} |
0 commit comments