feat(upload-photo): added options to choose between upload from computer or external url

Refs: 2627

front/salix/components/upload-photo/index.html

@@ -4,7 +4,7 @@
     message="Edit photo">
     <tpl-body class="upload-photo">
     <vn-horizontal>
-        <vn-one ng-if="file.value">
+        <vn-one ng-if="file.value || $ctrl.newPhoto.url">
             <vn-horizontal>
                 <vn-icon-button vn-none
                     icon="rotate_left"
@@ -20,12 +20,26 @@
             </vn-horizontal>
         </vn-one>
         <vn-one>
-            <vn-horizontal>
+            <vn-vertical class="vn-mb-sm">
+                <vn-radio
+                    label="Select file from computer"
+                    val="computer"
+                    ng-model="$ctrl.uploadMethod"
+                    tabindex="-1">
+                </vn-radio>
+                <vn-radio
+                    label="Import from external URL"
+                    val="URL"
+                    ng-model="$ctrl.uploadMethod"
+                    tabindex="-1">
+                </vn-radio>
+            </vn-vertical>
+            <vn-horizontal ng-if="$ctrl.uploadMethod == 'computer'">
                 <vn-input-file vn-id="file"
                     vn-one 
                     label="File" 
                     ng-model="$ctrl.newPhoto.files"
-                    on-change="$ctrl.updatePhotoPreview(value)"
+                    on-change="$ctrl.updatePhotoPreview(value[0])"
                     accept="{{$ctrl.allowedContentTypes}}"
                     required="true">
                     <append>
@@ -37,6 +51,14 @@
                     </append>
                 </vn-input-file>
             </vn-horizontal>
+            <vn-horizontal ng-if="$ctrl.uploadMethod == 'URL'">
+                <vn-textfield
+                    vn-one
+                    ng-model="$ctrl.newPhoto.url"
+                    on-change="$ctrl.updatePhotoPreview(value)"
+                    placeholder="https://">
+                </vn-textfield>
+            </vn-horizontal>
             <vn-horizontal>
                 <vn-autocomplete
                     label="Type"

front/salix/components/upload-photo/index.js

@@ -39,6 +39,7 @@ export default class UploadPhoto extends Component {
             }
         ];
         this.viewportType = 'normal';
+        this.uploadMethod = 'computer';
         this.getAllowedContentTypes();
     }
 
@@ -64,11 +65,16 @@ export default class UploadPhoto extends Component {
     set viewportSelection(value) {
         this._viewportSelection = value;
 
-        if (value && this.newPhoto.files) {
-            this.displayEditor();
-            const files = this.newPhoto.files;
-            this.updatePhotoPreview(files);
-        }
+        const hasFile = this.newPhoto.files || this.newPhoto.url;
+        if (!value || !hasFile) return;
+
+        let file;
+        if (this.uploadMethod == 'computer')
+            file = this.newPhoto.files[0];
+        else if (this.uploadMethod == 'URL')
+            file = this.newPhoto.url;
+
+        this.updatePhotoPreview(file);
     }
 
     getAllowedContentTypes() {
@@ -90,13 +96,15 @@ export default class UploadPhoto extends Component {
      * @param {string} value
      */
     updatePhotoPreview(value) {
-        if (value && value[0]) {
-            if (!this.editor)
-                this.displayEditor();
+        if (value) {
+            this.displayEditor();
 
-            const reader = new FileReader();
-            reader.onload = e => this.editor.bind({url: e.target.result});
-            reader.readAsDataURL(value[0]);
+            if (this.uploadMethod == 'computer') {
+                const reader = new FileReader();
+                reader.onload = e => this.editor.bind({url: e.target.result});
+                reader.readAsDataURL(value);
+            } else if (this.uploadMethod == 'URL')
+                this.editor.bind({url: value});
         }
     }
 

front/salix/components/upload-photo/locale/es.yml

@@ -3,4 +3,6 @@ Select an image: Selecciona una imagen
 File name: Nombre del fichero
 Rotate left: Girar a la izquierda
 Rotate right: Girar a la derecha
-Panoramic: Panorámico
+Panoramic: Panorámico
+Select from computer: Seleccionar foto desde ordenador
+Import from external URL: Importar desde URL externa