export const REQUEST_TYPE_POST = 'POST'; export const REQUEST_TYPE_GET = 'GET'; export const REQUEST_TYPE_PUT = 'PUT'; export const REQUEST_TYPE_DELETE = 'DELETE'; export const CONTENT_TYPE_JSON = 'json'; export const CONTENT_TYPE_FORM = 'x-www-form-urlencoded'; import EventEmitter from '../events/EventEmitter'; class DataUtils extends EventEmitter { //-------------------------- // constructor //-------------------------- constructor() { super(); } //-------------------------- // methods //-------------------------- request( requestURL, eventType, requestType = REQUEST_TYPE_GET, contentType = CONTENT_TYPE_JSON, requestData = null ) { var self = this; return new Promise(function(resolve, reject) { var request = new XMLHttpRequest(); request.upload.onprogress = self.handleLoadProgress; request.open(requestType, requestURL, true); request.onload = () => { if (request.status == 200) { resolve({ request, eventType }); } else { reject({ request, eventType }); } }; if (requestType == REQUEST_TYPE_PUT || requestType == REQUEST_TYPE_POST) { switch (contentType) { case CONTENT_TYPE_JSON: request.setRequestHeader('Content-type', 'application/' + contentType); request.send(JSON.stringify(requestData)); break; case CONTENT_TYPE_FORM: request.send(requestData); break; } } else { request.send(); } }); } imgLoad(url) { 'use strict'; // Create new promise with the Promise() constructor; // This has as its argument a function with two parameters, resolve and reject return new Promise(function(resolve, reject) { // Standard XHR to load an image var request = new XMLHttpRequest(); request.open('GET', url); request.responseType = 'blob'; // When the request loads, check whether it was successful request.onload = function() { if (request.status === 200) { // If successful, resolve the promise by passing back the request response resolve(request.response); } else { // If it fails, reject the promise with a error message reject( new Error( "Image didn't load successfully; error code:" + request.statusText ) ); } }; request.onerror = function() { // Also deal with the case when the entire request fails to begin with // This is probably a network error, so reject the promise with an appropriate message reject(new Error('There was a network error.')); }; // Send the request request.send(); }); } loadImage(src) { 'use strict'; let self = this; return new Promise(function(resolve, reject) { // Get a reference to the body element, and create a new image object var myImage = new Image(); myImage.crossOrigin = ''; // or "anonymous" // Call the function with the URL we want to load, but then chain the // promise then() method on to the end of it. This contains two callbacks self.imgLoad(src).then( function(response) { // The first runs when the promise resolves, with the request.reponse specified within the resolve() method. var imageURL = window.URL.createObjectURL(response); resolve(imageURL); //$('background-content').setStyle('background-image', 'url('+imageURL+')') //myImage.src = imageURL; //console.log(imageURL); //body.appendChild(myImage); // The second runs when the promise is rejected, and logs the Error specified with the reject() method. }, function(Error) { reject(Error); } ); }); } /** * Create a function to convert the serialize and convert the form data to JSON * @param : $('#form_example'); * @return a JSON Stringify */ formDataToJSON(form) { let object = {}; let formData = new FormData(form); formData.forEach((value, key) => { if (!object.hasOwnProperty(key)) { object[key] = value; return; } if (!Array.isArray(object[key])) { object[key] = [object[key]]; } object[key].push(value); }); let json = JSON.stringify(object); return json; } //-------------------------- // event handlers //-------------------------- handleLoadProgress() { //var percentComplete = Math.ceil((e.loaded / e.total) * 100); //console.log(percentComplete); } } export default DataUtils;