Upload a CSV - Upload your File
- Dominant language
- TypeScript
- Stars
- 117
- Forks
- 51
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 4
Description
## ACs
- The first section of the page should be called "Upload your File."
- Note: The Figma may seem like this section is on its own page - it is NOT. The entire new "Upload a CSV" experience should be on ONE PAGE with a scroll bar available for the whole page.
- Underneath the "Upload your File" parent section title, the user should see the following text: "You can upload a standard CSV or a Flux annotated CSV. Browser upload limits apply (typically 4GB)."
- The first sub-section within the "Upload your File" parent section should be "Example CSVs" organized by type via tab options (see Figma)
- The first tab option on the left should be "Standard CSV" while the option on the right should be "Annotated CSV"
- If the user clicks on the "Annotated CSV" tab option, the following text should display below the tabs: "For more detailed information, check out the [Annotated CSV Documentation](https://docs.influxdata.com/influxdb/cloud/reference/syntax/annotated-csv/#annotated-csv-in-flux)"
- If the user clicks on the "Standard CSV" tab option, the following text should display below the tabs: "Your CSV file should contain one header row with column names, and row values separated by commas."
- Directly below that text, display examples of either annotated or standard .csv file formats so that visual learners can quickly understand the differences and what's expected. The example that displays will depend on the tab option that the user chooses. (see Figma)
- The second sub-section of the "Upload your File" parent section should be "Select bucket"
- Display the same "Select bucket" component that's used in the firstMile/Onboarding wizards. Use the select bucket component as is, with no changes.
- The third and final sub-section of the "Upload your File" parent section should be "Add your file"
- Display a modified version of the drag-and-drop/click to upload .csv component. Summary of changes here:
- Modify the drag and drop zone so that the component does not send the data automatically to InfluxDB.
- Remove the buttons from the drag-and-drop component (See uploaded data & upload more data)
- Drag and drop component should just serve the purpose of allowing the user to preview their file NOT write it to the DB. Writing the data will be a separate step triggered by the "Finish Upload" button at the bottom of the screen.
- Drag and drop component will also no longer be the place to display write errors.
- Ability to remove the file that they dragged and dropped (option to clear the drop zone via an "x" next to the file name in the drop zone)
- Error Handling - Display errors in the standard upper right-hand corner of the screen.
- Ensure the file meets basic requirements such as file size and # of rows.
- Throw an error if the user is missing data. For example, make sure that every row has the same number of commas. If low effort, tell the user which line in which they are missing data.
- Must be a comma-delimited file
## Implementation
- "I don't think we have a file size limit in code, but browsers limit how big of a file you can upload. Firefox is 2GB, chrome is 4GB...maybe they're all 4GB these days?" - Bucky
- Looks like its configurable by environment via the feature flag:
- # 27 * 1024 * 1024 = 28311552 --> 27 MiB is the current limit for UI CSV parsing
- name: UI CSV byte limit Schema Browser
- description: Controls the CSV byte limit for CSVs streamed from the API for Schema Browser
- contact: QX Team, Ariel
- key: increaseCsvLimit
- default: 28311552
- lifetime: Permanent
- expose: true
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.