You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NudifyUpload.vue 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div id="uploader" class="uploader">
  3. <!-- Uploader Selection -->
  4. <div class="uploader__selection">
  5. <div class="selection__content" />
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import {
  11. isEmpty, startsWith, map, toNumber,
  12. } from 'lodash'
  13. import { Nudify } from '~/modules/nudify'
  14. import { tutorial } from '~/modules'
  15. import { UploadMixin } from '~/mixins'
  16. const { instagram } = $provider
  17. export default {
  18. mixins: [UploadMixin],
  19. props: {
  20. model: {
  21. type: String,
  22. default: undefined,
  23. },
  24. },
  25. data: () => ({
  26. }),
  27. watch: {
  28. selectionId(value) {
  29. localStorage.uploadSelectionId = value
  30. },
  31. },
  32. created() {
  33. this.selectionId = localStorage.uploadSelectionId || 1
  34. this.selectionId = toNumber(this.selectionId)
  35. },
  36. mounted() {
  37. tutorial.upload()
  38. },
  39. methods: {
  40. /**
  41. *
  42. */
  43. openFile(event) {
  44. const { files } = event.target
  45. if (files.length === 0) {
  46. return
  47. }
  48. const paths = map(files, 'path')
  49. consola.track('UPLOAD_FILE')
  50. this.addFiles(paths)
  51. event.target.value = ''
  52. },
  53. /**
  54. *
  55. */
  56. openUrl() {
  57. if (isEmpty(this.webAddress)
  58. || (!startsWith(this.webAddress, 'http://')
  59. && !startsWith(this.webAddress, 'https://'))) {
  60. throw new Warning('Upload failed.', 'Please enter a valid web address.')
  61. }
  62. Nudify.addUrl(this.webAddress)
  63. consola.track('UPLOAD_URL')
  64. this.webAddress = ''
  65. },
  66. /**
  67. *
  68. */
  69. async openInstagramPhoto() {
  70. if (isEmpty(this.instagramPhoto)) {
  71. throw new Warning('Upload failed.', 'Please enter a valid Instagram photo.')
  72. }
  73. let post
  74. try {
  75. post = await instagram.getPost(this.instagramPhoto)
  76. } catch (error) {
  77. throw new Warning(
  78. 'Upload failed.',
  79. 'Unable to download the photo, please verify that the address is valid.',
  80. error,
  81. )
  82. }
  83. if (post.isVideo) {
  84. throw new Warning('Upload failed.', 'Videos are not supported yet.')
  85. }
  86. Nudify.addUrl(post.downloadUrl)
  87. consola.track('UPLOAD_INSTAGRAM')
  88. this.instagramPhoto = ''
  89. },
  90. },
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. .uploader {
  95. @apply w-full relative;
  96. }
  97. .uploader__selection {
  98. @apply flex;
  99. .selection__menu {
  100. @apply mr-4;
  101. width: 200px;
  102. .input {
  103. @apply mb-6;
  104. }
  105. }
  106. .selection__content {
  107. @apply flex flex-1 items-center justify-center;
  108. .selection__content__body {
  109. @apply text-center;
  110. width: 70%;
  111. }
  112. .input {
  113. @apply mb-4;
  114. }
  115. .help {
  116. @apply text-sm text-generic-700;
  117. &:not(:last-child) {
  118. @apply mb-4;
  119. }
  120. }
  121. .button:not(:last-child) {
  122. @apply mb-4;
  123. }
  124. .button {
  125. }
  126. }
  127. }
  128. .uploader__hint {
  129. @apply text-center;
  130. p {
  131. @apply text-sm;
  132. }
  133. }
  134. </style>