fork download
copy 
  1. function imageUploader(dialog) {
  2.      var image, xhr, xhrComplete, xhrProgress;
  3.  
  4.     // Set up the event handlers
  5.      dialog.addEventListener('imageuploader.cancelupload', function () {
  6.         // Cancel the current upload
  7.  
  8.         // Stop the upload
  9.         if (xhr) {
  10.             xhr.upload.removeEventListener('progress', xhrProgress);
  11.             xhr.removeEventListener('readystatechange', xhrComplete);
  12.             xhr.abort();
  13.         }
  14.  
  15.         // Set the dialog to empty
  16.         dialog.state('empty');
  17.     });
  18.  
  19.     dialog.addEventListener('imageuploader.clear', function () {
  20.         // Clear the current image
  21.         dialog.clear();
  22.         image = null;
  23.     });
  24.  
  25.     dialog.addEventListener('imageuploader.fileready', function (ev) {
  26.  
  27.         // Upload a file to the server
  28.         var formData;
  29.         var file = ev.detail().file;
  30.  
  31.         // Define functions to handle upload progress and completion
  32.         xhrProgress = function (ev) {
  33.             // Set the progress for the upload
  34.             dialog.progress((ev.loaded / ev.total) * 100);
  35.         }
  36.  
  37.         xhrComplete = function (ev) {
  38.             var response;
  39.  
  40.             // Check the request is complete
  41.             if (ev.target.readyState != 4) {
  42.                 return;
  43.             }
  44.  
  45.             // Clear the request
  46.             xhr = null
  47.             xhrProgress = null
  48.             xhrComplete = null
  49.  
  50.             // Handle the result of the upload
  51.             if (parseInt(ev.target.status) == 200) {
  52.                 // Unpack the response (from JSON)
  53.                 alert(ev.target.responseText);
  54.                 response = JSON.parse(ev.target.responseText);
  55.  
  56.                 // Store the image details
  57.                 image = {
  58.                     size: response.size,
  59.                     url: response.url
  60.                     };
  61.  
  62.                 // Populate the dialog
  63.                 dialog.populate(image.url, image.size);
  64.  
  65.             } else {
  66.                 // The request failed, notify the user
  67.                 new ContentTools.FlashUI('no');
  68.             }
  69.         }
  70.  
  71.         // Set the dialog state to uploading and reset the progress bar to 0
  72.         dialog.state('uploading');
  73.         dialog.progress(0);
  74.  
  75.         // Build the form data to post to the server
  76.         formData = new FormData();
  77.         formData.append('image', file);
  78.  
  79.         // Make the request
  80.         xhr = new XMLHttpRequest();
  81.         xhr.upload.addEventListener('progress', xhrProgress);
  82.         xhr.addEventListener('readystatechange', xhrComplete);
  83.         xhr.open('POST', 'HandleChange', true);
  84.         xhr.send(formData);
  85.     });
  86.  
  87.      dialog.addEventListener('imageuploader.save', function () {
  88.         var crop, cropRegion, formData;
  89.  
  90.         // Define a function to handle the request completion
  91.         xhrComplete = function (ev) {
  92.             // Check the request is complete
  93.             if (ev.target.readyState !== 4) {
  94.                 return;
  95.             }
  96.  
  97.             // Clear the request
  98.             xhr = null;
  99.             xhrComplete = null;
  100.  
  101.             // Free the dialog from its busy state
  102.             dialog.busy(false);
  103.  
  104.             // Handle the result of the rotation
  105.             if (parseInt(ev.target.status) === 200) {
  106.                 // Unpack the response (from JSON)
  107.                 var response = JSON.parse(ev.target.responseText);
  108.  
  109.                 // Trigger the save event against the dialog with details of the
  110.                 // image to be inserted.
  111.                 dialog.save(
  112.                     response.url,
  113.                     response.size,
  114.                     {
  115.                         'alt': response.alt,
  116.                         'data-ce-max-width': response.size[0]
  117.                     });
  118.  
  119.             } else {
  120.                 // The request failed, notify the user
  121.                 new ContentTools.FlashUI('no');
  122.             }
  123.         }
  124.  
  125.         // Set the dialog to busy while the rotate is performed
  126.         dialog.busy(true);
  127.  
  128.         // Build the form data to post to the server
  129.         formData = new FormData();
  130.         formData.append('url', image.url);
  131.  
  132.         // Set the width of the image when it's inserted, this is a default
  133.         // the user will be able to resize the image afterwards.
  134.         formData.append('width', 600);
  135.         // Check if a crop region has been defined by the user
  136.         if (dialog.cropRegion()) {
  137.             alert(dialog.cropRegion());
  138.             formData.append('crop', dialog.cropRegion());
  139.         }
  140.  
  141.         // Make the request
  142.         xhr = new XMLHttpRequest();
  143.         xhr.addEventListener('readystatechange', xhrComplete);
  144.         xhr.open('POST', 'HandleChange', true);
  145.         xhr.send(formData);
  146.     });
  147.  
  148.     ContentTools.IMAGE_UPLOADER = imageUploader;
  149. }
  150.  
Success #stdin #stdout 0.01s 16848KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
https://ideone.com/br0wlV
language:
JavaScript (SMonkey 60.2.3)
created:
7 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!