uploading image assets

This commit is contained in:
Roland Osborne 2022-04-30 00:01:25 -07:00
parent 624953a221
commit ed89df3235
11 changed files with 71 additions and 26 deletions

View File

@ -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
}

View File

@ -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 {

View File

@ -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
}

View File

@ -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;

View File

@ -17,33 +17,42 @@ export function AddTopic() {
const attachAudio = useRef(null);
const attachVideo = useRef(null);
const onSelect = (e, action) => {
var reader = new FileReader();
reader.onload = () => {
action(reader.result);
}
reader.readAsDataURL(e.target.files[0]);
const onSelectImage = (e) => {
actions.addImage(e.target.files[0]);
attachImage.current.value = '';
}
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 = () => {
actions.addTopic();
if (state.messageText || state.assets.length) {
actions.addTopic();
}
}
const onKey = (e) => {
@ -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="" />

View File

@ -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;
`;

View File

@ -40,9 +40,18 @@ export function useAddTopic() {
}
const actions = {
addImage: (image) => { addAsset({ image }) },
addVideo: (video) => { addAsset({ video }) },
addAudio: (audio) => { addAsset({ audio }) },
addImage: (image) => {
let url = URL.createObjectURL(image);
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);

View File

@ -25,11 +25,13 @@ export function useTopicItem(topic) {
useEffect(() => {
let message;
try {
message = JSON.parse(topic.data.topicDetail.data).text;
}
catch(err) {
console.log(err);
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) {

View File

@ -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) });

View File

@ -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) });

View File

@ -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);