Feature - Add upload functionality on Web (#231)

* Added file selector

* Extract metadata to upload files to the web

* Added request for uploading

* Generate jpeg/Webp thumbnail for asset uploaded without thumbnail data

* Added generating thumbnail for video and WebSocket broadcast after thumbnail is generated

* Added video length extraction

* Added Uploading Panel

* Added upload progress store and styling the uploaded asset

* Added condition to only show upload panel when there is upload in progress

* Remove asset from the upload list after successfully uploading

* Added WebSocket to listen to upload event on the web

* Added mechanism to check for existing assets before uploading on the web

* Added test workflow

* Update readme
This commit is contained in:
Alex 2022-06-19 08:16:35 -05:00 committed by GitHub
parent b7603fd150
commit 1e3464fe47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 859 additions and 220 deletions

View file

@ -0,0 +1,30 @@
import { Socket, io } from 'socket.io-client';
import { serverEndpoint } from '../constants';
import type { ImmichAsset } from '../models/immich-asset';
import { assets } from './assets';
export const openWebsocketConnection = (accessToken: string) => {
const websocket = io(serverEndpoint, {
transports: ['polling'],
reconnection: true,
forceNew: true,
autoConnect: true,
extraHeaders: {
Authorization: 'Bearer ' + accessToken,
},
});
listenToEvent(websocket);
};
const listenToEvent = (socket: Socket) => {
socket.on('on_upload_success', (data) => {
const newUploadedAsset: ImmichAsset = JSON.parse(data);
assets.update((assets) => [...assets, newUploadedAsset]);
});
socket.on('error', (e) => {
console.log('Websocket Error', e);
});
};