@adminforth/upload 1.0.12 → 1.0.14

package/custom/preview.vue

@@ -18,7 +18,7 @@
       </video>
       
       <a v-else :href="url" target="_blank"
-         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <!-- download file icon -->
         <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

package/custom/uploader.vue

@@ -171,7 +171,7 @@ const onFileChange = async (e) => {
       reader.readAsDataURL(file);
     }
     
-    const { uploadUrl, s3Path } = await callAdminForthApi({
+    const { uploadUrl, tagline, s3Path, error } = await callAdminForthApi({
         path: `/plugin/${props.meta.pluginInstanceId}/get_s3_upload_url`,
         method: 'POST',
         body: {
@@ -182,6 +182,17 @@ const onFileChange = async (e) => {
         },
     });
 
+    if (error) {
+      window.adminforth.alert({
+        message: `File was not uploaded because of error: ${error}`,
+        variant: 'danger'
+      });
+      imgPreview.value = null;
+      uploaded.value = false;
+      progress.value = 0;
+      return;
+    }
+
     const xhr = new XMLHttpRequest();
     const success = await new Promise((resolve) => {
       xhr.upload.onprogress = (e) => {
@@ -196,7 +207,7 @@ const onFileChange = async (e) => {
       });
       xhr.open('PUT', uploadUrl, true);
       xhr.setRequestHeader('Content-Type', type);
-      xhr.setRequestHeader('x-amz-tagging', (new URL(uploadUrl)).searchParams.get('x-amz-tagging'));
+      xhr.setRequestHeader('x-amz-tagging', tagline);
       xhr.send(file);
     });
     if (!success) {

package/dist/custom/preview.vue

@@ -18,7 +18,7 @@
       </video>
       
       <a v-else :href="url" target="_blank"
-         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <!-- download file icon -->
         <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

package/dist/custom/uploader.vue

@@ -171,7 +171,7 @@ const onFileChange = async (e) => {
       reader.readAsDataURL(file);
     }
     
-    const { uploadUrl, s3Path } = await callAdminForthApi({
+    const { uploadUrl, tagline, s3Path, error } = await callAdminForthApi({
         path: `/plugin/${props.meta.pluginInstanceId}/get_s3_upload_url`,
         method: 'POST',
         body: {
@@ -182,6 +182,17 @@ const onFileChange = async (e) => {
         },
     });
 
+    if (error) {
+      window.adminforth.alert({
+        message: `File was not uploaded because of error: ${error}`,
+        variant: 'danger'
+      });
+      imgPreview.value = null;
+      uploaded.value = false;
+      progress.value = 0;
+      return;
+    }
+
     const xhr = new XMLHttpRequest();
     const success = await new Promise((resolve) => {
       xhr.upload.onprogress = (e) => {
@@ -196,7 +207,7 @@ const onFileChange = async (e) => {
       });
       xhr.open('PUT', uploadUrl, true);
       xhr.setRequestHeader('Content-Type', type);
-      xhr.setRequestHeader('x-amz-tagging', (new URL(uploadUrl)).searchParams.get('x-amz-tagging'));
+      xhr.setRequestHeader('x-amz-tagging', tagline);
       xhr.send(file);
     });
     if (!success) {

package/dist/index.js

@@ -7,8 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import AWS from 'aws-sdk';
-import { AdminForthPlugin, AdminForthResourcePages } from "adminforth";
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { ExpirationStatus, GetObjectCommand, PutObjectCommand, S3 } from '@aws-sdk/client-s3';
+import { AdminForthPlugin } from "adminforth";
 const ADMINFORTH_NOT_YET_USED_TAG = 'adminforth-candidate-for-cleanup';
 export default class UploadPlugin extends AdminForthPlugin {
     constructor(options) {
@@ -22,24 +23,26 @@ export default class UploadPlugin extends AdminForthPlugin {
         return __awaiter(this, void 0, void 0, function* () {
             // check that lifecyle rule "adminforth-unused-cleaner" exists
             const CLEANUP_RULE_ID = 'adminforth-unused-cleaner';
-            const s3 = new AWS.S3({
-                accessKeyId: this.options.s3AccessKeyId,
-                secretAccessKey: this.options.s3SecretAccessKey,
-                region: this.options.s3Region
+            const s3 = new S3({
+                credentials: {
+                    accessKeyId: this.options.s3AccessKeyId,
+                    secretAccessKey: this.options.s3SecretAccessKey,
+                },
+                region: this.options.s3Region,
             });
             // check bucket exists
-            const bucketExists = s3.headBucket({ Bucket: this.options.s3Bucket }).promise();
+            const bucketExists = s3.headBucket({ Bucket: this.options.s3Bucket });
             if (!bucketExists) {
                 throw new Error(`Bucket ${this.options.s3Bucket} does not exist`);
             }
             // check that lifecycle rule exists
             let ruleExists = false;
             try {
-                const lifecycleConfig = yield s3.getBucketLifecycleConfiguration({ Bucket: this.options.s3Bucket }).promise();
+                const lifecycleConfig = yield s3.getBucketLifecycleConfiguration({ Bucket: this.options.s3Bucket });
                 ruleExists = lifecycleConfig.Rules.some((rule) => rule.ID === CLEANUP_RULE_ID);
             }
             catch (e) {
-                if (e.code !== 'NoSuchLifecycleConfiguration') {
+                if (e.name !== 'NoSuchLifecycleConfiguration') {
                     throw e;
                 }
                 else {
@@ -55,7 +58,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                         Rules: [
                             {
                                 ID: CLEANUP_RULE_ID,
-                                Status: 'Enabled',
+                                Status: ExpirationStatus.Enabled,
                                 Filter: {
                                     Tag: {
                                         Key: ADMINFORTH_NOT_YET_USED_TAG,
@@ -69,7 +72,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                         ]
                     }
                 };
-                yield s3.putBucketLifecycleConfiguration(params).promise();
+                yield s3.putBucketLifecycleConfiguration(params);
             }
         });
     }
@@ -80,10 +83,10 @@ export default class UploadPlugin extends AdminForthPlugin {
                 record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ s3Path: record[this.options.pathColumnName] });
                 return;
             }
-            const previewUrl = yield s3.getSignedUrl('getObject', {
+            const previewUrl = yield yield getSignedUrl(s3, new GetObjectCommand({
                 Bucket: this.options.s3Bucket,
                 Key: record[this.options.pathColumnName],
-            });
+            }));
             record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
         });
     }
@@ -92,7 +95,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
             // after column to store the path of the uploaded file, add new VirtualColumn,
             // show only in edit and create views
@@ -106,29 +109,38 @@ export default class UploadPlugin extends AdminForthPlugin {
             const virtualColumn = {
                 virtual: true,
                 name: `uploader_${this.pluginInstanceId}`,
-                components: Object.assign({ edit: {
+                components: {
+                    edit: {
                         file: this.componentPath('uploader.vue'),
                         meta: pluginFrontendOptions,
-                    }, create: {
+                    },
+                    create: {
                         file: this.componentPath('uploader.vue'),
                         meta: pluginFrontendOptions,
-                    }, show: {
-                        file: this.componentPath('preview.vue'),
-                        meta: pluginFrontendOptions,
-                    } }, (((_a = this.options.preview) === null || _a === void 0 ? void 0 : _a.showInList) ? {
-                    list: {
-                        file: this.componentPath('preview.vue'),
-                        meta: pluginFrontendOptions,
-                    }
-                } : {})),
-                showIn: ['edit', 'create', 'show', ...(((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.showInList) ? [
-                        AdminForthResourcePages.list
-                    ] : [])],
+                    },
+                },
+                showIn: ['edit', 'create'],
             };
             const pathColumnIndex = resourceConfig.columns.findIndex((column) => column.name === pathColumnName);
             if (pathColumnIndex === -1) {
                 throw new Error(`Column with name "${pathColumnName}" not found in resource "${resourceConfig.name}"`);
             }
+            if (!resourceConfig.columns[pathColumnIndex].components) {
+                resourceConfig.columns[pathColumnIndex].components = {};
+            }
+            if (((_a = this.options.preview) === null || _a === void 0 ? void 0 : _a.showInList) || ((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.showInList) === undefined) {
+                // add preview column to list
+                resourceConfig.columns[pathColumnIndex].components.list = {
+                    file: this.componentPath('preview.vue'),
+                    meta: pluginFrontendOptions,
+                };
+            }
+            if (((_c = this.options.preview) === null || _c === void 0 ? void 0 : _c.showInShow) || ((_d = this.options.preview) === null || _d === void 0 ? void 0 : _d.showInShow) === undefined) {
+                resourceConfig.columns[pathColumnIndex].components.show = {
+                    file: this.componentPath('preview.vue'),
+                    meta: pluginFrontendOptions,
+                };
+            }
             // insert virtual column after path column if it is not already there
             const virtualColumnIndex = resourceConfig.columns.findIndex((column) => column.name === virtualColumn.name);
             if (virtualColumnIndex === -1) {
@@ -144,7 +156,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             virtualColumn.editingNote = pathColumn.editingNote;
             // ** HOOKS FOR CREATE **//
             // add beforeSave hook to save virtual column to path column
-            resourceConfig.hooks.create.beforeSave.push((_d) => __awaiter(this, [_d], void 0, function* ({ record }) {
+            resourceConfig.hooks.create.beforeSave.push((_f) => __awaiter(this, [_f], void 0, function* ({ record }) {
                 if (record[virtualColumn.name]) {
                     record[pathColumnName] = record[virtualColumn.name];
                     delete record[virtualColumn.name];
@@ -152,47 +164,56 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return { ok: true };
             }));
             // in afterSave hook, aremove tag adminforth-not-yet-used from the file
-            resourceConfig.hooks.create.afterSave.push((_e) => __awaiter(this, [_e], void 0, function* ({ record }) {
+            resourceConfig.hooks.create.afterSave.push((_g) => __awaiter(this, [_g], void 0, function* ({ record }) {
+                process.env.HEAVY_DEBUG && console.log('💾💾  after save ', record === null || record === void 0 ? void 0 : record.id);
                 if (record[pathColumnName]) {
-                    const s3 = new AWS.S3({
-                        accessKeyId: this.options.s3AccessKeyId,
-                        secretAccessKey: this.options.s3SecretAccessKey,
-                        region: this.options.s3Region
+                    const s3 = new S3({
+                        credentials: {
+                            accessKeyId: this.options.s3AccessKeyId,
+                            secretAccessKey: this.options.s3SecretAccessKey,
+                        },
+                        region: this.options.s3Region,
                     });
+                    process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
+                    // let it crash if it fails: this is a new file which just was uploaded.
                     yield s3.putObjectTagging({
                         Bucket: this.options.s3Bucket,
                         Key: record[pathColumnName],
                         Tagging: {
                             TagSet: []
                         }
-                    }).promise();
+                    });
                 }
                 return { ok: true };
             }));
             // ** HOOKS FOR SHOW **//
             // add show hook to get presigned URL
-            resourceConfig.hooks.show.afterDatasourceResponse.push((_f) => __awaiter(this, [_f], void 0, function* ({ response }) {
+            resourceConfig.hooks.show.afterDatasourceResponse.push((_h) => __awaiter(this, [_h], void 0, function* ({ response }) {
                 const record = response[0];
                 if (!record) {
                     return { ok: true };
                 }
                 if (record[pathColumnName]) {
-                    const s3 = new AWS.S3({
-                        accessKeyId: this.options.s3AccessKeyId,
-                        secretAccessKey: this.options.s3SecretAccessKey,
-                        region: this.options.s3Region
+                    const s3 = new S3({
+                        credentials: {
+                            accessKeyId: this.options.s3AccessKeyId,
+                            secretAccessKey: this.options.s3SecretAccessKey,
+                        },
+                        region: this.options.s3Region,
                     });
                     yield this.genPreviewUrl(record, s3);
                 }
                 return { ok: true };
             }));
             // ** HOOKS FOR LIST **//
-            if ((_c = this.options.preview) === null || _c === void 0 ? void 0 : _c.showInList) {
-                resourceConfig.hooks.list.afterDatasourceResponse.push((_g) => __awaiter(this, [_g], void 0, function* ({ response }) {
-                    const s3 = new AWS.S3({
-                        accessKeyId: this.options.s3AccessKeyId,
-                        secretAccessKey: this.options.s3SecretAccessKey,
-                        region: this.options.s3Region
+            if ((_e = this.options.preview) === null || _e === void 0 ? void 0 : _e.showInList) {
+                resourceConfig.hooks.list.afterDatasourceResponse.push((_j) => __awaiter(this, [_j], void 0, function* ({ response }) {
+                    const s3 = new S3({
+                        credentials: {
+                            accessKeyId: this.options.s3AccessKeyId,
+                            secretAccessKey: this.options.s3SecretAccessKey,
+                        },
+                        region: this.options.s3Region,
                     });
                     yield Promise.all(response.map((record) => __awaiter(this, void 0, void 0, function* () {
                         if (record[this.options.pathColumnName]) {
@@ -204,31 +225,39 @@ export default class UploadPlugin extends AdminForthPlugin {
             }
             // ** HOOKS FOR DELETE **//
             // add delete hook which sets tag adminforth-candidate-for-cleanup to true
-            resourceConfig.hooks.delete.afterSave.push((_h) => __awaiter(this, [_h], void 0, function* ({ record }) {
+            resourceConfig.hooks.delete.afterSave.push((_k) => __awaiter(this, [_k], void 0, function* ({ record }) {
                 if (record[pathColumnName]) {
-                    const s3 = new AWS.S3({
-                        accessKeyId: this.options.s3AccessKeyId,
-                        secretAccessKey: this.options.s3SecretAccessKey,
-                        region: this.options.s3Region
+                    const s3 = new S3({
+                        credentials: {
+                            accessKeyId: this.options.s3AccessKeyId,
+                            secretAccessKey: this.options.s3SecretAccessKey,
+                        },
+                        region: this.options.s3Region,
                     });
-                    yield s3.putObjectTagging({
-                        Bucket: this.options.s3Bucket,
-                        Key: record[pathColumnName],
-                        Tagging: {
-                            TagSet: [
-                                {
-                                    Key: ADMINFORTH_NOT_YET_USED_TAG,
-                                    Value: 'true'
-                                }
-                            ]
-                        }
-                    }).promise();
+                    try {
+                        yield s3.putObjectTagging({
+                            Bucket: this.options.s3Bucket,
+                            Key: record[pathColumnName],
+                            Tagging: {
+                                TagSet: [
+                                    {
+                                        Key: ADMINFORTH_NOT_YET_USED_TAG,
+                                        Value: 'true'
+                                    }
+                                ]
+                            }
+                        });
+                    }
+                    catch (e) {
+                        // file might be e.g. already deleted, so we catch error
+                        console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${record[pathColumnName]}. File will not be auto-cleaned up`, e);
+                    }
                 }
                 return { ok: true };
             }));
             // ** HOOKS FOR EDIT **//
             // beforeSave
-            resourceConfig.hooks.edit.beforeSave.push((_j) => __awaiter(this, [_j], void 0, function* ({ record }) {
+            resourceConfig.hooks.edit.beforeSave.push((_l) => __awaiter(this, [_l], void 0, function* ({ record }) {
                 // null is when value is removed
                 if (record[virtualColumn.name] || record[virtualColumn.name] === null) {
                     record[pathColumnName] = record[virtualColumn.name];
@@ -236,37 +265,46 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return { ok: true };
             }));
             // add edit postSave hook to delete old file and remove tag from new file
-            resourceConfig.hooks.edit.afterSave.push((_k) => __awaiter(this, [_k], void 0, function* ({ record, oldRecord }) {
+            resourceConfig.hooks.edit.afterSave.push((_m) => __awaiter(this, [_m], void 0, function* ({ record, oldRecord }) {
                 if (record[virtualColumn.name] || record[virtualColumn.name] === null) {
-                    const s3 = new AWS.S3({
-                        accessKeyId: this.options.s3AccessKeyId,
-                        secretAccessKey: this.options.s3SecretAccessKey,
-                        region: this.options.s3Region
+                    const s3 = new S3({
+                        credentials: {
+                            accessKeyId: this.options.s3AccessKeyId,
+                            secretAccessKey: this.options.s3SecretAccessKey,
+                        },
+                        region: this.options.s3Region,
                     });
                     if (oldRecord[pathColumnName]) {
                         // put tag to delete old file
-                        yield s3.putObjectTagging({
-                            Bucket: this.options.s3Bucket,
-                            Key: oldRecord[pathColumnName],
-                            Tagging: {
-                                TagSet: [
-                                    {
-                                        Key: ADMINFORTH_NOT_YET_USED_TAG,
-                                        Value: 'true'
-                                    }
-                                ]
-                            }
-                        }).promise();
+                        try {
+                            yield s3.putObjectTagging({
+                                Bucket: this.options.s3Bucket,
+                                Key: oldRecord[pathColumnName],
+                                Tagging: {
+                                    TagSet: [
+                                        {
+                                            Key: ADMINFORTH_NOT_YET_USED_TAG,
+                                            Value: 'true'
+                                        }
+                                    ]
+                                }
+                            });
+                        }
+                        catch (e) {
+                            // file might be e.g. already deleted, so we catch error
+                            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${oldRecord[pathColumnName]}. File will not be auto-cleaned up`, e);
+                        }
                     }
                     if (record[virtualColumn.name] !== null) {
                         // remove tag from new file
+                        // in this case we let it crash if it fails: this is a new file which just was uploaded. 
                         yield s3.putObjectTagging({
                             Bucket: this.options.s3Bucket,
                             Key: record[pathColumnName],
                             Tagging: {
                                 TagSet: []
                             }
-                        }).promise();
+                        });
                     }
                 }
                 return { ok: true };
@@ -282,30 +320,55 @@ export default class UploadPlugin extends AdminForthPlugin {
             method: 'POST',
             path: `/plugin/${this.pluginInstanceId}/get_s3_upload_url`,
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body }) {
+                var _b;
                 const { originalFilename, contentType, size, originalExtension } = body;
                 if (this.options.allowedFileExtensions && !this.options.allowedFileExtensions.includes(originalExtension)) {
-                    throw new Error(`File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`);
+                    return {
+                        error: `File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`
+                    };
                 }
                 const s3Path = this.options.s3Path({ originalFilename, originalExtension, contentType });
                 if (s3Path.startsWith('/')) {
                     throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
                 }
-                const s3 = new AWS.S3({
-                    accessKeyId: this.options.s3AccessKeyId,
-                    secretAccessKey: this.options.s3SecretAccessKey,
-                    region: this.options.s3Region
+                const s3 = new S3({
+                    credentials: {
+                        accessKeyId: this.options.s3AccessKeyId,
+                        secretAccessKey: this.options.s3SecretAccessKey,
+                    },
+                    region: this.options.s3Region,
                 });
+                const tagline = `${ADMINFORTH_NOT_YET_USED_TAG}=true`;
                 const params = {
                     Bucket: this.options.s3Bucket,
                     Key: s3Path,
                     ContentType: contentType,
-                    ACL: this.options.s3ACL || 'private',
-                    Tagging: `${ADMINFORTH_NOT_YET_USED_TAG}=true`,
+                    ACL: (this.options.s3ACL || 'private'),
+                    Tagging: tagline,
                 };
-                const uploadUrl = yield s3.getSignedUrl('putObject', params);
+                const uploadUrl = yield yield getSignedUrl(s3, new PutObjectCommand(params), {
+                    expiresIn: 1800,
+                    unhoistableHeaders: new Set(['x-amz-tagging']),
+                });
+                let previewUrl;
+                if ((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.previewUrl) {
+                    previewUrl = this.options.preview.previewUrl({ s3Path });
+                    return;
+                }
+                else if (this.options.s3ACL === 'public-read') {
+                    previewUrl = `https://${this.options.s3Bucket}.s3.${this.options.s3Region}.amazonaws.com/${s3Path}`;
+                }
+                else {
+                    previewUrl = yield getSignedUrl(s3, new GetObjectCommand({
+                        Bucket: this.options.s3Bucket,
+                        Key: s3Path,
+                    }));
+                }
                 return {
                     uploadUrl,
                     s3Path,
+                    tagline,
+                    previewUrl,
                 };
             })
         });

package/index.ts

@@ -1,6 +1,7 @@
 
 import { PluginOptions } from './types.js';
-import AWS from 'aws-sdk';
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { ExpirationStatus, GetObjectCommand, ObjectCannedACL, PutObjectCommand, S3 } from '@aws-sdk/client-s3';
 import { AdminForthPlugin, AdminForthResourceColumn, AdminForthResourcePages, IAdminForth, IHttpServer } from "adminforth";
 
 const ADMINFORTH_NOT_YET_USED_TAG = 'adminforth-candidate-for-cleanup';
@@ -20,13 +21,16 @@ export default class UploadPlugin extends AdminForthPlugin {
   async setupLifecycleRule() {
     // check that lifecyle rule "adminforth-unused-cleaner" exists
     const CLEANUP_RULE_ID = 'adminforth-unused-cleaner';
-    const s3 = new AWS.S3({
-      accessKeyId: this.options.s3AccessKeyId,
-      secretAccessKey: this.options.s3SecretAccessKey,
-      region: this.options.s3Region
+    const s3 = new S3({
+      credentials: {
+        accessKeyId: this.options.s3AccessKeyId,
+        secretAccessKey: this.options.s3SecretAccessKey,
+      },
+
+      region: this.options.s3Region,
     });
     // check bucket exists
-    const bucketExists = s3.headBucket({ Bucket: this.options.s3Bucket }).promise()
+    const bucketExists = s3.headBucket({ Bucket: this.options.s3Bucket })
     if (!bucketExists) {
       throw new Error(`Bucket ${this.options.s3Bucket} does not exist`);
     }
@@ -35,10 +39,10 @@ export default class UploadPlugin extends AdminForthPlugin {
     let ruleExists: boolean = false;
 
     try {
-        const lifecycleConfig: any = await s3.getBucketLifecycleConfiguration({ Bucket: this.options.s3Bucket }).promise();
+        const lifecycleConfig: any = await s3.getBucketLifecycleConfiguration({ Bucket: this.options.s3Bucket });
         ruleExists = lifecycleConfig.Rules.some((rule: any) => rule.ID === CLEANUP_RULE_ID);
     } catch (e: any) {
-      if (e.code !== 'NoSuchLifecycleConfiguration') {
+      if (e.name !== 'NoSuchLifecycleConfiguration') {
         throw e;
       } else {
         ruleExists = false;
@@ -54,7 +58,7 @@ export default class UploadPlugin extends AdminForthPlugin {
           Rules: [
             {
               ID: CLEANUP_RULE_ID,
-              Status: 'Enabled',
+              Status: ExpirationStatus.Enabled,
               Filter: {
                 Tag: {
                   Key: ADMINFORTH_NOT_YET_USED_TAG,
@@ -69,19 +73,19 @@ export default class UploadPlugin extends AdminForthPlugin {
         }
       };
 
-      await s3.putBucketLifecycleConfiguration(params).promise();
+      await s3.putBucketLifecycleConfiguration(params);
     }
   }
 
-  async genPreviewUrl(record: any, s3: AWS.S3) {
+  async genPreviewUrl(record: any, s3: S3) {
     if (this.options.preview?.previewUrl) {
       record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ s3Path: record[this.options.pathColumnName] });
       return;
     }
-    const previewUrl = await s3.getSignedUrl('getObject', {
+    const previewUrl = await await getSignedUrl(s3, new GetObjectCommand({
       Bucket: this.options.s3Bucket,
       Key: record[this.options.pathColumnName],
-    });
+    }));
 
     record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
   }
@@ -111,22 +115,8 @@ export default class UploadPlugin extends AdminForthPlugin {
           file: this.componentPath('uploader.vue'),
           meta: pluginFrontendOptions,
         },
-        show: {
-          file: this.componentPath('preview.vue'),
-          meta: pluginFrontendOptions,
-        },
-        ...(
-          this.options.preview?.showInList ? {
-            list: {
-              file: this.componentPath('preview.vue'),
-              meta: pluginFrontendOptions,
-            }
-          } : {}
-        ),
       },
-      showIn: ['edit', 'create', 'show', ...(this.options.preview?.showInList ? [
-        AdminForthResourcePages.list
-      ] : [])],
+      showIn: ['edit', 'create'],
     };
 
    
@@ -135,6 +125,24 @@ export default class UploadPlugin extends AdminForthPlugin {
     if (pathColumnIndex === -1) {
       throw new Error(`Column with name "${pathColumnName}" not found in resource "${resourceConfig.name}"`);
     }
+    if (!resourceConfig.columns[pathColumnIndex].components) {
+      resourceConfig.columns[pathColumnIndex].components = {};
+    }
+    
+    if (this.options.preview?.showInList || this.options.preview?.showInList === undefined) {
+      // add preview column to list
+      resourceConfig.columns[pathColumnIndex].components.list = {
+        file: this.componentPath('preview.vue'),
+        meta: pluginFrontendOptions,
+      };
+    }
+
+    if (this.options.preview?.showInShow || this.options.preview?.showInShow === undefined) {
+      resourceConfig.columns[pathColumnIndex].components.show = {
+        file: this.componentPath('preview.vue'),
+        meta: pluginFrontendOptions,
+      };
+    }
 
     // insert virtual column after path column if it is not already there
     const virtualColumnIndex = resourceConfig.columns.findIndex((column: any) => column.name === virtualColumn.name);
@@ -165,20 +173,26 @@ export default class UploadPlugin extends AdminForthPlugin {
 
     // in afterSave hook, aremove tag adminforth-not-yet-used from the file
     resourceConfig.hooks.create.afterSave.push(async ({ record }: { record: any }) => {
+      process.env.HEAVY_DEBUG && console.log('💾💾  after save ', record?.id);
+      
       if (record[pathColumnName]) {
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
-        });
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
 
+          region: this.options.s3Region,
+        });
+        process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
+        // let it crash if it fails: this is a new file which just was uploaded.
         await s3.putObjectTagging({
           Bucket: this.options.s3Bucket,
           Key: record[pathColumnName],
           Tagging: {
             TagSet: []
           }
-        }).promise();
+        });
       }
       return { ok: true };
     });
@@ -193,10 +207,13 @@ export default class UploadPlugin extends AdminForthPlugin {
         return { ok: true };
       }
       if (record[pathColumnName]) {
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
+
+          region: this.options.s3Region,
         });
 
         await this.genPreviewUrl(record, s3);
@@ -209,10 +226,13 @@ export default class UploadPlugin extends AdminForthPlugin {
 
     if (this.options.preview?.showInList) {
       resourceConfig.hooks.list.afterDatasourceResponse.push(async ({ response }: { response: any }) => {
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
+
+          region: this.options.s3Region,
         });
   
        await Promise.all(response.map(async (record: any) => {
@@ -229,24 +249,32 @@ export default class UploadPlugin extends AdminForthPlugin {
     // add delete hook which sets tag adminforth-candidate-for-cleanup to true
     resourceConfig.hooks.delete.afterSave.push(async ({ record }: { record: any }) => {
       if (record[pathColumnName]) {
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
+
+          region: this.options.s3Region,
         });
 
-        await s3.putObjectTagging({
-          Bucket: this.options.s3Bucket,
-          Key: record[pathColumnName],
-          Tagging: {
-            TagSet: [
-              {
-                Key: ADMINFORTH_NOT_YET_USED_TAG,
-                Value: 'true'
-              }
-            ]
-          }
-        }).promise();
+        try {
+          await s3.putObjectTagging({
+            Bucket: this.options.s3Bucket,
+            Key: record[pathColumnName],
+            Tagging: {
+              TagSet: [
+                {
+                  Key: ADMINFORTH_NOT_YET_USED_TAG,
+                  Value: 'true'
+                }
+              ]
+            }
+          });
+        } catch (e) {
+          // file might be e.g. already deleted, so we catch error
+          console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${record[pathColumnName]}. File will not be auto-cleaned up`, e);
+        }
       }
       return { ok: true };
     });
@@ -268,36 +296,45 @@ export default class UploadPlugin extends AdminForthPlugin {
     resourceConfig.hooks.edit.afterSave.push(async ({ record, oldRecord }: { record: any, oldRecord: any }) => {
 
       if (record[virtualColumn.name] || record[virtualColumn.name] === null) {
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
+
+          region: this.options.s3Region,
         });
 
         if (oldRecord[pathColumnName]) {
           // put tag to delete old file
-          await s3.putObjectTagging({
-            Bucket: this.options.s3Bucket,
-            Key: oldRecord[pathColumnName],
-            Tagging: {
-              TagSet: [
-                {
-                  Key: ADMINFORTH_NOT_YET_USED_TAG,
-                  Value: 'true'
-                }
-              ]
-            }
-          }).promise();
+          try {
+            await s3.putObjectTagging({
+              Bucket: this.options.s3Bucket,
+              Key: oldRecord[pathColumnName],
+              Tagging: {
+                TagSet: [
+                  {
+                    Key: ADMINFORTH_NOT_YET_USED_TAG,
+                    Value: 'true'
+                  }
+                ]
+              }
+            });
+          } catch (e) {
+            // file might be e.g. already deleted, so we catch error
+            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${oldRecord[pathColumnName]}. File will not be auto-cleaned up`, e);
+          }
         }
         if (record[virtualColumn.name] !== null) {
           // remove tag from new file
+          // in this case we let it crash if it fails: this is a new file which just was uploaded. 
           await s3.putObjectTagging({
             Bucket: this.options.s3Bucket,
             Key: record[pathColumnName],
             Tagging: {
               TagSet: []
             }
-          }).promise();
+          });
         }
       }
       return { ok: true };
@@ -319,33 +356,56 @@ export default class UploadPlugin extends AdminForthPlugin {
         const { originalFilename, contentType, size, originalExtension } = body;
 
         if (this.options.allowedFileExtensions && !this.options.allowedFileExtensions.includes(originalExtension)) {
-          throw new Error(`File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`);
+          return {
+            error: `File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`
+          };
         }
 
         const s3Path: string = this.options.s3Path({ originalFilename, originalExtension, contentType });
         if (s3Path.startsWith('/')) {
           throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
         }
-        const s3 = new AWS.S3({
-          accessKeyId: this.options.s3AccessKeyId,
-          secretAccessKey: this.options.s3SecretAccessKey,
-          region: this.options.s3Region
+        const s3 = new S3({
+          credentials: {
+            accessKeyId: this.options.s3AccessKeyId,
+            secretAccessKey: this.options.s3SecretAccessKey,
+          },
+
+          region: this.options.s3Region,
         });
 
+        const tagline = `${ADMINFORTH_NOT_YET_USED_TAG}=true`;
         const params = {
           Bucket: this.options.s3Bucket,
           Key: s3Path,
           ContentType: contentType,
-          ACL: this.options.s3ACL || 'private',
-          Tagging: `${ADMINFORTH_NOT_YET_USED_TAG}=true`,
+          ACL: (this.options.s3ACL || 'private') as  ObjectCannedACL,
+          Tagging: tagline,
         };
 
-        const uploadUrl = await s3.getSignedUrl('putObject', params,)
+        const uploadUrl = await await getSignedUrl(s3, new PutObjectCommand(params), {
+          expiresIn: 1800,
+          unhoistableHeaders: new Set(['x-amz-tagging']),
+        });
 
+        let previewUrl;
+        if (this.options.preview?.previewUrl) {
+          previewUrl = this.options.preview.previewUrl({ s3Path });
+          return;
+        } else if (this.options.s3ACL === 'public-read') {
+          previewUrl = `https://${this.options.s3Bucket}.s3.${this.options.s3Region}.amazonaws.com/${s3Path}`;
+        } else {
+          previewUrl = await getSignedUrl(s3, new GetObjectCommand({
+            Bucket: this.options.s3Bucket,
+            Key: s3Path,
+          }));
+        }
         
         return {
           uploadUrl,
           s3Path,
+          tagline,
+          previewUrl,
         };
       }
     });

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@adminforth/upload",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "rollout": "tsc && cp -rf custom dist/ && npm version patch && npm publish --access public",
+    "rollout": "tsc && rsync -av --exclude 'node_modules' custom dist/ && npm version patch && npm publish --access public",
     "prepare": "npm link adminforth",
     "build": "tsc"
   },
@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "aws-sdk": "^2.1654.0"
+    "@aws-sdk/client-s3": "^3.629.0",
+    "@aws-sdk/s3-request-presigner": "^3.629.0"
   }
 }

package/types.ts

@@ -60,9 +60,16 @@ export type PluginOptions = {
   preview: {
 
     /**
-     * By default preview is shown in the show view only. If you want to show it in the list view as well, set this to true
+     * Whether to show preview of image instead of path in list field
+     * By default true
      */
-    showInList: boolean,
+    showInList?: boolean,
+
+    /**
+     * Whether to show preview of image instead of path in list field
+     * By default true
+     */
+    showInShow?: boolean,
 
     /**
      * Used to display preview (if it is image) in list and show views.