@innovastudio/contentbox 1.2.3 → 1.2.6

package/README.md

@@ -132,6 +132,8 @@ React and Vue project examples are provided in separate downloads in the user ar
   - scss/ (Only provided in Source Code package)
 - docs/
 - README.md (Documentation)
+- readme.txt (Readme file)
+- readme-sourcecode.txt (Readme file for Source Code package)
 - ...
 
 
@@ -400,47 +402,92 @@ Here we use the **onUploadCoverImage** parameter to specify a custom upload func
 const builder = new ContentBox({
     wrapper: '.is-wrapper',
     onUploadCoverImage: (e) => {
-        const selectedFile = e.target.files[0];
-        const filename = selectedFile.name;
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            let base64 = e.target.result;
-            base64 = base64.replace(/^data:(.*?);base64,/, ""); 
-            base64 = base64.replace(/ /g, '+');
-
-            // Upload process
-            axios.post('/upload', { image: base64, filename: filename }).then((response)=>{
-                
-                const uploadedImageUrl = response.data.url; // get saved image url
-                builder.boxImage(uploadedImageUrl); // change cover image
-
-            }).catch((err)=>{
-                console.log(err)
-            });
-        }
-        reader.readAsDataURL(selectedFile);
+        uploadFile(e, (response)=>{
+            const uploadedImageUrl = response.url; // get saved image url
+            builder.boxImage(uploadedImageUrl); // change cover image
+        });
     },
 });
+
+function uploadFile(e, callback) {
+
+    const selectedFile = e.target.files[0];
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+    fetch('/upload', {
+        method: 'POST',
+        body: formData,
+    })
+    .then(response=>response.json())
+    .then(response=>{
+        console.log(response)
+        if(callback) callback(response);
+    });
+}
 ```
 
-Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use the **boxImage(url)** method to apply the image url as a background cover.
+The example above uses the **boxImage(url)** method to apply the image url as a background cover.
 
-In this example, the image is posted to an endpoint: **/upload**
+In the example, the image is posted to an endpoint: **/upload**
 If you’re using Node.js, you can implement the endpoint to save the image using:
 
 ```javascript
+const express = require('express');
+const fs = require('fs');
+const app = express();
+const path = require('path');
+const cors = require('cors');
+const serveStatic = require('serve-static');
+const formidable = require('formidable-serverless');
+const sharp = require('sharp');
+
+//Specify url path
 var $path =  __dirname + '/public/uploads/'; // Physical path
 var $urlpath = 'uploads/'; // URL path
 
+app.use(cors());
+app.use(express.urlencoded({
+    extended: true
+}));
+app.use(express.json({ limit: '50mb' }));
+app.use(serveStatic(path.join(__dirname, '/public')));
+
 app.post('/upload', (req, res) => {
-    const base64Data = req.body.image;
-    const filename = req.body.filename;
-    require('fs').writeFile($path + filename, base64Data, 'base64', ()=>{
-        res.status(200).json({
-            success: true,
-            url: `${$urlpath}${filename}` // return saved image url
-        })
+
+    const form = new formidable.IncomingForm();
+    form.parse(req, async (err, fields, files) => {
+
+        if (err) return res.status(500).json({ ok:true, status: 500, error: 'Something went wrong.' });
+
+        let extension = path.extname(files.file.name).toLowerCase();
+        if(extension  !== '.jpeg' && extension !== '.jpg' && extension !== '.png' && extension !== '.gif' && extension  !== '.webp' && extension  !== '.webm' && extension  !== '.mp4') {
+            res.status(500).json({ ok:true, status: 500, error: 'File type not allowed.' });
+            return;
+        }
+        
+        const file = fs.readFileSync(files.file.path);
+
+        let imageFile = file;
+        if(extension  === '.jpeg' || extension === '.jpg') {
+            imageFile = await sharp(files.file.path).resize(1600, 1600, {
+                fit: sharp.fit.inside,
+                withoutEnlargement: true, 
+            })
+            .jpeg({ quality: 80, progressive: true, force: false })
+            .toBuffer();
+        }
+
+        fs.writeFile($path + files.file.name, imageFile, async (err)=>{
+            if (err) {
+                res.status(500).json({ ok:true, status: 500, error: 'Something went wrong.' });
+                return 
+            } 
+            res.status(200).json({ ok:true, status: 200, url:  $urlpath + files.file.name});
+        });
+
     });
+    
 });
 ```
 
@@ -513,39 +560,12 @@ const builder = new ContentBox({
     wrapper: '.is-wrapper',
 
     onMediaUpload: (e)=>{
-        uploadFile(e, (response)=>{
-            const uploadedImageUrl = response.data.url; // get saved file url
-            builder.returnUrl(uploadedImageUrl); // appply
-        });
+        ...
     },
     onVideoUpload: (e)=>{
-        uploadFile(e, (response)=>{
-            const uploadedFileUrl = response.data.url; // get saved file url
-            builder.returnUrl(uploadedFileUrl); // apply
-        });
+        ...
     },  
 });
-
-function uploadFile(e, callback) {
-    const selectedFile = e.target.files[0];
-    const filename = selectedFile.name;
-    const reader = new FileReader();
-    reader.onload = (e) => {
-        let base64 = e.target.result;
-        base64 = base64.replace(/^data:(.*?);base64,/, ""); 
-        base64 = base64.replace(/ /g, '+');
-
-        // Upload process
-        axios.post('/upload', { image: base64, filename: filename }).then((response)=>{
-            
-            callback(response);
-
-        }).catch((err)=>{
-            console.log(err)
-        });
-    }
-    reader.readAsDataURL(selectedFile);
-}
 ``` 
 
 More configuration options can be found in the ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.3",
+  "version": "1.2.6",
+  "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -39,7 +40,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.7",
+    "@innovastudio/contentbuilder": "^1.1.8",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",