home.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. var upload = {};
  2. upload.isPrivate = true;
  3. upload.token = localStorage.token;
  4. upload.maxFileSize;
  5. // add the album var to the upload so we can store the album id in there
  6. upload.album;
  7. upload.checkIfPublic = function(){
  8. axios.get('/api/check')
  9. .then(function (response) {
  10. upload.isPrivate= response.data.private;
  11. upload.maxFileSize = response.data.maxFileSize;
  12. upload.preparePage();
  13. })
  14. .catch(function (error) {
  15. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  16. console.log(error);
  17. });
  18. }
  19. upload.preparePage = function(){
  20. if(!upload.isPrivate) return upload.prepareUpload();
  21. if(!upload.token) return document.getElementById('loginToUpload').style.display = 'inline-flex';
  22. upload.verifyToken(upload.token, true);
  23. }
  24. upload.verifyToken = function(token, reloadOnError){
  25. if(reloadOnError === undefined)
  26. reloadOnError = false;
  27. axios.post('/api/tokens/verify', {
  28. token: token
  29. })
  30. .then(function (response) {
  31. if(response.data.success === false){
  32. swal({
  33. title: "An error ocurred",
  34. text: response.data.description,
  35. type: "error"
  36. }, function(){
  37. if(reloadOnError){
  38. localStorage.removeItem("token");
  39. location.reload();
  40. }
  41. })
  42. return;
  43. }
  44. localStorage.token = token;
  45. upload.token = token;
  46. return upload.prepareUpload();
  47. })
  48. .catch(function (error) {
  49. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  50. console.log(error);
  51. });
  52. }
  53. upload.prepareUpload = function(){
  54. // I think this fits best here because we need to check for a valid token before we can get the albums
  55. if (upload.token) {
  56. var select = document.querySelector('select');
  57. axios.get('/api/albums', { headers: { token: upload.token }})
  58. .then(function(res) {
  59. var albums = res.data.albums;
  60. // if the user doesn't have any albums we don't really need to display
  61. // an album selection
  62. if (albums.length === 0) return;
  63. // loop through the albums and create an option for each album
  64. for (var i = 0; i < albums.length; i++) {
  65. var opt = document.createElement('option');
  66. opt.value = albums[i].id;
  67. opt.innerHTML = albums[i].name;
  68. select.appendChild(opt);
  69. }
  70. // display the album selection
  71. document.getElementById('albumDiv').style.display = 'block';
  72. })
  73. .catch(function(e) {
  74. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  75. console.log(e);
  76. })
  77. }
  78. div = document.createElement('div');
  79. div.id = 'dropzone';
  80. div.innerHTML = 'Click here or drag and drop files';
  81. div.style.display = 'flex';
  82. document.getElementById('maxFileSize').innerHTML = 'Maximum upload size per file is ' + upload.maxFileSize;
  83. document.getElementById('loginToUpload').style.display = 'none';
  84. if(upload.token === undefined)
  85. document.getElementById('loginLinkText').innerHTML = 'Create an account and keep track of your uploads';
  86. document.getElementById('uploadContainer').appendChild(div);
  87. upload.prepareDropzone();
  88. }
  89. upload.prepareDropzone = function(){
  90. var previewNode = document.querySelector('#template');
  91. previewNode.id = '';
  92. var previewTemplate = previewNode.parentNode.innerHTML;
  93. previewNode.parentNode.removeChild(previewNode);
  94. var dropzone = new Dropzone('div#dropzone', {
  95. url: '/api/upload',
  96. paramName: 'files[]',
  97. maxFilesize: upload.maxFileSize.slice(0, -2),
  98. parallelUploads: 2,
  99. uploadMultiple: false,
  100. previewsContainer: 'div#uploads',
  101. previewTemplate: previewTemplate,
  102. createImageThumbnails: false,
  103. maxFiles: 1000,
  104. autoProcessQueue: true,
  105. headers: {
  106. 'token': upload.token
  107. },
  108. init: function() {
  109. this.on('addedfile', function(file) {
  110. myDropzone = this;
  111. document.getElementById('uploads').style.display = 'block';
  112. });
  113. // add the selected albumid, if an album is selected, as a header
  114. this.on('sending', function(file, xhr) {
  115. if (upload.album) {
  116. xhr.setRequestHeader('albumid', upload.album)
  117. }
  118. });
  119. }
  120. });
  121. // Update the total progress bar
  122. dropzone.on('uploadprogress', function(file, progress) {
  123. file.previewElement.querySelector('.progress').setAttribute('value', progress);
  124. file.previewElement.querySelector('.progress').innerHTML = progress + '%';
  125. });
  126. dropzone.on('success', function(file, response) {
  127. // Handle the responseText here. For example, add the text to the preview element:
  128. if(response.success === false){
  129. var span = document.createElement('span');
  130. span.innerHTML = response.description;
  131. file.previewTemplate.querySelector('.link').appendChild(span);
  132. return;
  133. }
  134. a = document.createElement('a');
  135. a.href = response.files[0].url;
  136. a.target = '_blank';
  137. a.innerHTML = response.files[0].url;
  138. file.previewTemplate.querySelector('.link').appendChild(a);
  139. file.previewTemplate.querySelector('.progress').style.display = 'none';
  140. });
  141. }
  142. //Handle image paste event
  143. window.addEventListener('paste', function(event) {
  144. var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  145. for (index in items) {
  146. var item = items[index];
  147. if (item.kind === 'file') {
  148. var blob = item.getAsFile();
  149. console.log(blob.type);
  150. var file = new File([blob], "pasted-image."+blob.type.match(/(?:[^\/]*\/)([^;]*)/)[1]);
  151. file.type = blob.type;
  152. console.log(file);
  153. myDropzone.addFile(file);
  154. }
  155. }
  156. });
  157. window.onload = function () {
  158. upload.checkIfPublic();
  159. // eventlistener for the album select
  160. document.querySelector('select').addEventListener('change', function() {
  161. upload.album = document.querySelector('select').value;
  162. });
  163. };