uploading image assets

net/server/internal/api_addChannelTopicAsset.go

@@ -75,6 +75,7 @@ func AddChannelTopicAsset(w http.ResponseWriter, r *http.Request) {
     ErrResponse(w, http.StatusBadRequest, err)
     return
   }
+
   file, _, err := r.FormFile("asset")
 	if err != nil {
 		ErrResponse(w, http.StatusBadRequest, err)
@@ -188,6 +189,7 @@ func isStorageFull(act *store.Account) (full bool, err error) {
   if size >= storage {
     full = true
   }
+
   return
 }
 

net/server/internal/api_setChannelTopicConfirmed.go

@@ -47,7 +47,10 @@ func SetChannelTopicConfirmed(w http.ResponseWriter, r *http.Request) {
   }
 
   err = store.DB.Transaction(func(tx *gorm.DB) error {
-    if res := tx.Model(topicSlot.Topic).Update("status", status).Error; res != nil {
+    if res := tx.Model(&topicSlot.Topic).Update("status", status).Error; res != nil {
+      return res
+    }
+    if res := tx.Model(&topicSlot.Topic).Update("detail_revision", act.ChannelRevision + 1).Error; res != nil {
       return res
     }
     if res := tx.Model(&topicSlot).Update("revision", act.ChannelRevision + 1).Error; res != nil {

net/server/internal/api_setChannelTopicSubject.go

@@ -52,6 +52,9 @@ func SetChannelTopicSubject(w http.ResponseWriter, r *http.Request) {
     if res := tx.Model(topicSlot.Topic).Update("data_type", subject.DataType).Error; res != nil {
       return res
     }
+    if res := tx.Model(&topicSlot.Topic).Update("detail_revision", act.ChannelRevision + 1).Error; res != nil {
+      return res
+    }
     if res := tx.Model(&topicSlot).Update("revision", act.ChannelRevision + 1).Error; res != nil {
       return res
     }

net/web/src/Carousel/Carousel.styled.js

@@ -55,7 +55,8 @@ export const CarouselWrapper = styled.div`
     position: absolute;
     top: 0;
     right: 0;
-    background-color: white;
+    background-color: #888888;
+    color: white;
     border-bottom-left-radius: 2px;
     padding-left: 2px;
     padding-right: 2px;

net/web/src/User/Conversation/AddTopic/AddTopic.jsx

@@ -17,34 +17,43 @@ export function AddTopic() {
   const attachAudio = useRef(null);
   const attachVideo = useRef(null);
 
-  const onSelect = (e, action) => {
+  const onSelectImage = (e) => {
-    var reader = new FileReader();
+    actions.addImage(e.target.files[0]);
-    reader.onload = () => {
+    attachImage.current.value = '';
-      action(reader.result);
   }
-    reader.readAsDataURL(e.target.files[0]);
+
+  const onSelectAudio = (e) => {
+    actions.addAudio(e.target.files[0]);
+    attachAudio.current.value = '';
+  }
+
+  const onSelectVideo = (e) => {
+    actions.addVideo(e.target.files[0]);
+    attachVideo.current.value = '';
   }
 
   const menu = (
     <Menu>
       <Menu.Item key="0">
-        <input type='file' accept="image/*" ref={attachImage} onChange={e => onSelect(e, actions.addImage)} style={{display: 'none'}}/>
+        <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
         <div onClick={() => attachImage.current.click()}>Attach Image</div>
       </Menu.Item>
       <Menu.Item key="1">
-        <input type='file' accept="audio/*" ref={attachAudio} onChange={e => onSelect(e, actions.addAudio)} style={{display: 'none'}}/>
+        <input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
         <div onClick={() => attachAudio.current.click()}>Attach Audio</div>
       </Menu.Item>
       <Menu.Item key="2">
-        <input type='file' accept="video/*" ref={attachVideo} onChange={e => onSelect(e, actions.addVideo)} style={{display: 'none'}}/>
+        <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
         <div onClick={() => attachVideo.current.click()}>Attach Video</div>
       </Menu.Item>
     </Menu>
   );
 
   const onSend = () => {
+    if (state.messageText || state.assets.length) {
       actions.addTopic();
     }
+  }
 
   const onKey = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -57,7 +66,7 @@ export function AddTopic() {
 
   const renderItem = (item) => {
     if (item.image) {
-      return <img style={{ height: '100%', objectFit: 'contain' }} src={item.image} alt="" />
+      return <img style={{ height: '100%', objectFit: 'contain' }} src={item.url} alt="" />
     }
     if (item.audio) {
       return <img style={{ height: '100%', objectFit: 'contain' }} src={test} alt="" />

net/web/src/User/Conversation/AddTopic/AddTopic.styled.js

@@ -44,7 +44,7 @@ export const AddTopicWrapper = styled.div`
 export const BusySpin = styled(Spin)`
   display: flex;
   position: absolute;
-  padding-right: 12px;
+  right: 64px;
   x-index: 10;
 `;
 

net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js

@@ -40,9 +40,18 @@ export function useAddTopic() {
   }
 
   const actions = {
-    addImage: (image) => { addAsset({ image }) },
+    addImage: (image) => { 
-    addVideo: (video) => { addAsset({ video }) },
+      let url = URL.createObjectURL(image);
-    addAudio: (audio) => { addAsset({ audio }) },
+      addAsset({ image, url }) 
+    },
+    addVideo: (video) => { 
+      let url = URL.createObjectURL(video);
+      addAsset({ video, url }) 
+    },
+    addAudio: (audio) => {
+      let url = URL.createObjectURL(audio);
+      addAsset({ audio, url }) 
+    },
     removeAsset: (idx) => { removeAsset(idx) },
     setMessageText: (value) => {
       updateState({ messageText: value });
@@ -66,12 +75,12 @@ export function useAddTopic() {
           let message = { text: state.messageText, textColor: state.messageColor,
               textSize: state.messageSize, backgroundColor: state.backgroundColor };
           if (cardId) {
-            await card.actions.addChannelTopic(cardId, channelId, message, []);
+            await card.actions.addChannelTopic(cardId, channelId, message, state.assets);
           }
           else {
-            await channel.actions.addChannelTopic(channelId, message, []);
+            await channel.actions.addChannelTopic(channelId, message, state.assets);
           }
-          updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null });
+          updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null, assets: [] });
         }
         catch(err) {
           window.alert(err);

net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js

@@ -25,12 +25,14 @@ export function useTopicItem(topic) {
 
   useEffect(() => {
     let message;
+    if( topic.data.topicDetail.status === 'confirmed') {
       try {
         message = JSON.parse(topic.data.topicDetail.data).text;
       }
       catch(err) {
         console.log(err);
       }
+    }
 
     if (profile.state.init && card.state.init && conversation.state.init) {
       const { guid, created } = topic.data.topicDetail;

net/web/src/api/addChannelTopic.js

@@ -15,10 +15,17 @@ export async function addChannelTopic(token, channelId, message, assets ) {
     let topic = await fetchWithTimeout(`/content/channels/${channelId}/topics?agent=${token}`,
       { method: 'POST', body: JSON.stringify({}) });
     checkResponse(topic);
-
     let slot = await topic.json();
 
     // add each asset
+    for (let asset of assets) {
+      const formData = new FormData();
+      formData.append('asset', asset.image);
+      let transform = encodeURIComponent(JSON.stringify(["ithumb;photo"]));
+      let topicAsset = await fetch(`/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&agent=${token}`, { method: 'POST', body: formData });
+      checkResponse(topicAsset);
+console.log(await topicAsset.json());
+    }
 
     let unconfirmed = await fetchWithTimeout(`/content/channels/${channelId}/topics/${slot.id}/subject?agent=${token}`, 
       { method: 'PUT', body: JSON.stringify(subject) });

net/web/src/api/addContactChannelTopic.js

@@ -18,6 +18,14 @@ export async function addContactChannelTopic(server, token, channelId, message,
     let slot = await topic.json();
 
     // add each asset
+    for (let asset of assets) {
+      const formData = new FormData();
+      formData.append('asset', asset.image);
+      let transform = encodeURIComponent(JSON.stringify(["ithumb;photo"]));
+      let topicAsset = await fetch(`https://${server}/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&contact=${token}`, { method: 'POST', body: formData });
+      checkResponse(topicAsset);
+console.log(await topicAsset.json());
+    }
 
     let unconfirmed = await fetchWithTimeout(`https://${server}/content/channels/${channelId}/topics/${slot.id}/subject?contact=${token}`, 
       { method: 'PUT', body: JSON.stringify(subject) });

net/web/src/context/useConversationContext.hook.js

@@ -26,6 +26,7 @@ export function useConversationContext() {
       let rev = card.actions.getChannelRevision(cardId, channelId);
       if (revision.current != rev) {
         let delta = await card.actions.getChannelTopics(cardId, channelId, revision.current);
+    console.log(delta);
         for (let topic of delta) {
           if (topic.data == null) {
             topics.current.delete(topic.id);