diff --git a/README.md b/README.md index c786b64..5628459 100644 --- a/README.md +++ b/README.md @@ -214,6 +214,14 @@ interface FilesSlotProps { ## Usage +If you have PHP installed on your machine, you can clone this repo and open up a working test app by running: + +```sh +npm test +``` + +Now navigate to [http://localhost:3030/](http://localhost:3030/). + ```html @@ -245,7 +247,7 @@ export default class VueTransmit extends Vue { dictInvalidFileType: string // If the server response was invalid. - @Prop({ type: String, default: "Server responded with {{ statusCode }} code." }) + @Prop({ type: String, default: "Error during upload: {{ statusText }} [{{ statusCode }}]" }) dictResponseError: string /** @@ -276,7 +278,7 @@ export default class VueTransmit extends Vue { "Cache-Control": "no-cache", "X-Requested-With": "XMLHttpRequest", } - public fileInputStyles: object = { + public formStyles: object = { visibility: "hidden !important", position: "absolute !important", top: "0 !important", @@ -292,6 +294,13 @@ export default class VueTransmit extends Vue { } return el } + get formEl(): HTMLFormElement { + let el = null + if (this.$refs.uploadForm instanceof HTMLFormElement) { + el = this.$refs.uploadForm + } + return el + } get filesToAccept(): string { return this.acceptedFileTypes.join(",") } @@ -360,6 +369,7 @@ export default class VueTransmit extends Vue { } onFileInputChange(): void { this.$emit("added-files", Array.from(this.inputEl.files).map(this.addFile)) + this.formEl.reset() } addFile(file: File): VTransmitFile { const vTransmitFile = VTransmitFile.fromNativeFile(file) @@ -640,7 +650,10 @@ export default class VueTransmit extends Vue { const vm = this return function onUploadErrorFn(): void { if (files[0].status !== STATUSES.CANCELED) { - const message = vm.dictResponseError.replace(hbsRegex, hbsReplacer({ statusCode: xhr.status })) + const message = vm.dictResponseError.replace( + hbsRegex, + hbsReplacer({ statusText: xhr.statusText, statusCode: xhr.status }) + ) vm.errorProcessing(files, message, xhr) } } diff --git a/test/index.php b/test/index.php index aa08b85..7b0e913 100644 --- a/test/index.php +++ b/test/index.php @@ -108,6 +108,7 @@ class="my-2 my-sm-0" upload-area-classes="vh-20" drag-class="dragging" v-bind="options" + @added-file="onAddedFile" @success="onUploadSuccess" @error="onError"> data() { return { options: { - acceptedFileTypes: ['text/csv'], + acceptedFileTypes: ['image/*'], url: './upload.php', clickable: false, accept: this.accept @@ -189,7 +190,13 @@ class="ml-2 w-100"> methods: { triggerBrowse() { this.$refs.uploader.triggerBrowseFiles() - }, + }, + onAddedFile(file) { + console.log( + this.$refs.uploader.inputEl.value, + this.$refs.uploader.inputEl.files + ) + }, onUploadSuccess(file, res) { console.log(res) file.src = res.url @@ -200,9 +207,8 @@ class="ml-2 w-100"> this.showModal = true }, listen(event) { - this.$refs.uploader.$on(event, function() { - // console.log(event, ...arguments) - console.log(event, Array.from(arguments).forEach(arg => JSON.stringify(arg, undefined, 2))) + this.$refs.uploader.$on(event, function(...args) { + console.log(event, ...args.map(arg => `${typeof arg}: ${JSON.stringify(arg, undefined, 2)}`)) }) }, accept(file, done) { diff --git a/test/upload.php b/test/upload.php index 5480b5a..d2b1105 100644 --- a/test/upload.php +++ b/test/upload.php @@ -1,81 +1,78 @@ pow(1024, 3) ) - { - throw new RuntimeException( 'Exceeded filesize limit.' ); - } + // You should also check filesize here. + if ($_FILES['file']['size'] > (100 << 20)) { + throw new RuntimeException( + sprintf('Exceeded filesize limit (%d bytes -> limit %d).', $_FILES['file']['size'], 100 << 20) + ); + } - // DO NOT TRUST $_FILES['file']['mime'] VALUE !! - // Check MIME Type by yourself. - $finfo = new finfo( FILEINFO_MIME_TYPE ); - if ( TRUE === $ext = array_search( - $finfo->file( $_FILES['file']['tmp_name'] ), - [ - 'png' => 'image/png', - 'gif' => 'image/gif', - ], - TRUE - ) - ) - { - throw new RuntimeException( 'Invalid file format.' ); - } + // DO NOT TRUST $_FILES['file']['mime'] VALUE !! + // Check MIME Type by yourself. + $finfo = new finfo(FILEINFO_MIME_TYPE); + if (true === $ext = array_search( + $finfo->file($_FILES['file']['tmp_name']), + [ + 'png' => 'image/png', + 'gif' => 'image/gif', + ], + true + ) + ) { + throw new RuntimeException('Invalid file format.'); + } - // You should name it uniquely. - // DO NOT USE $_FILES['file']['name'] WITHOUT ANY VALIDATION !! - // On this example, obtain safe unique name from its binary data. - $path = sprintf( './uploads/%s.%s', - sha1_file( $_FILES['file']['tmp_name'] ), - $ext - ); + // You should name it uniquely. + // DO NOT USE $_FILES['file']['name'] WITHOUT ANY VALIDATION !! + // On this example, obtain safe unique name from its binary data. + $path = sprintf('./uploads/%s.%s', + sha1_file($_FILES['file']['tmp_name']), + $ext + ); - if (!file_exists('./uploads')) { - mkdir('./uploads'); - } + if (!file_exists('./uploads')) { + mkdir('./uploads'); + } - if ( ! move_uploaded_file( $_FILES['file']['tmp_name'], $path ) ) - { - throw new RuntimeException( 'Failed to move uploaded file.' ); - } + if (!move_uploaded_file($_FILES['file']['tmp_name'], $path)) { + throw new RuntimeException('Failed to move uploaded file.'); + } - echo json_encode([ - 'message' => 'File is uploaded successfully.', - 'url' => $path, - ]); + echo json_encode([ + 'message' => 'File is uploaded successfully.', + 'url' => $path, + ]); } -catch ( RuntimeException $e ) -{ - http_response_code(400); - echo json_encode([ - 'message' => $e->getMessage() - ]); +catch (RuntimeException $e) { + http_response_code(400); + echo json_encode([ + 'message' => $e->getMessage(), + ]); }