home.js 6.4 KB

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