upload SVG

jansedlon · Jul 27, 2020 · 13c624c · 13c624c
1 parent 9d1ae04
commit 13c624c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/examples/main.jsx b/examples/main.jsx
@@ -18,6 +18,7 @@ import TextField from "@material-ui/core/TextField";
 import Switch from "@material-ui/core/Switch";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Collapse from "@material-ui/core/Collapse";
+import Input from "@material-ui/core/Input";
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import color from "@material-ui/core/colors/blueGrey";
 
@@ -284,6 +285,19 @@ class SketchFieldDemo extends React.Component {
 
   _addText = () => this._sketch.addText(this.state.text);
 
+  handleSvgUpload = (e) => {
+    if (!e.target) return;
+
+    const reader = new FileReader();
+    reader.onload = (x) => {
+      const svgData = x.target.result;
+
+      this._sketch.uploadSvg(svgData);
+    };
+
+    reader.readAsDataURL(e.target.files[0]);
+  };
+
   componentDidMount = () => {
     (function (console) {
       console.save = function (data, filename) {
@@ -488,6 +502,22 @@ class SketchFieldDemo extends React.Component {
                   style={{ transform: "rotate(-90deg)" }}
                 />
               </Button>
+              <Button
+                color={false ? "primary" : "default"}
+                variant="contained"
+                component="label"
+                htmlFor="correction-image-input"
+              >
+                <GetApp fontSize="small" />
+                SVG
+                <Input
+                  style={{ display: "none" }}
+                  id="correction-image-input"
+                  name="correction-image-input"
+                  type="file"
+                  onChange={this.handleSvgUpload}
+                />
+              </Button>
               <Button color={false ? "primary" : "default"} variant="contained">
                 <GetApp fontSize="small" />
               </Button>

diff --git a/src/SketchField.jsx b/src/SketchField.jsx
@@ -635,6 +635,17 @@ class SketchField extends PureComponent {
     canvas.add(iText);
   };
 
+  uploadSvg = (svgUrl) => {
+    let canvas = this._fc;
+
+    fabric.loadSVGFromURL(svgUrl, function (objects, options) {
+      var loadedObjects = fabric.util.groupSVGElements(objects, options);
+
+      canvas.add(loadedObjects);
+      canvas.renderAll();
+    });
+  };
+
   callEvent = (e, eventFunction) => {
     if (this._selectedTool) eventFunction(e);
   };