Merge pull request #43 from EOS-uiux-Solutions/image-upload

Add image upload functionality

Author: sharmaadityaHQ

src/components/Dragdrop.js

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 
-const Dragdrop = () => {
+const Dragdrop = ({ setAttachments }) => {
   const [files, setFiles] = useState([])
 
   const { getRootProps, getInputProps } = useDropzone({
     multiple: true,
     onDrop: (acceptedFiles) => {
+      setAttachments(acceptedFiles)
       setFiles((files) => [
         ...files,
         ...acceptedFiles.map((file) =>

src/pages/NewStory.js

@@ -1,6 +1,5 @@
 import React, { useLayoutEffect, useState, useEffect, useContext } from 'react'
 import { useForm } from 'react-hook-form'
-
 import MarkdownEditor from '../components/MarkdownEditor'
 import { filterDescriptionText } from '../utils/filterText'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
@@ -49,6 +48,8 @@ const NewStory = () => {
 
   const [screenSize, setScreenSize] = useState(0)
 
+  const [attachments, setAttachments] = useState()
+
   useLayoutEffect(() => {
     function updateScreenSize() {
       setScreenSize(window.innerWidth)
@@ -123,8 +124,13 @@ const NewStory = () => {
       setDescriptionError(true)
       return
     }
-    data.description = filterDescriptionText(description)
-    await userStory.createStory(data)
+    data.Description = filterDescriptionText(description)
+    const formData = new FormData()
+    formData.append('data', JSON.stringify(data))
+    attachments.forEach((file) => {
+      formData.append('files.Attachment', file)
+    })
+    await userStory.createStory(formData)
     navigate('/')
   }
 
@@ -148,7 +154,7 @@ const NewStory = () => {
                   <input
                     className='input-default'
                     type='text'
-                    name='title'
+                    name='Title'
                     autoComplete='off'
                     ref={register({ required: true })}
                   />
@@ -188,7 +194,7 @@ const NewStory = () => {
                   <label htmlFor='category'>Category</label>
                   <select
                     className='select-default'
-                    name='category'
+                    name='Category'
                     ref={register({ required: true })}
                   >
                     <option defaultValue={true} value=''>
@@ -209,7 +215,7 @@ const NewStory = () => {
                   <label htmlFor='priority'>Priority</label>
                   <select
                     className='select-default'
-                    name='priority'
+                    name='Priority'
                     ref={register({ required: true })}
                   >
                     <option defaultValue={true} value=''>
@@ -243,7 +249,7 @@ const NewStory = () => {
                   />
                   {descriptionError && <FormError type='emptyDescription' />}
                 </div>
-                <Dragdrop />
+                <Dragdrop setAttachments={setAttachments} />
                 <div className='flex flex-row flex-center'>
                   <Button type='submit' className='btn btn-default'>
                     Submit

src/pages/Story.js

@@ -233,6 +233,11 @@ const Story = (props) => {
                   />
                 )}
               </div>
+              <div>
+                {story.Attachment?.map((obj) => (
+                  <img src={obj.url} alt='attachment' />
+                ))}
+              </div>
               <Comments storyId={storyId} />
             </div>
           </div>

src/services/user_story.js

@@ -5,28 +5,8 @@ import {
 } from './gql_fragments'
 
 const userStory = {
-  createStory: ({ description, title, category, product, priority }) => {
-    const createQuery = {
-      query: `mutation {
-        createUserStory(
-          input: {
-            data: {
-              Description: "${description}"
-              Title: "${title}"
-              Category: ${category}
-              product: "${product}"
-              Priority: ${priority}
-            }
-          }
-        ) {
-          userStory {
-            createdAt
-          }
-        }
-      }
-      `
-    }
-    return apiCall('/graphql', createQuery)
+  createStory: (data) => {
+    return apiCall('/user-stories', data)
   },
   checkAuthor: (userId, storyId) => {
     return apiCall('/checkAuthor', {
@@ -112,6 +92,9 @@ const userStory = {
             id
             username
           }
+          Attachment {
+            url
+          }
         }
       }
       ${BASIC_STORY_INFO_FRAGMENT}