Merge pull request #10 from webkom/image-filename

Keep filename in uploaded blob

README.md

@@ -1,10 +1,9 @@
 # lego-editor
 
-![DroneCI](https://ci.abakus.no/api/badges/webkom/lego-editor/status.svg?branch=master)
+![DroneCI](https://ci.abakus.no/api/badges/webkom/lego-editor/status.svg?branch=master) ![npm (scoped)](https://img.shields.io/npm/v/@webkom/lego-editor?style=flat-square)
 
-> Work-in-progress editor for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org) ![npm (scoped)](https://img.shields.io/npm/v/@webkom/lego-editor?style=flat-square)
 
-<img src="https://i.imgur.com/6zIQhYm.png" />
+> Work-in-progress editor for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org) <img src="https://i.imgur.com/6zIQhYm.png" />
 
 ## Installation
 - Add the package

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webkom/lego-editor",
-  "version": "0.1.1",
+  "version": "1.0.1",
   "description": "A React editor written in TS with slate.js for lego-webapp",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/ImageUpload.tsx

@@ -73,15 +73,17 @@ export default class ImageUpload extends React.Component<Props, State> {
 
   submitImage = () => {
     //@ts-ignore
-    const { url } = this.state.currentImage;
+    const { url, file } = this.state.currentImage;
     const { crop } = this.state;
     const { uploadFunction } = this.props;
     const image = new Image(this.state.imageWidth, this.state.imageHeight);
     image.src = url;
 
     crop &&
       uploadFunction &&
-      cropImage(image, crop).then((result: Blob) => uploadFunction(result));
+      cropImage(image, crop, file.name).then((result: Blob) =>
+        uploadFunction(result)
+      );
   };
 
   cancel = () => {

src/utils/cropImage.ts

@@ -1,6 +1,14 @@
 import { Crop } from 'react-image-crop';
 
-const cropImage = (image: HTMLImageElement, crop: Crop): Promise<Blob> => {
+interface BlobWithName extends Blob {
+  name?: string;
+}
+
+const cropImage = (
+  image: HTMLImageElement,
+  crop: Crop,
+  name: string
+): Promise<BlobWithName> => {
   if (!crop.width || !crop.height) {
     crop.width = image.width;
     crop.height = image.height;
@@ -29,7 +37,13 @@ const cropImage = (image: HTMLImageElement, crop: Crop): Promise<Blob> => {
 
   return new Promise((resolve, reject) => {
     canvas.toBlob(result => {
-      result ? resolve(result) : reject();
+      if (result) {
+        //@ts-ignore
+        result.name = name;
+        resolve(result);
+      } else {
+        reject();
+      }
     }, 'image/jpeg');
   });
 };