From 0bee7e1afb2dca5f50777c7aca8b35a57f48e6de Mon Sep 17 00:00:00 2001 From: Trif Adriana Date: Thu, 29 Apr 2021 15:42:35 +0300 Subject: [PATCH 1/2] Set parentid --- EtoolsUploadMulti.js | 1 + README.md | 115 +++++++++++++++++----------------- offline/dexie-operations.d.ts | 8 +++ offline/dexie-operations.js | 23 +++++++ package.json | 2 +- 5 files changed, 92 insertions(+), 57 deletions(-) diff --git a/EtoolsUploadMulti.js b/EtoolsUploadMulti.js index 984184b..f26d0de 100644 --- a/EtoolsUploadMulti.js +++ b/EtoolsUploadMulti.js @@ -194,6 +194,7 @@ export class EtoolsUploadMulti extends RequestHelperMulti(CommonMixin(PolymerEle filetype: files[i].type, filename: files[i].name, extraInfo: this.endpointInfo ? this.endpointInfo.extraInfo : '', + parentId: window.OfflineUploadParentId || ((this.endpointInfo && this.endpointInfo.extraInfo) ? this.endpointInfo.extraInfo.parentId : ''), unsynced: true } diff --git a/README.md b/README.md index 26fd2a4..60209b2 100644 --- a/README.md +++ b/README.md @@ -3,76 +3,81 @@ Use to upload files ## Install + `$ npm i --save @unicef-polymer/etools-upload` ## Description + Polymer 3 component used for uploading files. When `autoUpload` is true and `uploadEndpoint` is set , it automatically uploads the file and returns an `id` stored in the `fileUrl` property. ### Offline functionality -* If the `activateOffline` attribute is set on the component, if there is no internet connection during the upload, the file is saved in local IndexedDb with a temp id. -* The component expects `window.Etools.AttachmentsDbName` to be set from the parent application. -* The IndexedDb is created on `connectedCallback`. If you need the db to exist prior to this you can call `createAttachmentsDexie` method directly from your code. -* When the files have finished being saved in IndexedDb the same event as for online upload is fired - `upload-finished`. The event detail has the following format - - {success:[{info about file}], error:[{error}]} -* Any other extra information can be saved in IndexedDb along with the file by setting property `endpointInfo.extraInfo` :{} on the component. - +- If the `activateOffline` attribute is set on the component, if there is no internet connection during the upload, the file is saved in local IndexedDb with a temp id. +- The component expects `window.Etools.AttachmentsDbName` to be set from the parent application. +- The IndexedDb is created on `connectedCallback`. If you need the db to exist prior to this you can call `createAttachmentsDexie` method directly from your code. +- When the files have finished being saved in IndexedDb the same event as for online upload is fired - `upload-finished`. The event detail has the following format + - {success:[{info about file}], error:[{error}]} +- Any other extra information can be saved in IndexedDb along with the file by setting property `endpointInfo.extraInfo` :{} on the component. ### Components -* \ -* \ + +- \ +- \ ### Resusable Methods -1. `dexie-operations` file: Methods to interact with Dexie db -2. `upload-helper` file exposes reusable methods that can upload files and receives a `config` object as param: - - you can use `upload` method if you have the binary data of the file - - `uploadFileStoredInDexie` gets a file stored in IndexedDb , uploads it then deletes it from IndexedDb - - ``` - Config param expected format: - config = { - endpointInfo?: { - endpoint: 'url', - extraInfo: {any: any}, - rawFilePropertyName: 'attachment' - }, - uploadEndpoint: '', - jwtLocalStorageKey?: '' - } - - ``` +1. `dexie-operations` file: Methods to interact with Dexie db +2. `upload-helper` file exposes reusable methods that can upload files and receives a `config` object as param: + + - you can use `upload` method if you have the binary data of the file + - `uploadFileStoredInDexie` gets a file stored in IndexedDb , uploads it then deletes it from IndexedDb + + ``` + + Config param expected format: + config = { + endpointInfo?: { + endpoint: 'url', + extraInfo: {any: any}, + rawFilePropertyName: 'attachment' + }, + uploadEndpoint: '', + jwtLocalStorageKey?: '' + } + + ``` + + ``` ### Upload component features -1. `label`: text to be displayed on top of the control -2. `uploadBtnLabel`: text to be displayed on the button, default is 'Upload file' -3. `accept`: accepted file types (Ex: ".doc,.docx,.pdf,.jpg,.png") -4. `file-url`: When a new file is uploaded and the upload has finished it holds the id of the file. After the id is saved on the entity for which the upload was made, it will hold the url to the file. -5. `upload-endpoint`: url for the upload -6. `readonly`: can be used as html attribute or polymer property (Ex: readonly$="[[!permissions.allowEdit]]"), enable/disable upload control -7. `required`: can be used as html attribute or polymer property (Ex: required$="[[permissions.allowEdit]]"), specifies if control must be filled out -8. `auto-validate`: if set to true and control is required validate if control is set -9. `error-message`: custom text to be displayed on upload error +1. `label`: text to be displayed on top of the control +2. `uploadBtnLabel`: text to be displayed on the button, default is 'Upload file' +3. `accept`: accepted file types (Ex: ".doc,.docx,.pdf,.jpg,.png") +4. `file-url`: When a new file is uploaded and the upload has finished it holds the id of the file. After the id is saved on the entity for which the upload was made, it will hold the url to the file. +5. `upload-endpoint`: url for the upload +6. `readonly`: can be used as html attribute or polymer property (Ex: readonly$="[[!permissions.allowEdit]]"), enable/disable upload control +7. `required`: can be used as html attribute or polymer property (Ex: required$="[[permissions.allowEdit]]"), specifies if control must be filled out +8. `auto-validate`: if set to true and control is required validate if control is set +9. `error-message`: custom text to be displayed on upload error 10. `auto-upload`: if `true` it automatically upload the file after selection. default is `true`. 11. `endpointInfo`: can be used to set any other information needed by the upload online or offline. If endpointInfo.endpoint is specified , uploadEndpoint is no longer needed. - - Expected format: + - Expected format: { endpoint: 'url', - /** Any extra properties with their values, that need to be set in the FormData on the upload request */ + /** Any extra properties with their values, that need to be set in the FormData on the upload request, like parentId */ extraInfo: {any: any}, /**The name of the field that will hold the binary data in the FormData on the upload request. If not specified it defaults to `file*/ rawFilePropertyName: 'file' } - #Buttons 10. `Download` button will be displayed after uploaded file was saved -11. `show-delete-btn`: if set to true, will display a 'Delete' button after file was selected, in order to be able to remove the file +11. `show-delete-btn`: if set to true, will display a 'Delete' button after file was selected, in order to be able to remove the file 12. `show-change`: if set to true, will display a 'Change' button after file was selected, in order to be able to replace the file 13. `jwtLocalStorageKey` specifies the local storage key where the token is stored. If `window.AppMsalInstance` is set , the component also checks the expiration of the token and silently refreshes it if needed. @@ -83,25 +88,23 @@ When `autoUpload` is true and `uploadEndpoint` is set , it automatically uploads 15. `on-change-unsaved-file`: triggered on file selection if previous upload was not saved 16. `on-delete-file`: triggered on file delete with the file url as parameter (Ex: {file: fileUrl}) - ## Usage example - - - +auto-validate +on-change-unsaved-file="\_onChangeUnsavedFile"> + ## Install the Polymer-CLI diff --git a/offline/dexie-operations.d.ts b/offline/dexie-operations.d.ts index c8e7615..30dbc71 100644 --- a/offline/dexie-operations.d.ts +++ b/offline/dexie-operations.d.ts @@ -5,3 +5,11 @@ export declare function getFileFromDexieById(id: string): Promise; export declare function getFilesFromDexieByIds(ids: string[]): Promise; export declare function deleteFileFromDexie(id: string): Promise; //TODO test if more specific return type can be provided + +export declare function updateParentIdInDexie(oldParentId: string, newParentId: string); + +export declare function updateProvidedPropertyNameInDexie(attId: string, propName: string, val: string); + +export declare function deleteByParentIdFromDexie(parentId: string); + +export declare function getFileCountByParentIdFromDexie(parentId: string); diff --git a/offline/dexie-operations.js b/offline/dexie-operations.js index fcde18d..7b060db 100644 --- a/offline/dexie-operations.js +++ b/offline/dexie-operations.js @@ -19,3 +19,26 @@ export function deleteFileFromDexie(id) { return window.Etools.AttachmentsDb.attachments.delete(id); } +export function updateParentIdInDexie(oldParentId, newParentId) { + return window.Etools.AttachmentsDb.attachments + .where({parentId: oldParentId}).modify({parentId: newParentId}); +} + +export function updateProvidedPropertyNameInDexie(attId, propName, val) { + return window.Etools.AttachmentsDb.attachments + .where({id: attId}).modify({[propName]: val}); +} + +export function deleteByParentIdFromDexie(parentId) { + return window.Etools.AttachmentsDb.attachments + .where({parentId: parentId}).delete(); +} + +/** + * Avoid returning all files because they contain the binary data also and it's best to save memory + */ +export function getFileCountByParentIdFromDexie(parentId) { + return window.Etools.AttachmentsDb.attachments + .where({parentId: parentId}).count(); +} + diff --git a/package.json b/package.json index 2e67e42..db2445f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@unicef-polymer/etools-upload", - "version": "3.4.0", + "version": "3.5.0-rc.1", "homepage": "https://github.com/unicef-polymer/etools-upload", "repository": { "type": "git", From 83ca588266204c55723f238e35c892613db5041f Mon Sep 17 00:00:00 2001 From: Trif Adriana Date: Thu, 29 Apr 2021 17:33:28 +0300 Subject: [PATCH 2/2] version --- package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index db2445f..97aceec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@unicef-polymer/etools-upload", - "version": "3.5.0-rc.1", + "version": "3.5.0", "homepage": "https://github.com/unicef-polymer/etools-upload", "repository": { "type": "git", @@ -17,7 +17,6 @@ "build": "polymer build", "lint": "polymer lint", "test": "polymer test", - "publish": "git push --tags && npm publish", "test:integration": "polymer build # test that psk builds without error with the CLI", "gen-typings": "gen-typescript-declarations --deleteExisting --outDir './'" }, @@ -48,8 +47,5 @@ }, "engines": { "node": ">=8.0" - }, - "publishConfig": { - "access": "public" } }