Feature: Create Pin from uploaded file

pinry-spa/src/components/api.js

@@ -4,13 +4,33 @@ import storage from './utils/storage';
 const API_PREFIX = '/api/v2/';
 
 const Pin = {
-  createFromURL(jsonData) {
+  create(jsonData) {
     const url = `${API_PREFIX}pins/`;
     return axios.post(
       url,
       jsonData,
     );
   },
+  createFromURL(jsonData) {
+    return this.create(jsonData);
+  },
+  createFromUploaded(jsonData) {
+    return this.create(jsonData);
+  },
+  uploadImage(fileObject) {
+    const url = `${API_PREFIX}images/`;
+    const data = new FormData();
+    data.append('image', fileObject);
+    return axios.post(
+      url,
+      data,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      },
+    );
+  },
 };
 
 

pinry-spa/src/components/pin_create/FileUpload.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="image-upload">
     <div
-      v-show="previewExists"
+      v-show="previewImage !== null"
       class="has-text-centered is-center preview">
-      <img :src="previewImageURL">
+      <img :src="previewImage">
     </div>
-    <div v-show="!previewExists">
+    <div v-show="previewImage === null">
       <b-field>
-        <b-upload v-model="dropFiles"
+        <b-upload v-model="dropFile"
-                  multiple
+                  :loading="loading"
                   drag-drop>
           <section class="section">
             <div class="content has-text-centered">
@@ -28,25 +28,57 @@
 </template>
 
 <script>
+import API from '../api';
+import utils from '../utils/PinHandler';
+
 export default {
   name: 'FileUpload',
+  data() {
+    return {
+      dropFile: null,
+      loading: false,
+      uploadedImage: null,
+    };
+  },
   props: {
     previewImageURL: {
       type: String,
       default: null,
     },
   },
+  watch: {
+    dropFile(newFile) {
+      this.$emit('imageUploadProcessing');
+      this.loading = true;
+      API.Pin.uploadImage(newFile).then(
+        (resp) => {
+          this.uploadedImage = resp.data;
+          this.loading = false;
+          this.$emit('imageUploadSucceed', this.uploadedImage.id);
+        },
+        () => {
+          this.loading = false;
+          this.$emit('imageUploadFailed');
+        },
+      );
+    },
+  },
   computed: {
+    previewImage() {
+      if (this.previewExists()) {
+        return this.previewImageURL;
+      }
+      if (this.uploadedImage !== null) {
+        return utils.escapeUrl(this.uploadedImage.thumbnail.image);
+      }
+      return null;
+    },
+  },
+  methods: {
     previewExists() {
       return this.previewImageURL !== null && this.previewImageURL !== '';
     },
   },
-  data() {
-    return {
-      dropFiles: [],
-    };
-  },
-  methods: {},
 };
 </script>
 

pinry-spa/src/components/pin_create/PinCreateModal.vue

@@ -8,10 +8,15 @@
         <section class="modal-card-body">
           <div class="columns">
             <div class="column">
-              <FileUpload :previewImageURL="form.url.value"></FileUpload>
+              <FileUpload
+                :previewImageURL="form.url.value"
+                v-on:imageUploadSucceed="onUploadDone"
+                v-on:imageUploadProcessing="onUploadProcessing"
+              ></FileUpload>
             </div>
             <div class="column">
               <b-field label="Image URL"
+                       v-show="!disableUrlField"
                        :type="form.url.type"
                        :message="form.url.error">
                 <b-input
@@ -68,7 +73,7 @@
 </template>
 
 <script>
-import api from '../api';
+import API from '../api';
 import FileUpload from './FileUpload.vue';
 
 function isURLBlank(url) {
@@ -82,32 +87,54 @@ export default {
   },
   data() {
     return {
+      disableUrlField: false,
       form: {
         url: { value: null, error: null, type: null },
         referer: { value: null, error: null, type: null },
         description: { value: null, error: null, type: null },
         tags: { value: [], error: null, type: null },
       },
+      formUpload: {
+        imageId: null,
+      },
     };
   },
   methods: {
+    onUploadProcessing() {
+      this.disableUrlField = true;
+    },
+    onUploadDone(imageId) {
+      this.formUpload.imageId = imageId;
+    },
     createPin() {
       const self = this;
-      if (isURLBlank(isURLBlank)) {
+      let promise;
+      if (isURLBlank(this.form.url.value) && this.formUpload.imageId === null) {
+        return;
+      }
+      if (this.formUpload.imageId === null) {
         const data = {
           url: this.form.url.value,
           referer: this.form.referer.value,
           description: this.form.description.value,
           tags: this.form.tags.value,
         };
-        const promise = api.Pin.createFromURL(data);
+        promise = API.Pin.createFromURL(data);
-        promise.then(
+      } else {
-          (resp) => {
+        const data = {
-            self.$emit('pin.created', resp);
+          referer: this.form.referer.value,
-            self.$parent.close();
+          description: this.form.description.value,
-          },
+          tags: this.form.tags.value,
-        );
+          image_by_id: this.formUpload.imageId,
+        };
+        promise = API.Pin.createFromUploaded(data);
       }
+      promise.then(
+        (resp) => {
+          self.$emit('pinCreated', resp);
+          self.$parent.close();
+        },
+      );
     },
   },
 };