mirror of https://github.com/immich-app/immich.git
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 readmepull/245/head
Alex
GitHub
parent
b7603fd150
commit
1e3464fe47
@ -0,0 +1,17 @@
|
|||||||
|
name: Test
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
push: { branches: master }
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test-server-e2e:
|
||||||
|
name: Run test suite
|
||||||
|
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout code
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
|
||||||
|
- name: Run Immich Server 2E2 Test
|
||||||
|
run: docker-compose -f ./docker/docker-compose.test.yml --env-file ./docker/.env.test up --abort-on-container-exit --exit-code-from immich_server_test
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
@ -0,0 +1,191 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { quartInOut } from 'svelte/easing';
|
||||||
|
import { scale, fade } from 'svelte/transition';
|
||||||
|
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||||
|
import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
|
||||||
|
import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
|
||||||
|
import type { UploadAsset } from '$lib/models/upload-asset';
|
||||||
|
|
||||||
|
let showDetail = true;
|
||||||
|
|
||||||
|
let uploadLength = 0;
|
||||||
|
|
||||||
|
const showUploadImageThumbnail = async (a: UploadAsset) => {
|
||||||
|
const extension = a.fileExtension.toLowerCase();
|
||||||
|
|
||||||
|
if (extension == 'jpeg' || extension == 'jpg' || extension == 'png') {
|
||||||
|
try {
|
||||||
|
const imgData = await a.file.arrayBuffer();
|
||||||
|
const arrayBufferView = new Uint8Array(imgData);
|
||||||
|
const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
|
||||||
|
const urlCreator = window.URL || window.webkitURL;
|
||||||
|
const imageUrl = urlCreator.createObjectURL(blob);
|
||||||
|
const img: any = document.getElementById(`${a.id}`);
|
||||||
|
img.src = imageUrl;
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSizeInHumanReadableFormat(sizeInByte: number) {
|
||||||
|
const pepibyte = 1.126 * Math.pow(10, 15);
|
||||||
|
const tebibyte = 1.1 * Math.pow(10, 12);
|
||||||
|
const gibibyte = 1.074 * Math.pow(10, 9);
|
||||||
|
const mebibyte = 1.049 * Math.pow(10, 6);
|
||||||
|
const kibibyte = 1024;
|
||||||
|
// Pebibyte
|
||||||
|
if (sizeInByte >= pepibyte) {
|
||||||
|
// Pe
|
||||||
|
return `${(sizeInByte / pepibyte).toFixed(1)}PB`;
|
||||||
|
} else if (tebibyte <= sizeInByte && sizeInByte < pepibyte) {
|
||||||
|
// Te
|
||||||
|
return `${(sizeInByte / tebibyte).toFixed(1)}TB`;
|
||||||
|
} else if (gibibyte <= sizeInByte && sizeInByte < tebibyte) {
|
||||||
|
// Gi
|
||||||
|
return `${(sizeInByte / gibibyte).toFixed(1)}GB`;
|
||||||
|
} else if (mebibyte <= sizeInByte && sizeInByte < gibibyte) {
|
||||||
|
// Mega
|
||||||
|
return `${(sizeInByte / mebibyte).toFixed(1)}MB`;
|
||||||
|
} else if (kibibyte <= sizeInByte && sizeInByte < mebibyte) {
|
||||||
|
// Kibi
|
||||||
|
return `${(sizeInByte / kibibyte).toFixed(1)}KB`;
|
||||||
|
} else {
|
||||||
|
return `${sizeInByte}B`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reactive action to get thumbnail image of upload asset whenever there is a new one added to the list
|
||||||
|
$: {
|
||||||
|
if ($uploadAssetsStore.length != uploadLength) {
|
||||||
|
$uploadAssetsStore.map((asset) => {
|
||||||
|
showUploadImageThumbnail(asset);
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadLength = $uploadAssetsStore.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (showDetail) {
|
||||||
|
$uploadAssetsStore.map((asset) => {
|
||||||
|
showUploadImageThumbnail(asset);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let isUploading = false;
|
||||||
|
|
||||||
|
uploadAssetsStore.isUploading.subscribe((value) => (isUploading = value));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isUploading}
|
||||||
|
<div
|
||||||
|
in:fade={{ duration: 250 }}
|
||||||
|
out:fade={{ duration: 250, delay: 1000 }}
|
||||||
|
class="absolute right-6 bottom-6 z-[10000]"
|
||||||
|
>
|
||||||
|
{#if showDetail}
|
||||||
|
<div
|
||||||
|
in:scale={{ duration: 250, easing: quartInOut }}
|
||||||
|
class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border "
|
||||||
|
>
|
||||||
|
<div class="flex justify-between place-item-center mb-4">
|
||||||
|
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
|
||||||
|
<button
|
||||||
|
on:click={() => (showDetail = false)}
|
||||||
|
class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<WindowMinimize />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="upload-item-list" class="max-h-[400px] overflow-y-auto pr-2 rounded-lg">
|
||||||
|
{#each $uploadAssetsStore as uploadAsset}
|
||||||
|
<div
|
||||||
|
in:fade={{ duration: 250 }}
|
||||||
|
out:fade={{ duration: 100 }}
|
||||||
|
class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<img
|
||||||
|
in:fade={{ duration: 250 }}
|
||||||
|
id={`${uploadAsset.id}`}
|
||||||
|
src="/immich-logo.svg"
|
||||||
|
alt=""
|
||||||
|
class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
|
||||||
|
<p
|
||||||
|
class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
|
||||||
|
>
|
||||||
|
.{uploadAsset.fileExtension}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2 pr-4 flex flex-col justify-between">
|
||||||
|
<input
|
||||||
|
disabled
|
||||||
|
class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
|
||||||
|
value={`[${getSizeInHumanReadableFormat(uploadAsset.file.size)}] ${uploadAsset.file.name}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
|
||||||
|
<div
|
||||||
|
class="bg-immich-primary h-[15px] rounded-md transition-all"
|
||||||
|
style={`width: ${uploadAsset.progress}%`}
|
||||||
|
/>
|
||||||
|
<p class="absolute h-full w-full text-center top-0 text-[10px] ">{uploadAsset.progress}/100</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="rounded-full">
|
||||||
|
<button
|
||||||
|
in:scale={{ duration: 250, easing: quartInOut }}
|
||||||
|
on:click={() => (showDetail = true)}
|
||||||
|
class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
|
||||||
|
>
|
||||||
|
{$uploadAssetsStore.length}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
in:scale={{ duration: 250, easing: quartInOut }}
|
||||||
|
on:click={() => (showDetail = true)}
|
||||||
|
class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg "
|
||||||
|
>
|
||||||
|
<div class="animate-pulse">
|
||||||
|
<CloudUploadOutline size="30" color="#4250af" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* width */
|
||||||
|
#upload-item-list::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
#upload-item-list::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
#upload-item-list::-webkit-scrollbar-thumb {
|
||||||
|
background: #4250af68;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
#upload-item-list::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #4250afad;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export type UploadAsset = {
|
||||||
|
id: string;
|
||||||
|
file: File;
|
||||||
|
progress: number;
|
||||||
|
fileExtension: string;
|
||||||
|
};
|
||||||
@ -1,33 +1,29 @@
|
|||||||
import { writable, derived } from 'svelte/store';
|
import { writable, derived } from 'svelte/store';
|
||||||
import { getRequest } from '$lib/api';
|
import { getRequest } from '$lib/api';
|
||||||
import type { ImmichAsset } from '$lib/models/immich-asset'
|
import type { ImmichAsset } from '$lib/models/immich-asset';
|
||||||
import lodash from 'lodash-es';
|
import lodash from 'lodash-es';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
export const assets = writable<ImmichAsset[]>([]);
|
export const assets = writable<ImmichAsset[]>([]);
|
||||||
|
|
||||||
export const assetsGroupByDate = derived(assets, ($assets) => {
|
export const assetsGroupByDate = derived(assets, ($assets) => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
return lodash.chain($assets)
|
return lodash
|
||||||
|
.chain($assets)
|
||||||
.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD'))
|
.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD'))
|
||||||
.sortBy((group) => $assets.indexOf(group[0]))
|
.sortBy((group) => $assets.indexOf(group[0]))
|
||||||
.value();
|
.value();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log("error deriving state assets", e)
|
console.log('error deriving state assets', e);
|
||||||
return []
|
return [];
|
||||||
}
|
}
|
||||||
|
});
|
||||||
})
|
|
||||||
|
|
||||||
export const flattenAssetGroupByDate = derived(assetsGroupByDate, ($assetsGroupByDate) => {
|
export const flattenAssetGroupByDate = derived(assetsGroupByDate, ($assetsGroupByDate) => {
|
||||||
return $assetsGroupByDate.flat();
|
return $assetsGroupByDate.flat();
|
||||||
})
|
});
|
||||||
|
|
||||||
export const getAssetsInfo = async (accessToken: string) => {
|
export const getAssetsInfo = async (accessToken: string) => {
|
||||||
const res = await getRequest('asset', accessToken);
|
const res = await getRequest('asset', accessToken);
|
||||||
|
|
||||||
assets.set(res);
|
assets.set(res);
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,45 @@
|
|||||||
|
import { writable, derived } from 'svelte/store';
|
||||||
|
import type { UploadAsset } from '../models/upload-asset';
|
||||||
|
|
||||||
|
function createUploadStore() {
|
||||||
|
const uploadAssets = writable<Array<UploadAsset>>([]);
|
||||||
|
|
||||||
|
const { subscribe } = uploadAssets;
|
||||||
|
|
||||||
|
const isUploading = derived(uploadAssets, ($uploadAssets) => {
|
||||||
|
return $uploadAssets.length > 0 ? true : false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const addNewUploadAsset = (newAsset: UploadAsset) => {
|
||||||
|
uploadAssets.update((currentSet) => [...currentSet, newAsset]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateProgress = (id: string, progress: number) => {
|
||||||
|
uploadAssets.update((uploadingAssets) => {
|
||||||
|
return uploadingAssets.map((asset) => {
|
||||||
|
if (asset.id == id) {
|
||||||
|
return {
|
||||||
|
...asset,
|
||||||
|
progress: progress,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return asset;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeUploadAsset = (id: string) => {
|
||||||
|
uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
isUploading,
|
||||||
|
addNewUploadAsset,
|
||||||
|
updateProgress,
|
||||||
|
removeUploadAsset,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const uploadAssetsStore = createUploadStore();
|
||||||
@ -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);
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import * as exifr from 'exifr';
|
||||||
|
import { serverEndpoint } from '../constants';
|
||||||
|
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||||
|
import type { UploadAsset } from '../models/upload-asset';
|
||||||
|
|
||||||
|
export async function fileUploader(asset: File, accessToken: string) {
|
||||||
|
const assetType = asset.type.split('/')[0].toUpperCase();
|
||||||
|
const temp = asset.name.split('.');
|
||||||
|
const fileExtension = temp[temp.length - 1];
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
try {
|
||||||
|
let exifData = null;
|
||||||
|
|
||||||
|
if (assetType !== 'VIDEO') {
|
||||||
|
exifData = await exifr.parse(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
const createdAt =
|
||||||
|
exifData && exifData.DateTimeOriginal != null
|
||||||
|
? new Date(exifData.DateTimeOriginal).toISOString()
|
||||||
|
: new Date(asset.lastModified).toISOString();
|
||||||
|
|
||||||
|
const deviceAssetId = 'web' + '-' + asset.name + '-' + asset.lastModified;
|
||||||
|
|
||||||
|
// Create and add Unique ID of asset on the device
|
||||||
|
formData.append('deviceAssetId', deviceAssetId);
|
||||||
|
|
||||||
|
// Get device id - for web -> use WEB
|
||||||
|
formData.append('deviceId', 'WEB');
|
||||||
|
|
||||||
|
// Get asset type
|
||||||
|
formData.append('assetType', assetType);
|
||||||
|
|
||||||
|
// Get Asset Created Date
|
||||||
|
formData.append('createdAt', createdAt);
|
||||||
|
|
||||||
|
// Get Asset Modified At
|
||||||
|
formData.append('modifiedAt', new Date(asset.lastModified).toISOString());
|
||||||
|
|
||||||
|
// Set Asset is Favorite to false
|
||||||
|
formData.append('isFavorite', 'false');
|
||||||
|
|
||||||
|
// Get asset duration
|
||||||
|
formData.append('duration', '0:00:00.000000');
|
||||||
|
|
||||||
|
// Get asset file extension
|
||||||
|
formData.append('fileExtension', '.' + fileExtension);
|
||||||
|
|
||||||
|
// Get asset binary data.
|
||||||
|
formData.append('assetData', asset);
|
||||||
|
|
||||||
|
// Check if asset upload on server before performing upload
|
||||||
|
const res = await fetch(serverEndpoint + '/asset/check', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ deviceAssetId }),
|
||||||
|
headers: {
|
||||||
|
Authorization: 'Bearer ' + accessToken,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.status === 200) {
|
||||||
|
const { isExist } = await res.json();
|
||||||
|
|
||||||
|
if (isExist) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = new XMLHttpRequest();
|
||||||
|
|
||||||
|
request.upload.onloadstart = () => {
|
||||||
|
const newUploadAsset: UploadAsset = {
|
||||||
|
id: deviceAssetId,
|
||||||
|
file: asset,
|
||||||
|
progress: 0,
|
||||||
|
fileExtension: fileExtension,
|
||||||
|
};
|
||||||
|
|
||||||
|
uploadAssetsStore.addNewUploadAsset(newUploadAsset);
|
||||||
|
};
|
||||||
|
|
||||||
|
request.upload.onload = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||||
|
}, 2500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// listen for `error` event
|
||||||
|
request.upload.onerror = () => {
|
||||||
|
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// listen for `abort` event
|
||||||
|
request.upload.onabort = () => {
|
||||||
|
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// listen for `progress` event
|
||||||
|
request.upload.onprogress = (event) => {
|
||||||
|
const percentComplete = Math.floor((event.loaded / event.total) * 100);
|
||||||
|
uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
|
||||||
|
};
|
||||||
|
|
||||||
|
request.open('POST', `${serverEndpoint}/asset/upload`);
|
||||||
|
request.setRequestHeader('Authorization', `Bearer ${accessToken}`);
|
||||||
|
|
||||||
|
request.send(formData);
|
||||||
|
} catch (e) {
|
||||||
|
console.log('error uploading file ', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue