gr-imagare/gr-imagare-upload.js - plugins/imagare - Git at Google

 /**
  * @license
  * Copyright (C) 2019 The Android Open Source Project
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */

 import './gr-imagare-list-item.js';
 import {htmlTemplate} from './gr-imagare-upload_html.js';

 function preventDefaultFn(event) {
   event.preventDefault();
 }

 class GrImagareUpload extends Polymer.GestureEventListeners(
     Polymer.LegacyElementMixin(
         Polymer.Element)) {
   /** @returns {?} template for this component */
   static get template() { return htmlTemplate; }

   /** @returns {string} name of the component */
   static get is() { return 'gr-imagare-upload'; }

   /**
    * Defines properties of the component
    *
    * @returns {?}
    */
   static get properties() {
     return {
       _loading: {
         type: Boolean,
         value: true,
       },
       _allUploaded: {
         type: Boolean,
         value: false,
       },
       _imageProject: String,
       _defaultImageProject: String,
       _images: {
         type: Map,
         value: () => new Map(),
       },
       _stageImages: {
         type: Boolean,
         value: true,
       },
       _undefinedFileCounter: {
         type: Number,
         value: 0,
       },
       _query: {
         type: Function,
         value() {
           return this._queryProjects.bind(this);
         },
       },
     };
   }

   static get listeners() {
     return {
       clear: '_handleClearImage',
       delete: '_handleDeleteImage',
       editName: '_handleEditImageName',
       upload: '_handleUploadImage',
     };
   }

   attached() {
     super.attached();
     this.fire('title-change', {title: 'Image Upload'});

     window.addEventListener('dragover', preventDefaultFn, false);
     window.addEventListener('drop', preventDefaultFn, false);
     this.$.dragDropArea.addEventListener('paste', preventDefaultFn, false);

     this._getUserPreferences();
   }

   detached() {
     window.removeEventListener('dragover', preventDefaultFn, false);
     window.removeEventListener('drop', preventDefaultFn, false);
     this.$.dragDropArea.removeEventListener('paste', preventDefaultFn, false);
   }

   _computeFilenameWithCorrectType(filedata, filename) {
     const realFiletype = filedata.slice(
         filedata.indexOf('/') + 1,
         filedata.indexOf(';'));

     let givenFiletype;

     if (filename.indexOf('.') !== -1) {
       givenFiletype = filename.split('.').pop();
     }

     if (!givenFiletype || realFiletype !== givenFiletype) {
       filename += `.${realFiletype}`;
     }

     return filename;
   }

   _computeLoadingClass(loading) {
     return loading ? 'loading' : '';
   }

   _computeSettingsUrl() {
     return `${location.origin}/settings#ImagarePreferences`;
   }

   _computeUploadAllDisabled() {
     if (this._images) {
       for (const value of this._images.values()) {
         if (!value.uploaded) {
           this._allUploaded = false;
           return;
         }
       }
     }

     this._allUploaded = true;
   }

   _createImageObject(name, data, url, list_entry, uploaded, ref) {
     return {data, list_entry, name, ref, url, uploaded};
   }

   _createListEntry(name, data, url) {
     const imagePanel = document.createElement('gr-imagare-list-item');
     imagePanel.setAttribute('image-name', name);

     if (data) {
       imagePanel.setAttribute('image-data', data);
     }

     if (url) {
       imagePanel.setAttribute('image-url', url);
       imagePanel.uploaded = true;
     } else {
       imagePanel.uploaded = false;
     }

     this.$.imageList.appendChild(imagePanel);

     return imagePanel;
   }

   _deleteImage(image) {
     this.plugin.restApi('/projects')
         .delete(`/${this._imageProject}/imagare~images/${image.ref}`)
         .then(() => {
           image.list_entry.remove();
           this._images.delete(image.name);
           if (!this.$.imageList.hasChildNodes()) {
             this.$.imageListContainer.hidden = true;
           }
         }).catch(response => {
           this.fire('show-error', {message: response});
         });
   }

   _extractImageRef(url) {
     return url.split('/').slice(-2)[0];
   }

   _getUserPreferences() {
     this.plugin.restApi('/accounts/self/')
         .get(`imagare~preference`)
         .then(config => {
           if (!config) {
             return;
           }

           this._defaultImageProject = config.default_project;
           this._imageProject = config.default_project;
           this._stageImages = config.stage;
           this._loading = false;
         });
   }

   _handleClearAllImages() {
     while (this.$.imageList.firstChild) {
       this.$.imageList.removeChild(this.$.imageList.firstChild);
     }
     this.$.imageListContainer.hidden = true;

     this._images.clear();
   }

   _handleClearImage(event) {
     event.stopPropagation();
     this._images.delete(event.target.imageName);
     event.target.remove();
     if (!this.$.imageList.hasChildNodes()) {
       this.$.imageListContainer.hidden = true;
     }
   }

   _handleDeleteImage(event) {
     event.stopPropagation();
     this._deleteImage(this._images.get(event.target.imageName));
   }

   _handleDrop(event) {
     event.preventDefault();
     event.stopPropagation();

     for (const file of event.dataTransfer.files) {
       if (!file.type.match('image/.*')) {
         this.fire('show-error', {message: `No image file: ${file.name}`});
       }
       const fr = new FileReader();
       fr.file = file;
       fr.onload = fileLoadEvent => this._handleFileLoadEvent(
           fr.file.name, fileLoadEvent);
       fr.readAsDataURL(file);
     }
   }

   _handleEditImageName(event) {
     event.stopPropagation();
     const editedImage = this._images.get(event.detail.oldName);
     if (this._images.has(event.detail.newName)) {
       this.fire(
           'show-error',
           {message: 'An image with the same name was already staged.'});
       editedImage.list_entry.setAttribute('image-name', event.detail.oldName);
     } else {
       editedImage.name = event.detail.newName;
       this._images.set(editedImage.name, editedImage);
       this._images.delete(event.detail.oldName);
     }
   }

   _handleFileLoadEvent(filename, event) {
     const correctedFilename = this._computeFilenameWithCorrectType(
         event.target.result, filename);
     if (this._stageImages) {
       this._stageImage(correctedFilename, event.target.result);
     } else {
       const image = this._createImageObject(
           correctedFilename, event.target.result);
       this._images.set(correctedFilename, image);
       this._uploadImage(image);
     }
   }

   _handleKeyPress(event) {
     const ctrlDown = event.ctrlKey || event.metaKey;
     if (!ctrlDown) {
       event.preventDefault();
       event.stopPropagation();
     }
   }

   _handleImagePathChanged(event) {
     for (const file of event.target.files) {
       const fr = new FileReader();
       fr.file = file;
       fr.onload = fileLoadEvent => this._handleFileLoadEvent(
           fr.file.name, fileLoadEvent);
       fr.readAsDataURL(file);
     }

     event.target.value = '';
   }

   _handlePaste(event) {
     const clipboardData = event.clipboardData
         || event.originalEvent.clipboardData;
     const items = clipboardData.items;
     if (JSON.stringify(items)) {
       let blob;
       for (const item of items) {
         if (item.type.indexOf('image') === 0) {
           blob = item.getAsFile();
         }
       }
       if (blob) {
         const fr = new FileReader();
         fr.onload = fileLoadEvent => {
           const filename = `undefined-${this._undefinedFileCounter}`;
           this._undefinedFileCounter++;
           this._handleFileLoadEvent(filename, fileLoadEvent);
         };
         fr.readAsDataURL(blob);
       } else {
         event.preventDefault();
         this.fire('show-error', {message: `No image file`});
       }
     }
   }

   _handleUploadAllImages() {
     for (const image of this._images.values()) {
       this._uploadImage(image);
     }
   }

   _handleUploadImage(event) {
     event.stopPropagation();
     const image = this._createImageObject(
         event.target.imageName,
         event.target.imageData,
         null,
         event.target);
     this._images.set(image.name, image);
     this._uploadImage(image);
   }

   _queryProjects(input) {
     let query;
     if (!input || input === this._defaultImageProject) {
       query = '';
     } else {
       query = `?prefix=${input}`;
     }

     return this.plugin.restApi('/a/projects/').get(query)
         .then(response => {
           const projects = [];
           for (const key in response) {
             if (!response.hasOwnProperty(key)) { continue; }
             projects.push({
               name: key,
               value: decodeURIComponent(response[key].id),
             });
           }
           return projects;
         });
   }

   _stageImage(name, data) {
     if (this._images.has(name)) {
       const fileName = name.slice(0, name.lastIndexOf('.'));
       const fileExtension = name.slice(name.lastIndexOf('.'));
       name = `${fileName}-${this._undefinedFileCounter}${fileExtension}`;
       this._undefinedFileCounter++;
     }
     const imagePanel = this._createListEntry(name, data, null);
     this._images.set(
         name, this._createImageObject(name, data, null, imagePanel));
     this.$.imageListContainer.hidden = false;
     this._computeUploadAllDisabled();
   }

   _uploadImage(image) {
     if (image && image.uploaded) {
       return;
     }

     this.plugin.restApi('/projects')
         .post(`/${this._imageProject}/imagare~images`, {
           image_data: image.data,
           file_name: image.name,
         })
         .then(response => {
           if (!image.list_entry) {
             image.list_entry = this._createListEntry(
                 image.name, image.data, response.url);
           } else {
             image.list_entry.setAttribute('image-url', response.url);
             image.list_entry.uploaded = true;
           }

           this._images.set(
               image.name,
               this._createImageObject(
                   image.name, image.data, response.url, image.list_entry, true,
                   this._extractImageRef(response.url)));

           this.$.imageListContainer.hidden = false;
           this._computeUploadAllDisabled();
         }).catch(response => {
           this.fire('show-error', {message: response});
         });
   }
 }

 customElements.define(GrImagareUpload.is, GrImagareUpload);
	/**
	* @license
	* Copyright (C) 2019 The Android Open Source Project
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/

	import './gr-imagare-list-item.js';
	import {htmlTemplate} from './gr-imagare-upload_html.js';

	function preventDefaultFn(event) {
	event.preventDefault();
	}

	class GrImagareUpload extends Polymer.GestureEventListeners(
	Polymer.LegacyElementMixin(
	Polymer.Element)) {
	/** @returns {?} template for this component */
	static get template() { return htmlTemplate; }

	/** @returns {string} name of the component */
	static get is() { return 'gr-imagare-upload'; }

	/**
	* Defines properties of the component
	*
	* @returns {?}
	*/
	static get properties() {
	return {
	_loading: {
	type: Boolean,
	value: true,
	},
	_allUploaded: {
	type: Boolean,
	value: false,
	},
	_imageProject: String,
	_defaultImageProject: String,
	_images: {
	type: Map,
	value: () => new Map(),
	},
	_stageImages: {
	type: Boolean,
	value: true,
	},
	_undefinedFileCounter: {
	type: Number,
	value: 0,
	},
	_query: {
	type: Function,
	value() {
	return this._queryProjects.bind(this);
	},
	},
	};
	}

	static get listeners() {
	return {
	clear: '_handleClearImage',
	delete: '_handleDeleteImage',
	editName: '_handleEditImageName',
	upload: '_handleUploadImage',
	};
	}

	attached() {
	super.attached();
	this.fire('title-change', {title: 'Image Upload'});

	window.addEventListener('dragover', preventDefaultFn, false);
	window.addEventListener('drop', preventDefaultFn, false);
	this.$.dragDropArea.addEventListener('paste', preventDefaultFn, false);

	this._getUserPreferences();
	}

	detached() {
	window.removeEventListener('dragover', preventDefaultFn, false);
	window.removeEventListener('drop', preventDefaultFn, false);
	this.$.dragDropArea.removeEventListener('paste', preventDefaultFn, false);
	}

	_computeFilenameWithCorrectType(filedata, filename) {
	const realFiletype = filedata.slice(
	filedata.indexOf('/') + 1,
	filedata.indexOf(';'));

	let givenFiletype;

	if (filename.indexOf('.') !== -1) {
	givenFiletype = filename.split('.').pop();
	}

	if (!givenFiletype \|\| realFiletype !== givenFiletype) {
	filename += `.${realFiletype}`;
	}

	return filename;
	}

	_computeLoadingClass(loading) {
	return loading ? 'loading' : '';
	}

	_computeSettingsUrl() {
	return `${location.origin}/settings#ImagarePreferences`;
	}

	_computeUploadAllDisabled() {
	if (this._images) {
	for (const value of this._images.values()) {
	if (!value.uploaded) {
	this._allUploaded = false;
	return;
	}
	}
	}

	this._allUploaded = true;
	}

	_createImageObject(name, data, url, list_entry, uploaded, ref) {
	return {data, list_entry, name, ref, url, uploaded};
	}

	_createListEntry(name, data, url) {
	const imagePanel = document.createElement('gr-imagare-list-item');
	imagePanel.setAttribute('image-name', name);

	if (data) {
	imagePanel.setAttribute('image-data', data);
	}

	if (url) {
	imagePanel.setAttribute('image-url', url);
	imagePanel.uploaded = true;
	} else {
	imagePanel.uploaded = false;
	}

	this.$.imageList.appendChild(imagePanel);

	return imagePanel;
	}

	_deleteImage(image) {
	this.plugin.restApi('/projects')
	.delete(`/${this._imageProject}/imagare~images/${image.ref}`)
	.then(() => {
	image.list_entry.remove();
	this._images.delete(image.name);
	if (!this.$.imageList.hasChildNodes()) {
	this.$.imageListContainer.hidden = true;
	}
	}).catch(response => {
	this.fire('show-error', {message: response});
	});
	}

	_extractImageRef(url) {
	return url.split('/').slice(-2)[0];
	}

	_getUserPreferences() {
	this.plugin.restApi('/accounts/self/')
	.get(`imagare~preference`)
	.then(config => {
	if (!config) {
	return;
	}

	this._defaultImageProject = config.default_project;
	this._imageProject = config.default_project;
	this._stageImages = config.stage;
	this._loading = false;
	});
	}

	_handleClearAllImages() {
	while (this.$.imageList.firstChild) {
	this.$.imageList.removeChild(this.$.imageList.firstChild);
	}
	this.$.imageListContainer.hidden = true;

	this._images.clear();
	}

	_handleClearImage(event) {
	event.stopPropagation();
	this._images.delete(event.target.imageName);
	event.target.remove();
	if (!this.$.imageList.hasChildNodes()) {
	this.$.imageListContainer.hidden = true;
	}
	}

	_handleDeleteImage(event) {
	event.stopPropagation();
	this._deleteImage(this._images.get(event.target.imageName));
	}

	_handleDrop(event) {
	event.preventDefault();
	event.stopPropagation();

	for (const file of event.dataTransfer.files) {
	if (!file.type.match('image/.*')) {
	this.fire('show-error', {message: `No image file: ${file.name}`});
	}
	const fr = new FileReader();
	fr.file = file;
	fr.onload = fileLoadEvent => this._handleFileLoadEvent(
	fr.file.name, fileLoadEvent);
	fr.readAsDataURL(file);
	}
	}

	_handleEditImageName(event) {
	event.stopPropagation();
	const editedImage = this._images.get(event.detail.oldName);
	if (this._images.has(event.detail.newName)) {
	this.fire(
	'show-error',
	{message: 'An image with the same name was already staged.'});
	editedImage.list_entry.setAttribute('image-name', event.detail.oldName);
	} else {
	editedImage.name = event.detail.newName;
	this._images.set(editedImage.name, editedImage);
	this._images.delete(event.detail.oldName);
	}
	}

	_handleFileLoadEvent(filename, event) {
	const correctedFilename = this._computeFilenameWithCorrectType(
	event.target.result, filename);
	if (this._stageImages) {
	this._stageImage(correctedFilename, event.target.result);
	} else {
	const image = this._createImageObject(
	correctedFilename, event.target.result);
	this._images.set(correctedFilename, image);
	this._uploadImage(image);
	}
	}

	_handleKeyPress(event) {
	const ctrlDown = event.ctrlKey \|\| event.metaKey;
	if (!ctrlDown) {
	event.preventDefault();
	event.stopPropagation();
	}
	}

	_handleImagePathChanged(event) {
	for (const file of event.target.files) {
	const fr = new FileReader();
	fr.file = file;
	fr.onload = fileLoadEvent => this._handleFileLoadEvent(
	fr.file.name, fileLoadEvent);
	fr.readAsDataURL(file);
	}

	event.target.value = '';
	}

	_handlePaste(event) {
	const clipboardData = event.clipboardData
	\|\| event.originalEvent.clipboardData;
	const items = clipboardData.items;
	if (JSON.stringify(items)) {
	let blob;
	for (const item of items) {
	if (item.type.indexOf('image') === 0) {
	blob = item.getAsFile();
	}
	}
	if (blob) {
	const fr = new FileReader();
	fr.onload = fileLoadEvent => {
	const filename = `undefined-${this._undefinedFileCounter}`;
	this._undefinedFileCounter++;
	this._handleFileLoadEvent(filename, fileLoadEvent);
	};
	fr.readAsDataURL(blob);
	} else {
	event.preventDefault();
	this.fire('show-error', {message: `No image file`});
	}
	}
	}

	_handleUploadAllImages() {
	for (const image of this._images.values()) {
	this._uploadImage(image);
	}
	}

	_handleUploadImage(event) {
	event.stopPropagation();
	const image = this._createImageObject(
	event.target.imageName,
	event.target.imageData,
	null,
	event.target);
	this._images.set(image.name, image);
	this._uploadImage(image);
	}

	_queryProjects(input) {
	let query;
	if (!input \|\| input === this._defaultImageProject) {
	query = '';
	} else {
	query = `?prefix=${input}`;
	}

	return this.plugin.restApi('/a/projects/').get(query)
	.then(response => {
	const projects = [];
	for (const key in response) {
	if (!response.hasOwnProperty(key)) { continue; }
	projects.push({
	name: key,
	value: decodeURIComponent(response[key].id),
	});
	}
	return projects;
	});
	}

	_stageImage(name, data) {
	if (this._images.has(name)) {
	const fileName = name.slice(0, name.lastIndexOf('.'));
	const fileExtension = name.slice(name.lastIndexOf('.'));
	name = `${fileName}-${this._undefinedFileCounter}${fileExtension}`;
	this._undefinedFileCounter++;
	}
	const imagePanel = this._createListEntry(name, data, null);
	this._images.set(
	name, this._createImageObject(name, data, null, imagePanel));
	this.$.imageListContainer.hidden = false;
	this._computeUploadAllDisabled();
	}

	_uploadImage(image) {
	if (image && image.uploaded) {
	return;
	}

	this.plugin.restApi('/projects')
	.post(`/${this._imageProject}/imagare~images`, {
	image_data: image.data,
	file_name: image.name,
	})
	.then(response => {
	if (!image.list_entry) {
	image.list_entry = this._createListEntry(
	image.name, image.data, response.url);
	} else {
	image.list_entry.setAttribute('image-url', response.url);
	image.list_entry.uploaded = true;
	}

	this._images.set(
	image.name,
	this._createImageObject(
	image.name, image.data, response.url, image.list_entry, true,
	this._extractImageRef(response.url)));

	this.$.imageListContainer.hidden = false;
	this._computeUploadAllDisabled();
	}).catch(response => {
	this.fire('show-error', {message: response});
	});
	}
	}

	customElements.define(GrImagareUpload.is, GrImagareUpload);