replace placeholder string with uploaded string

InsidersByte · Apr 7, 2016 · 952c7db · 952c7db
1 parent 0dfcc72
commit 952c7db
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -17,13 +17,28 @@ class App extends React.Component {
         this.updateMarkdown = this.updateMarkdown.bind(this);
     }
 
+    onImageDrop(file) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    filename: file.name,
+                    url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
+                });
+            }, 1000);
+        });
+    }
+
     updateMarkdown(event) {
         this.setState({ markdown: event.target.value });
     }
 
     render() {
         return (
-            <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} />
+            <MarkdownEditor
+                value={this.state.markdown}
+                onChange={this.updateMarkdown}
+                onImageDrop={this.onImageDrop}
+            />
         );
     }
 }

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,8 @@ import MarkdownRenderer from 'react-markdown-renderer';
 import TextArea from 'react-textarea-autosize';
 
 const imageType = /^image\//;
+const placeholderTemplate = (filename) => `![uploading ${filename}...]()`;
+const uploadedTemplate = (filename, url) => `![${filename}](${url})`;
 
 class MarkdownEditor extends React.Component {
     constructor(props) {
@@ -17,14 +19,34 @@ class MarkdownEditor extends React.Component {
         const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
         const filesArray = [...files];
         const images = filesArray.filter(o => imageType.test(o.type));
-        const imageFileNames = images.map(o => `![${o.name}]()`);
+        const imageFileNames = images.map(o => placeholderTemplate(o.name));
         const imagePlaceholders = imageFileNames.join('\n');
 
         this.props.onChange({
             target: {
                 value: `${this.props.value}\n${imagePlaceholders}`,
             },
         });
+
+        for (const image of images) {
+            Promise
+                .resolve(this.props.onImageDrop(image))
+                .then(({ filename, url }) => {
+                    if (!filename || !url) {
+                        return;
+                    }
+
+                    const templateString = placeholderTemplate(filename);
+                    const uploadedString = uploadedTemplate(filename, url);
+                    const value = this.props.value.replace(templateString, uploadedString);
+
+                    this.props.onChange({
+                        target: {
+                            value,
+                        },
+                    });
+                });
+        }
     }
 
     render() {