feat(editor): ✨ Add file upload input
This commit is contained in:
Baptiste Arnaud
131
apps/viewer/playwright/fixtures/typebots/fileUpload.json
Normal file
131
apps/viewer/playwright/fixtures/typebots/fileUpload.json
Normal file
@ -0,0 +1,131 @@
|
||||
{
|
||||
"id": "cl45ojo7z01383q1av699t0qj",
|
||||
"createdAt": "2022-06-08T14:22:14.879Z",
|
||||
"updatedAt": "2022-06-08T16:19:32.893Z",
|
||||
"icon": null,
|
||||
"name": "My typebot",
|
||||
"publishedTypebotId": "cl45ol3j8000f2e6gcifqf21t",
|
||||
"folderId": null,
|
||||
"groups": [
|
||||
{
|
||||
"id": "cl45ojo7y00013q1aaysi2o6i",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "cl45ojo7y00023q1aavrwd411",
|
||||
"type": "start",
|
||||
"label": "Start",
|
||||
"groupId": "cl45ojo7y00013q1aaysi2o6i",
|
||||
"outgoingEdgeId": "cl45ojxvc00082e6gw1xqnxpp"
|
||||
}
|
||||
],
|
||||
"title": "Start",
|
||||
"graphCoordinates": { "x": 0, "y": 0 }
|
||||
},
|
||||
{
|
||||
"id": "cl45ojrrd00062e6g17tuu9t0",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "cl45ojrre00072e6gk91592pj",
|
||||
"type": "text",
|
||||
"groupId": "cl45ojrrd00062e6g17tuu9t0",
|
||||
"content": {
|
||||
"html": "<div>Hey there, upload please</div>",
|
||||
"richText": [
|
||||
{
|
||||
"type": "p",
|
||||
"children": [{ "text": "Hey there, upload please" }]
|
||||
}
|
||||
],
|
||||
"plainText": "Hey there, upload please"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cl45ojzs300092e6gkno525c4",
|
||||
"type": "file input",
|
||||
"groupId": "cl45ojrrd00062e6g17tuu9t0",
|
||||
"options": {
|
||||
"labels": {
|
||||
"button": "Upload",
|
||||
"placeholder": "<strong>\n Click to upload\n </strong> or drag and drop<br>\n (size limit: 10MB)"
|
||||
},
|
||||
"variableId": "vcl45ok77i000a2e6g79ye53a2",
|
||||
"isMultipleAllowed": true
|
||||
},
|
||||
"outgoingEdgeId": "cl45okfgz000d2e6g7z3wnqgq"
|
||||
}
|
||||
],
|
||||
"title": "Group #1",
|
||||
"graphCoordinates": { "x": 416, "y": 98 }
|
||||
},
|
||||
{
|
||||
"id": "cl45ok963000b2e6g2ky0wkvx",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "cl45ok963000c2e6g9snvbhw4",
|
||||
"type": "text",
|
||||
"groupId": "cl45ok963000b2e6g2ky0wkvx",
|
||||
"content": {
|
||||
"html": "<div>Thank you!</div>",
|
||||
"richText": [
|
||||
{ "type": "p", "children": [{ "text": "Thank you!" }] }
|
||||
],
|
||||
"plainText": "Thank you!"
|
||||
}
|
||||
}
|
||||
],
|
||||
"title": "Group #2",
|
||||
"graphCoordinates": { "x": 863, "y": 249 }
|
||||
}
|
||||
],
|
||||
"variables": [{ "id": "vcl45ok77i000a2e6g79ye53a2", "name": "Files" }],
|
||||
"edges": [
|
||||
{
|
||||
"id": "cl45ojxvc00082e6gw1xqnxpp",
|
||||
"to": { "groupId": "cl45ojrrd00062e6g17tuu9t0" },
|
||||
"from": {
|
||||
"blockId": "cl45ojo7y00023q1aavrwd411",
|
||||
"groupId": "cl45ojo7y00013q1aaysi2o6i"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cl45okfgz000d2e6g7z3wnqgq",
|
||||
"to": { "groupId": "cl45ok963000b2e6g2ky0wkvx" },
|
||||
"from": {
|
||||
"blockId": "cl45ojzs300092e6gkno525c4",
|
||||
"groupId": "cl45ojrrd00062e6g17tuu9t0"
|
||||
}
|
||||
}
|
||||
],
|
||||
"theme": {
|
||||
"chat": {
|
||||
"inputs": {
|
||||
"color": "#303235",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"placeholderColor": "#9095A0"
|
||||
},
|
||||
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
|
||||
"hostAvatar": {
|
||||
"url": "https://avatars.githubusercontent.com/u/16015833?v=4",
|
||||
"isEnabled": true
|
||||
},
|
||||
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
|
||||
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
|
||||
},
|
||||
"general": { "font": "Open Sans", "background": { "type": "None" } }
|
||||
},
|
||||
"settings": {
|
||||
"general": {
|
||||
"isBrandingEnabled": true,
|
||||
"isInputPrefillEnabled": true,
|
||||
"isHideQueryParamsEnabled": true,
|
||||
"isNewResultOnRefreshEnabled": false
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
|
||||
},
|
||||
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
|
||||
},
|
||||
"publicId": "my-typebot-699t0qj",
|
||||
"customDomain": null,
|
||||
"workspaceId": "proWorkspace"
|
||||
}
|
||||
@ -8,7 +8,7 @@ import {
|
||||
Typebot,
|
||||
Webhook,
|
||||
} from 'models'
|
||||
import { PrismaClient, WorkspaceRole } from 'db'
|
||||
import { Plan, PrismaClient, WorkspaceRole } from 'db'
|
||||
import { readFileSync } from 'fs'
|
||||
import { encrypt } from 'utils'
|
||||
|
||||
@ -46,6 +46,7 @@ export const createUser = () =>
|
||||
create: {
|
||||
id: proWorkspaceId,
|
||||
name: 'Pro workspace',
|
||||
plan: Plan.PRO,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
39
apps/viewer/playwright/tests/fileUpload.spec.ts
Normal file
39
apps/viewer/playwright/tests/fileUpload.spec.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import test, { expect } from '@playwright/test'
|
||||
import cuid from 'cuid'
|
||||
import path from 'path'
|
||||
import { typebotViewer } from '../services/selectorUtils'
|
||||
import { importTypebotInDatabase } from '../services/database'
|
||||
|
||||
test('should work as expected', async ({ page, context }) => {
|
||||
const typebotId = cuid()
|
||||
await importTypebotInDatabase(
|
||||
path.join(__dirname, '../fixtures/typebots/fileUpload.json'),
|
||||
{ id: typebotId, publicId: `${typebotId}-public` }
|
||||
)
|
||||
await page.goto(`/${typebotId}-public`)
|
||||
await typebotViewer(page)
|
||||
.locator(`input[type="file"]`)
|
||||
.setInputFiles([
|
||||
path.join(__dirname, '../fixtures/typebots/api.json'),
|
||||
path.join(__dirname, '../fixtures/typebots/fileUpload.json'),
|
||||
path.join(__dirname, '../fixtures/typebots/hugeGroup.json'),
|
||||
])
|
||||
await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
|
||||
await typebotViewer(page).locator('text="Upload 3 files"').click()
|
||||
await expect(
|
||||
typebotViewer(page).locator(`text="3 files uploaded"`)
|
||||
).toBeVisible()
|
||||
await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
|
||||
await expect(page.locator('text="api.json"')).toHaveAttribute(
|
||||
'href',
|
||||
/.+\/api\.json/
|
||||
)
|
||||
await expect(page.locator('text="fileUpload.json"')).toHaveAttribute(
|
||||
'href',
|
||||
/.+\/fileUpload\.json/
|
||||
)
|
||||
await expect(page.locator('text="api.json"')).toHaveAttribute(
|
||||
'href',
|
||||
/.+\/api\.json/
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user