diff --git a/packages/frontend-2/components/project/CardImportFileArea.vue b/packages/frontend-2/components/project/CardImportFileArea.vue index 432cf2548..9fc636d42 100644 --- a/packages/frontend-2/components/project/CardImportFileArea.vue +++ b/packages/frontend-2/components/project/CardImportFileArea.vue @@ -277,7 +277,7 @@ const onModelCreate = (params: { model: ProjectPageLatestItemsModelItemFragment if (!isFileUploadUploadable.value) return uploadSelected({ - modelName: params.model.name + model: params.model }) } @@ -296,11 +296,18 @@ watch(showNewModelDialog, (newVal, oldVal) => { watch(isUploading, (newVal, oldVal) => { // fileUpload is always gonna be non-null when isUploading changes - emit('uploading', { isUploading: newVal, upload: fileUpload.value! }) + emit('uploading', { + isUploading: newVal, + upload: fileUpload.value!, + error: errorMessage.value + }) if (!newVal && oldVal) { // Reset file upload state when upload finishes - resetSelected() + // but only if it was successful! otherwise we wanna show the error + if (!errorMessage.value) { + resetSelected() + } } }) diff --git a/packages/frontend-2/components/project/page/models/Card.vue b/packages/frontend-2/components/project/page/models/Card.vue index 6d990cb8d..c204dfea7 100644 --- a/packages/frontend-2/components/project/page/models/Card.vue +++ b/packages/frontend-2/components/project/page/models/Card.vue @@ -238,7 +238,7 @@ const onCardClick = (event: KeyboardEvent | MouseEvent) => { } const onVersionUploading = (payload: FileAreaUploadingPayload) => { - isVersionUploading.value = payload.isUploading + isVersionUploading.value = !!(payload.isUploading || payload.error) } const triggerVersionUpload = () => { diff --git a/packages/frontend-2/components/project/page/models/CardView.vue b/packages/frontend-2/components/project/page/models/CardView.vue index 41822ff3a..439906b5b 100644 --- a/packages/frontend-2/components/project/page/models/CardView.vue +++ b/packages/frontend-2/components/project/page/models/CardView.vue @@ -204,7 +204,7 @@ const calculateLoaderId = () => { } const onModelUploading = (payload: FileAreaUploadingPayload) => { - isModelUploading.value = payload.isUploading + isModelUploading.value = !!(payload.isUploading || payload.error) } watch(areQueriesLoading, (newVal) => { diff --git a/packages/frontend-2/components/project/page/models/ListView.vue b/packages/frontend-2/components/project/page/models/ListView.vue index a736e6631..aa65d9c25 100644 --- a/packages/frontend-2/components/project/page/models/ListView.vue +++ b/packages/frontend-2/components/project/page/models/ListView.vue @@ -216,7 +216,7 @@ const calculateLoaderId = () => { } const onModelUploading = (payload: FileAreaUploadingPayload) => { - isModelUploading.value = payload.isUploading + isModelUploading.value = !!(payload.isUploading || payload.error) } watch(areQueriesLoading, (newVal) => { diff --git a/packages/frontend-2/components/project/page/models/StructureItem.vue b/packages/frontend-2/components/project/page/models/StructureItem.vue index 7e85eb6a4..87847e28c 100644 --- a/packages/frontend-2/components/project/page/models/StructureItem.vue +++ b/packages/frontend-2/components/project/page/models/StructureItem.vue @@ -436,7 +436,7 @@ const triggerVersionUpload = () => { } const onVersionUploading = (payload: FileAreaUploadingPayload) => { - isVersionUploading.value = payload.isUploading + isVersionUploading.value = !!(payload.isUploading || payload.error) } const onVersionsClick = () => { diff --git a/packages/frontend-2/components/projects/ProjectDashboardCard.vue b/packages/frontend-2/components/projects/ProjectDashboardCard.vue index b3a668f65..d7a7ed3b1 100644 --- a/packages/frontend-2/components/projects/ProjectDashboardCard.vue +++ b/packages/frontend-2/components/projects/ProjectDashboardCard.vue @@ -202,6 +202,6 @@ const gridClasses = computed(() => [ ]) const onModelUploading = (payload: FileAreaUploadingPayload) => { - isModelUploading.value = payload.isUploading + isModelUploading.value = !!(payload.isUploading || payload.error) } diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts index 840368b4f..fbce55302 100644 --- a/packages/frontend-2/lib/common/generated/gql/gql.ts +++ b/packages/frontend-2/lib/common/generated/gql/gql.ts @@ -211,6 +211,8 @@ type Documents = { "\n query ServerInfoBlobSizeLimit {\n serverInfo {\n configuration {\n blobSizeLimitBytes\n }\n }\n }\n": typeof types.ServerInfoBlobSizeLimitDocument, "\n query ServerInfoAllScopes {\n serverInfo {\n scopes {\n name\n description\n }\n }\n }\n": typeof types.ServerInfoAllScopesDocument, "\n query ProjectModelsSelectorValues($projectId: String!, $cursor: String) {\n project(id: $projectId) {\n id\n models(limit: 100, cursor: $cursor) {\n cursor\n totalCount\n items {\n ...CommonModelSelectorModel\n }\n }\n }\n }\n": typeof types.ProjectModelsSelectorValuesDocument, + "\n mutation GenerateUploadUrl($input: GenerateFileUploadUrlInput!) {\n fileUploadMutations {\n generateUploadUrl(input: $input) {\n url\n fileId\n }\n }\n }\n": typeof types.GenerateUploadUrlDocument, + "\n mutation StartFileImport($input: StartFileImportInput!) {\n fileUploadMutations {\n startFileImport(input: $input) {\n id\n }\n }\n }\n": typeof types.StartFileImportDocument, "\n fragment UseFileImport_Project on Project {\n id\n }\n": typeof types.UseFileImport_ProjectFragmentDoc, "\n fragment UseFileImport_Model on Model {\n id\n name\n }\n": typeof types.UseFileImport_ModelFragmentDoc, "\n query MainServerInfoData {\n serverInfo {\n adminContact\n canonicalUrl\n company\n description\n guestModeEnabled\n inviteOnly\n name\n termsOfService\n version\n automateUrl\n configuration {\n isEmailEnabled\n }\n }\n }\n": typeof types.MainServerInfoDataDocument, @@ -662,6 +664,8 @@ const documents: Documents = { "\n query ServerInfoBlobSizeLimit {\n serverInfo {\n configuration {\n blobSizeLimitBytes\n }\n }\n }\n": types.ServerInfoBlobSizeLimitDocument, "\n query ServerInfoAllScopes {\n serverInfo {\n scopes {\n name\n description\n }\n }\n }\n": types.ServerInfoAllScopesDocument, "\n query ProjectModelsSelectorValues($projectId: String!, $cursor: String) {\n project(id: $projectId) {\n id\n models(limit: 100, cursor: $cursor) {\n cursor\n totalCount\n items {\n ...CommonModelSelectorModel\n }\n }\n }\n }\n": types.ProjectModelsSelectorValuesDocument, + "\n mutation GenerateUploadUrl($input: GenerateFileUploadUrlInput!) {\n fileUploadMutations {\n generateUploadUrl(input: $input) {\n url\n fileId\n }\n }\n }\n": types.GenerateUploadUrlDocument, + "\n mutation StartFileImport($input: StartFileImportInput!) {\n fileUploadMutations {\n startFileImport(input: $input) {\n id\n }\n }\n }\n": types.StartFileImportDocument, "\n fragment UseFileImport_Project on Project {\n id\n }\n": types.UseFileImport_ProjectFragmentDoc, "\n fragment UseFileImport_Model on Model {\n id\n name\n }\n": types.UseFileImport_ModelFragmentDoc, "\n query MainServerInfoData {\n serverInfo {\n adminContact\n canonicalUrl\n company\n description\n guestModeEnabled\n inviteOnly\n name\n termsOfService\n version\n automateUrl\n configuration {\n isEmailEnabled\n }\n }\n }\n": types.MainServerInfoDataDocument, @@ -1718,6 +1722,14 @@ export function graphql(source: "\n query ServerInfoAllScopes {\n serverInfo * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql(source: "\n query ProjectModelsSelectorValues($projectId: String!, $cursor: String) {\n project(id: $projectId) {\n id\n models(limit: 100, cursor: $cursor) {\n cursor\n totalCount\n items {\n ...CommonModelSelectorModel\n }\n }\n }\n }\n"): (typeof documents)["\n query ProjectModelsSelectorValues($projectId: String!, $cursor: String) {\n project(id: $projectId) {\n id\n models(limit: 100, cursor: $cursor) {\n cursor\n totalCount\n items {\n ...CommonModelSelectorModel\n }\n }\n }\n }\n"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql(source: "\n mutation GenerateUploadUrl($input: GenerateFileUploadUrlInput!) {\n fileUploadMutations {\n generateUploadUrl(input: $input) {\n url\n fileId\n }\n }\n }\n"): (typeof documents)["\n mutation GenerateUploadUrl($input: GenerateFileUploadUrlInput!) {\n fileUploadMutations {\n generateUploadUrl(input: $input) {\n url\n fileId\n }\n }\n }\n"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql(source: "\n mutation StartFileImport($input: StartFileImportInput!) {\n fileUploadMutations {\n startFileImport(input: $input) {\n id\n }\n }\n }\n"): (typeof documents)["\n mutation StartFileImport($input: StartFileImportInput!) {\n fileUploadMutations {\n startFileImport(input: $input) {\n id\n }\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts index 699842d14..0671afcd7 100644 --- a/packages/frontend-2/lib/common/generated/gql/graphql.ts +++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts @@ -5800,6 +5800,20 @@ export type ProjectModelsSelectorValuesQueryVariables = Exact<{ export type ProjectModelsSelectorValuesQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, models: { __typename?: 'ModelCollection', cursor?: string | null, totalCount: number, items: Array<{ __typename?: 'Model', id: string, name: string }> } } }; +export type GenerateUploadUrlMutationVariables = Exact<{ + input: GenerateFileUploadUrlInput; +}>; + + +export type GenerateUploadUrlMutation = { __typename?: 'Mutation', fileUploadMutations: { __typename?: 'FileUploadMutations', generateUploadUrl: { __typename?: 'GenerateFileUploadUrlOutput', url: string, fileId: string } } }; + +export type StartFileImportMutationVariables = Exact<{ + input: StartFileImportInput; +}>; + + +export type StartFileImportMutation = { __typename?: 'Mutation', fileUploadMutations: { __typename?: 'FileUploadMutations', startFileImport: { __typename?: 'FileUpload', id: string } } }; + export type UseFileImport_ProjectFragment = { __typename?: 'Project', id: string }; export type UseFileImport_ModelFragment = { __typename?: 'Model', id: string, name: string }; @@ -7609,6 +7623,8 @@ export const MentionsUserSearchDocument = {"kind":"Document","definitions":[{"ki export const ServerInfoBlobSizeLimitDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ServerInfoBlobSizeLimit"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configuration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blobSizeLimitBytes"}}]}}]}}]}}]} as unknown as DocumentNode; export const ServerInfoAllScopesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ServerInfoAllScopes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"scopes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}}]}}]}}]} as unknown as DocumentNode; export const ProjectModelsSelectorValuesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsSelectorValues"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"100"}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CommonModelSelectorModel"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CommonModelSelectorModel"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode; +export const GenerateUploadUrlDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"GenerateUploadUrl"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"GenerateFileUploadUrlInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fileUploadMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"generateUploadUrl"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"fileId"}}]}}]}}]}}]} as unknown as DocumentNode; +export const StartFileImportDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StartFileImport"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"StartFileImportInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fileUploadMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startFileImport"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; export const MainServerInfoDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MainServerInfoData"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"adminContact"}},{"kind":"Field","name":{"kind":"Name","value":"canonicalUrl"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"guestModeEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"inviteOnly"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"termsOfService"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"automateUrl"}},{"kind":"Field","name":{"kind":"Name","value":"configuration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"isEmailEnabled"}}]}}]}}]}}]} as unknown as DocumentNode; export const DeleteAccessTokenDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteAccessToken"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiTokenRevoke"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}]}]}}]} as unknown as DocumentNode; export const CreateAccessTokenDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateAccessToken"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ApiTokenCreateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"apiTokenCreate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}]}]}}]} as unknown as DocumentNode; diff --git a/packages/frontend-2/lib/core/api/fileImport.ts b/packages/frontend-2/lib/core/api/fileImport.ts index 806259807..5584f43ea 100644 --- a/packages/frontend-2/lib/core/api/fileImport.ts +++ b/packages/frontend-2/lib/core/api/fileImport.ts @@ -8,18 +8,25 @@ export enum FileUploadConvertedStatus { Error = 3 } -export function importFile( +export type ImportFile = ( params: { file: File projectId: string apiOrigin: string authToken: string - modelName?: string + modelName: string + modelId: string }, callbacks?: Partial<{ onProgress: (percentage: number) => void }> -) { +) => Promise + +/** + * Old upload mechanism that streams uploads through the server + * @deprecated Use useFileImportApi() instead + */ +export const importFileLegacy: ImportFile = (params, callbacks) => { const { file, projectId, modelName, apiOrigin, authToken } = params const { onProgress } = callbacks || {} diff --git a/packages/frontend-2/lib/core/composables/fileImport.ts b/packages/frontend-2/lib/core/composables/fileImport.ts index 86a175e29..d6c7356c3 100644 --- a/packages/frontend-2/lib/core/composables/fileImport.ts +++ b/packages/frontend-2/lib/core/composables/fileImport.ts @@ -1,20 +1,149 @@ import type { MaybeRef } from '@vueuse/core' -import { ensureError } from '@speckle/shared' +import { buildManualPromise, ensureError } from '@speckle/shared' import type { MaybeNullOrUndefined, Nullable, Optional } from '@speckle/shared' import { useServerFileUploadLimit } from '~~/lib/common/composables/serverInfo' import type { UploadableFileItem, UploadFileItem } from '~~/lib/form/composables/fileUpload' -import { importFile } from '~~/lib/core/api/fileImport' +import { importFileLegacy, type ImportFile } from '~~/lib/core/api/fileImport' import { useAuthCookie } from '~~/lib/auth/composables/auth' -import { BlobUploadStatus } from '~~/lib/core/api/blobStorage' +import { BlobUploadStatus, type BlobPostResultItem } from '~~/lib/core/api/blobStorage' import { useMixpanel } from '~~/lib/core/composables/mp' import { graphql } from '~/lib/common/generated/gql' import type { UseFileImport_ModelFragment, UseFileImport_ProjectFragment } from '~/lib/common/generated/gql/graphql' +import { useApolloClient } from '@vue/apollo-composable' + +const generateUploadUrlMutation = graphql(` + mutation GenerateUploadUrl($input: GenerateFileUploadUrlInput!) { + fileUploadMutations { + generateUploadUrl(input: $input) { + url + fileId + } + } + } +`) + +const startFileImportMutation = graphql(` + mutation StartFileImport($input: StartFileImportInput!) { + fileUploadMutations { + startFileImport(input: $input) { + id + } + } + } +`) + +export const useFileImportApi = () => { + const { + public: { FF_LARGE_FILE_IMPORTS_ENABLED } + } = useRuntimeConfig() + const apollo = useApolloClient().client + + const importFileV2: ImportFile = async (params, callbacks) => { + const { file, projectId, modelId } = params + const { onProgress } = callbacks || {} + + // Generate upload URL + const generateUploadUrlResponse = await apollo.mutate({ + mutation: generateUploadUrlMutation, + variables: { + input: { + projectId, + fileName: file.name + } + } + }) + + const generateUploadUrl = + generateUploadUrlResponse.data?.fileUploadMutations.generateUploadUrl + if (!generateUploadUrl) { + const errMsg = getFirstGqlErrorMessage( + generateUploadUrlResponse.errors, + "Couldn't generate upload URL" + ) + throw new Error(errMsg) + } + + const { url: uploadUrl, fileId } = generateUploadUrl + + // Upload to S3 compatible endpoint + const request = new XMLHttpRequest() + const uploadPromise = buildManualPromise<{ etag: string }>() + request.open('PUT', uploadUrl) + request.setRequestHeader('Content-Type', file.type) + + request.upload.addEventListener('progress', (e) => { + const percentage = (e.loaded / e.total) * 100 + onProgress?.(percentage) + }) + + const handleResponse = () => { + const statusCode = request.status + if (statusCode >= 200 && statusCode < 300) { + // Collect etag + const etag = request.getResponseHeader('ETag') + if (!etag) { + return uploadPromise.reject(new Error('No ETag in upload response')) + } + return uploadPromise.resolve({ etag }) + } else { + // Try to resolve error message from XML response w/ regex (dont want to parse XML) + const errorMessage = request.responseText.match( + /(.*?)<\/Message>/ + )?.[1] + return uploadPromise.reject( + new Error(errorMessage || `Upload failed with status ${statusCode}`) + ) + } + } + + request.addEventListener('load', () => handleResponse()) + request.addEventListener('error', () => handleResponse()) + request.send(file) + const { etag } = await uploadPromise.promise + + // Now lets start the file import + const startFileImportResponse = await apollo.mutate({ + mutation: startFileImportMutation, + variables: { + input: { + projectId, + fileId, + etag, + modelId + } + } + }) + const fileImportStarted = + startFileImportResponse.data?.fileUploadMutations.startFileImport.id + if (!fileImportStarted) { + const errMsg = getFirstGqlErrorMessage( + startFileImportResponse.errors, + "Couldn't start file import" + ) + throw new Error(errMsg) + } + + const res: BlobPostResultItem = { + fileName: file.name, + fileSize: file.size, + formKey: 'file', + uploadStatus: BlobUploadStatus.Completed, + uploadError: '' + } + + return res + } + + return { + importFile: FF_LARGE_FILE_IMPORTS_ENABLED ? importFileV2 : importFileLegacy + } +} graphql(` fragment UseFileImport_Project on Project { @@ -31,12 +160,11 @@ graphql(` export function useFileImport(params: { project: MaybeRef - model?: MaybeRef> /** - * Sometimes we don't have a model, but we still want to specify a target model name (e.g. for - * model list view uploads, where list items don't necessarily represent real models) + * Model should exist if upload is automatically triggered. Otherwise you must still feed it in, but + * at the point when you call uploadSelected(). */ - modelName?: MaybeRef> + model?: MaybeRef> /** * If true, the upload will be prepared and validated, but for it to start you must invoke uploadSelected() manually */ @@ -58,18 +186,19 @@ export function useFileImport(params: { fileSelectedCallback } = params + const { importFile } = useFileImportApi() const { maxSizeInBytes } = useServerFileUploadLimit() const authToken = useAuthCookie() const apiOrigin = useApiOrigin() const accept = ref('.ifc,.stl,.obj') - const upload = ref(null as Nullable }>) + const upload = ref(null as Nullable) const isUploading = ref(false) - const modelName = computed(() => unref(params.modelName) || unref(model)?.name) const isUploadable = computed(() => { if (!upload.value) return false if (upload.value.error) return false + if (upload.value.result) return false if (isUploading.value) return false if (!authToken.value) return false if (!upload.value.file) return false @@ -80,20 +209,32 @@ export function useFileImport(params: { const uploadSelected = async (params?: { /** - * Optionally override model name to target for the upload + * Optionally override model target for the upload */ - modelName?: string + model: UseFileImport_ModelFragment }) => { if (!isUploadable.value || !upload.value || !authToken.value) return - const finalModelName = params?.modelName || upload.value.modelName + + const baseModel = unref(model) + const overridenModel = params?.model isUploading.value = true try { + let finalModel: UseFileImport_ModelFragment + if (overridenModel) { + finalModel = overridenModel + } else if (baseModel) { + finalModel = baseModel + } else { + throw new Error('No model provided for file import') + } + const res = await importFile( { file: upload.value.file, projectId: unref(project).id, - modelName: finalModelName, + modelName: finalModel.name, + modelId: finalModel.id, authToken: authToken.value, apiOrigin }, @@ -104,13 +245,11 @@ export function useFileImport(params: { } ) upload.value.result = res - // TODO: add file extension - // const extension = res.fileName?.split('.').reverse()[0] + mp.track('Upload Action', { type: 'action', name: 'create', - source: finalModelName ? 'model card' : 'empty card' - // extension + source: 'model card' }) fileUploadedCallback?.(upload.value) @@ -131,13 +270,7 @@ export function useFileImport(params: { upload.value = null } - const onFilesSelected = async (params: { - files: UploadableFileItem[] - /** - * Optionally override model name to target for the upload - */ - modelName?: string - }) => { + const onFilesSelected = async (params: { files: UploadableFileItem[] }) => { if (isUploading.value || !authToken.value) return const file = params.files[0] @@ -146,8 +279,7 @@ export function useFileImport(params: { upload.value = { ...file, result: undefined, - progress: 0, - modelName: params.modelName || modelName.value || undefined + progress: 0 } if (file.error) { diff --git a/packages/frontend-2/lib/form/helpers/fileUpload.ts b/packages/frontend-2/lib/form/helpers/fileUpload.ts index 862bb7994..2578a1084 100644 --- a/packages/frontend-2/lib/form/helpers/fileUpload.ts +++ b/packages/frontend-2/lib/form/helpers/fileUpload.ts @@ -1,3 +1,7 @@ import type { UploadFileItem } from '@speckle/ui-components' -export type FileAreaUploadingPayload = { isUploading: boolean; upload: UploadFileItem } +export type FileAreaUploadingPayload = { + isUploading: boolean + upload: UploadFileItem + error: string | null +} diff --git a/packages/ui-components/src/composables/form/fileUpload.ts b/packages/ui-components/src/composables/form/fileUpload.ts index 74a36d698..1a392fb10 100644 --- a/packages/ui-components/src/composables/form/fileUpload.ts +++ b/packages/ui-components/src/composables/form/fileUpload.ts @@ -10,6 +10,7 @@ import type { FileTypeSpecifier } from '~~/src/helpers/form/file' import { computed, unref } from 'vue' import type { CSSProperties } from 'vue' import { BaseError } from '~~/src/lib' +import type { BlobUploadStatus } from '@speckle/shared/blobs' /** * A file, as emitted out from FileUploadZone @@ -31,7 +32,7 @@ export type BlobPostResultItem = { /** * Success = 1, Failure = 2 */ - uploadStatus: number + uploadStatus: BlobUploadStatus uploadError: string }