Ref #46 Fixed the S3 URL BS. Uploading artwork works!

vidhiya-saagar · Dec 16, 2020 · e664141 · e664141
1 parent 3f82f01
commit e664141
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 15 deletions.
diff --git a/client/src/screens/EditChapterScreen.js b/client/src/screens/EditChapterScreen.js
@@ -40,6 +40,8 @@ const EditChapterScreen = () => {
   const [englishSummary, setEnglishSummary] = useState('');
   const [pictures, setPictures] = useState([]);
   const [kathaUploadProgress, setKathaUploadProgress] = useState(null);
+  const [artworkUploadProgress, setArtworkUploadProgress] = useState(null);
+  const [uploadedArtworkUrl, setUploadedArtworkUrl] = useState('');
 
   useEffect(() => {
     const fetchChapter = async () => {
@@ -48,6 +50,7 @@ const EditChapterScreen = () => {
       setUnicode(res.chapter.title_unicode);
       setTranslation(res.chapter.title_translation);
       setEnglishSummary(res.chapter.description_english);
+      setUploadedArtworkUrl(res.chapter.artwork_url);
     };
     fetchChapter();
   }, []);
@@ -91,6 +94,12 @@ const EditChapterScreen = () => {
     }
   };
 
+  const addArtwork = async (artworkUrl) => {
+    fetchPut(`/chapters/${id}/artworks`, {
+      artwork_url: artworkUrl,
+    });
+  };
+
   const addKatha = async (katha) => {
     const res = await fetchPost(`/chapters/${id}/kathas`, {
       ...katha,
@@ -151,6 +160,7 @@ const EditChapterScreen = () => {
   });
 
   const dropImage = (picture) => {
+    console.log('picture', picture);
     setPictures([picture]);
   };
 
@@ -247,17 +257,53 @@ const EditChapterScreen = () => {
                 }}
                 value={englishSummary}
               />
-
-              <ImageUploader
-                withIcon={true}
-                withLabel={true}
-                buttonText='Upload Artwork'
-                onChange={dropImage}
-                imgExtension={['.jpg', '.jpeg', '.png', '.gif']}
-                maxFileSize={5242880}
-                singleImage={true}
-                withPreview={true}
-              />
+              <Grid alignItems='center' justify='space-between'>
+                <Grid column={true} sm={2} md={4} lg={4}>
+                  <div className='form-element'>
+                    <label>Upload Artwork to S3</label>
+                    <DropzoneS3Uploader
+                      s3Url='https://s3.console.aws.amazon.com/s3/buckets/shaheedi-spg'
+                      upload={{
+                        server: 'http://localhost:1469',
+                        signingUrl: '/s3/sign',
+                      }}
+                      accept='image/*'
+                      onError={(e) => console.log(`Error: ${e}`)}
+                      onProgress={(progressInPercent, uploadStatusText) => {
+                        setArtworkUploadProgress(progressInPercent);
+                      }}
+                      onFinish={(file) => {
+                        const publicUrl = file.signedUrl.split('?')[0];
+                        console.log(publicUrl);
+                        addArtwork(publicUrl);
+                        setUploadedArtworkUrl(publicUrl);
+                      }}
+                      style={dropStyles}
+                    />
+                  </div>
+                </Grid>
+                <Grid column={true} sm={2} md={4} lg={4}>
+                  <img
+                    src={uploadedArtworkUrl}
+                    style={{
+                      objectFit: 'cover',
+                      width: '120px',
+                      height: '120px',
+                      align: 'center',
+                    }}
+                  />
+                </Grid>
+              </Grid>
+              {/* <ImageUploader
+                  withIcon={true}
+                  withLabel={true}
+                  buttonText='Upload Artwork'
+                  onChange={dropImage}
+                  imgExtension={['.jpg', '.jpeg', '.png', '.gif']}
+                  maxFileSize={5242880}
+                  singleImage={true}
+                  withPreview={true}
+                /> */}
             </div>
             <Grid alignItems='center' justify='space-between'>
               <Grid column={true} sm={2} md={4} lg={4}>
@@ -269,7 +315,7 @@ const EditChapterScreen = () => {
                       server: 'http://localhost:1469',
                       signingUrl: '/s3/sign',
                     }}
-                    accept='.mp3,.m4a'
+                    accept='.mp3'
                     onError={(e) => console.log(`Error: ${e}`)}
                     onProgress={(progressInPercent, uploadStatusText) => {
                       setKathaUploadProgress(progressInPercent);

diff --git a/server/api/controllers/chapters.controller.js b/server/api/controllers/chapters.controller.js
@@ -190,6 +190,17 @@ const editChapter = async (req, res) => {
   res.status(200).json({ chapter });
 };
 
+// PUT `/chapters/:id/artworks`
+const updateChapterArtwork = async (req, res) => {
+  const { artwork_url } = req.body;
+
+  const chapterId = await db('chapters').update({
+    artwork_url,
+  });
+  const chapter = await db('chapters').where('id', chapterId).first();
+  res.status(200).json({ chapter });
+};
+
 const validateChapter = (action) => {
   switch (action) {
     case 'createChapter':
@@ -245,4 +256,5 @@ module.exports = {
   lastPauri,
   validateChapter,
   editChapter,
+  updateChapterArtwork,
 };
diff --git a/server/api/controllers/kathas.controller.js b/server/api/controllers/kathas.controller.js
@@ -68,7 +68,7 @@ const createChapterKatha = async (req, res) => {
 
   const kathaId = await db('kathas').insert({
     title: req.body.title,
-    public_url: req.body.publicUrl,
+    public_url: req.body.signedUrl.split('?')[0],
     file_url: req.body.fileUrl,
   });
 

diff --git a/server/api/routes/index.js b/server/api/routes/index.js
@@ -1,4 +1,5 @@
 const express = require('express');
+const router = express.Router();
 
 const { booksIndex, bookChapters } = require('../controllers/books.controller');
 
@@ -11,6 +12,7 @@ const {
   lastPauri,
   validateChapter,
   editChapter,
+  updateChapterArtwork,
 } = require('../controllers/chapters.controller');
 
 const {
@@ -46,8 +48,6 @@ const { deleteTuk, validateTuk } = require('../controllers/tuks.controller');
 
 const { last } = require('../controllers/application.controller');
 
-const router = express.Router();
-
 // books
 router.get('/books', booksIndex);
 router.get('/books/:id/chapters', bookChapters);
@@ -60,6 +60,7 @@ router.get('/chapters/:id/chhands', chapterChhands);
 router.get('/chapters/:id/tuks', chapterTuks);
 router.get('/chapters/:id/last-pauri', lastPauri);
 router.put('/chapters/:id/edit', validateChapter('editChapter'), editChapter);
+router.put('/chapters/:id/artworks', updateChapterArtwork);
 
 // chhand_types
 router.get('/chhand-types', chhandTypeIndex);