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.

Upload.backup.vue 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. /*
  2. * Filename: c:\src\dream\apps\dreamtime\src\components\Nudity\Upload.backup.vue
  3. * Path: c:\src\dream\apps\dreamtime\src
  4. * Created Date: Saturday, November 16th 2019, 3:43:30 pm
  5. * Author: Ivan Bravo Bravo <ivan@dreamnet.tech>
  6. *
  7. * Copyright (c) 2019 DreamNet
  8. */
  9. <template>
  10. <div class="c-nudity-upload">
  11. <!-- Dropzone -->
  12. <div
  13. :class="{'is-dragging': isDraggingFile}"
  14. class="upload-dropzone"
  15. @dragenter="onDragEnter"
  16. @dragover="onDragOver"
  17. @dragleave="onDragLeave"
  18. @drop="onDrop">
  19. <p class="dropzone-hint">👇 Drop the photo here!</p>
  20. </div>
  21. <!-- Hidden input -->
  22. <input
  23. v-show="false"
  24. ref="photo"
  25. type="file"
  26. accept="image/jpeg, image/png"
  27. @change="onPhotoSelected" />
  28. <div class="box py-5">
  29. <div class="upload-url">
  30. <input v-model="webAddress" type="url" class="input" placeholder="🌍 or enter a web address..." />
  31. <button class="button" @click="onURL">
  32. Go!
  33. </button>
  34. </div>
  35. <!-- Action button -->
  36. <button class="button" @click.prevent="$refs.photo.click()">
  37. 📂 or open a photo...
  38. </button>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import _ from 'lodash'
  44. import swal from 'sweetalert'
  45. import { Photo } from '~/modules/models'
  46. import { File } from '~/modules'
  47. export default {
  48. props: {
  49. model: {
  50. type: String,
  51. default: undefined
  52. }
  53. },
  54. data: () => ({
  55. webAddress: '',
  56. // Indicates if the user is dragging a file in the window (we apply the drag style)
  57. isDraggingFile: false
  58. }),
  59. created() {
  60. // Restarts the information of a previous process
  61. this.$nudify.reset()
  62. },
  63. methods: {
  64. /**
  65. * File selected, start a new transformation process
  66. */
  67. startFromFile(inputFile) {
  68. if (_.isNil(inputFile)) {
  69. swal(
  70. 'Upload failed',
  71. 'It seems that you have not selected a photo!',
  72. 'info'
  73. )
  74. return
  75. }
  76. // New File instance
  77. const file = File.fromPath(inputFile.path)
  78. this.start(file)
  79. },
  80. /**
  81. *
  82. */
  83. async startFromURL(url) {
  84. if (_.isNil(url)) {
  85. swal('Upload failed', 'This does not seem like a valid URL', 'info')
  86. return
  87. }
  88. swal({
  89. title: 'Loading...',
  90. text: 'We are downloading the photo and preparing it!',
  91. button: false,
  92. closeOnClickOutside: false,
  93. closeOnEsc: false
  94. })
  95. try {
  96. // New File instance
  97. const file = await File.fromURL(url)
  98. swal.close()
  99. this.start(file)
  100. } catch (err) {
  101. swal({
  102. icon: 'error',
  103. title: 'Upload failed',
  104. text: `An error has occurred downloading the photo or saving it in the temporary folder, please make sure you are connected to the Internet and that ${
  105. $dream.name
  106. } has permissions to save files.`
  107. })
  108. $rollbar.warn(err)
  109. }
  110. },
  111. /**
  112. *
  113. */
  114. start(file) {
  115. // Create a photo for the model ("null" model for now)
  116. const photo = new Photo(null, file)
  117. // Get any error message from the file
  118. const validationErrorMessage = photo.getValidationErrorMessage()
  119. if (!_.isNil(validationErrorMessage)) {
  120. swal('Upload failed', validationErrorMessage, 'error')
  121. return
  122. }
  123. // Start the transformation process!
  124. this.$nudify.start(photo)
  125. // It's time to crop the photo
  126. this.$router.push('/nudity/hub')
  127. },
  128. /**
  129. *
  130. */
  131. onPhotoSelected(event) {
  132. const { files } = event.target
  133. if (files.length === 0) {
  134. return
  135. }
  136. $nucleus.track('UPLOAD_SELECTED')
  137. this.startFromFile(files[0])
  138. event.target.value = ''
  139. },
  140. /**
  141. *
  142. */
  143. onURL() {
  144. if (_.isNil(this.webAddress) || this.webAddress.length === 0) {
  145. swal('Upload failed', 'Please enter a valid web address', 'error')
  146. return
  147. }
  148. $nucleus.track('UPLOAD_URL')
  149. this.startFromURL(this.webAddress)
  150. },
  151. /**
  152. *
  153. */
  154. onDragEnter(event) {
  155. event.dataTransfer.dropEffect = 'copy'
  156. this.isDraggingFile = true
  157. },
  158. /**
  159. *
  160. */
  161. onDragLeave() {
  162. this.isDraggingFile = false
  163. },
  164. /**
  165. *
  166. */
  167. onDragOver(event) {
  168. event.preventDefault()
  169. event.stopPropagation()
  170. event.dataTransfer.dropEffect = 'copy'
  171. this.isDraggingFile = true
  172. },
  173. /**
  174. *
  175. */
  176. onDrop(event) {
  177. event.preventDefault()
  178. event.stopPropagation()
  179. this.isDraggingFile = false
  180. const { files } = event.dataTransfer
  181. const externalURL = event.dataTransfer.getData('url')
  182. if (files.length > 0) {
  183. $nucleus.track('UPLOAD_DROP')
  184. this.startFromFile(files[0])
  185. } else if (externalURL.length > 0) {
  186. $nucleus.track('UPLOAD_DROP_URL')
  187. this.startFromURL(externalURL)
  188. }
  189. }
  190. }
  191. }
  192. </script>
  193. <style lang="scss">
  194. .c-nudity-upload {
  195. @apply w-full
  196. relative
  197. text-center
  198. mb-4;
  199. .upload-dropzone {
  200. @apply flex
  201. items-center
  202. justify-center
  203. bg-dark-400
  204. rounded
  205. border-transparent
  206. border-2
  207. border-dashed
  208. mb-4;
  209. height: 150px;
  210. transition: all 0.1s linear;
  211. &.is-dragging {
  212. @apply bg-dark-700 border-white;
  213. .dropzone-hint {
  214. @apply text-white;
  215. }
  216. }
  217. .dropzone-hint {
  218. @apply text-generic-300 uppercase;
  219. transition: all 0.1s linear;
  220. }
  221. }
  222. .upload-url {
  223. @apply mb-4 flex;
  224. .input {
  225. @apply flex-1 mr-4;
  226. }
  227. }
  228. &.is-dragging {
  229. @apply border-white border-dotted;
  230. .dragging-overlay {
  231. //display: block;
  232. }
  233. }
  234. .dragging-overlay {
  235. @apply bg-white absolute top-0 left-0 right-0 bottom-0 hidden;
  236. opacity: 0.3;
  237. }
  238. .fu-hint {
  239. @apply text-sm text-gray-600;
  240. }
  241. }
  242. </style>