fix(web): file uploading error in album page (#550)

* feat(web): show upload error notification

* fix(web): album upload issue
This commit is contained in:
Thanh Pham 2022-08-31 20:12:31 +07:00 committed by GitHub
parent 75d2d82d05
commit f5f00e0f6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 9 deletions

View File

@ -44,12 +44,15 @@
if (uploadAssets.length == uploadAssetsCount) { if (uploadAssets.length == uploadAssetsCount) {
// Filter assets that are already in the album // Filter assets that are already in the album
const assetsToAdd = uploadAssets.filter( const assetsToAdd = uploadAssets.filter(
(asset) => !assetsInAlbum.some((a) => a.id === asset) (asset) => !!asset && !assetsInAlbum.some((a) => a.id === asset)
); );
// Add the just uploaded assets to the album // Add the just uploaded assets to the album
dispatch('create-album', { if (assetsToAdd.length) {
assets: assetsToAdd dispatch('create-album', {
}); assets: assetsToAdd
});
}
// Clean up states. // Clean up states.
albumUploadAssetStore.asset.set([]); albumUploadAssetStore.asset.set([]);

View File

@ -63,7 +63,7 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
fileSelector.click(); fileSelector.click();
} catch (e) { } catch (e) {
console.log('Error seelcting file', e); console.log('Error selecting file', e);
} }
}; };
@ -145,7 +145,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
uploadAssetsStore.addNewUploadAsset(newUploadAsset); uploadAssetsStore.addNewUploadAsset(newUploadAsset);
}; };
request.upload.onload = (e) => { request.upload.onload = (event) => {
setTimeout(() => { setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId); uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000); }, 1000);
@ -154,11 +154,15 @@ async function fileUploader(asset: File, uploadType: UploadType) {
request.onreadystatechange = () => { request.onreadystatechange = () => {
try { try {
if (request.readyState === 4 && uploadType === UploadType.ALBUM) { if (request.readyState === 4 && uploadType === UploadType.ALBUM) {
const res: AssetFileUploadResponseDto = JSON.parse(request.response); const res: AssetFileUploadResponseDto = JSON.parse(request.response || '{}');
albumUploadAssetStore.asset.update((assets) => { albumUploadAssetStore.asset.update((assets) => {
return [...assets, res.id]; return [...assets, res?.id || ''];
}); });
if (request.status !== 201) {
handleUploadError(asset, res);
}
} }
} catch (e) { } catch (e) {
console.error('ERROR parsing data JSON in upload onreadystatechange'); console.error('ERROR parsing data JSON in upload onreadystatechange');
@ -166,7 +170,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
}; };
// listen for `error` event // listen for `error` event
request.upload.onerror = () => { request.upload.onerror = (event) => {
uploadAssetsStore.removeUploadAsset(deviceAssetId); uploadAssetsStore.removeUploadAsset(deviceAssetId);
}; };
@ -188,3 +192,13 @@ async function fileUploader(asset: File, uploadType: UploadType) {
console.log('error uploading file ', e); console.log('error uploading file ', e);
} }
} }
function handleUploadError(asset: File, respBody?: any) {
let extraMsg = respBody ? ' ' + respBody.message : '';
notificationController.show({
type: NotificationType.Error,
message: `Cannot upload file ${asset.name}!${extraMsg}`,
timeout: 5000
});
}