[PR #1488] [MERGED] [Feat: formData] Add chips to indicate chosen files in formData #3348

New issue

Closed

opened 2026-03-17 00:58:15 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:58:15 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1488
Author: @nelsontky
Created: 2/15/2021
Status: ✅ Merged
Merged: 2/17/2021
Merged by: @liyasthomas

Base: feat/formData ← Head: feat/formData

📝 Commits (10+)

c2ba30f Add file chip to denote file input
efe29f9 Remove console.log
41e88b6 Merge conflict
f3f3d34 refactor(ui): matching styles
f09c216 refactor(ui): matching styles
81e5ed5 fix(ui): mobile responsiveness
67c5720 fix(ui): mobile responsiveness
27f8f90 refactor: minor cleanup
a02f07d Remove file from any form of persistence
6be748a Add warning that form data files will not be saved to local storage

📊 Changes

5 files changed (+102 additions, -10 deletions)

View changed files

📝 components/http/http-body-parameters.vue (+46 -6)
➕ components/ui/deletable-chip.vue (+32 -0)
📝 pages/index.vue (+9 -3)
📝 plugins/vuex-persist.js (+3 -1)
📝 store/mutations.js (+12 -0)

📄 Description

Per the image above, chips have been added to denote the files that have been chosen. This feature is still currently incomplete.

Todo:

Pressing close button on chip will lead to removal of file
Set max width of request body value field when file names are too long
Check preservation of responsive design
~~Make sure Vuex persist works with File objects~~
File objects cannot be recreated, and this thus means that we will not be able to restore a user's files in a request after a reload. FormData file fields also will not be able to be synced/exported. Thus, we should exclude file fields from vuex and store them instead in a component's state.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/1488 **Author:** [@nelsontky](https://github.com/nelsontky) **Created:** 2/15/2021 **Status:** ✅ Merged **Merged:** 2/17/2021 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `feat/formData` ← **Head:** `feat/formData` --- ### 📝 Commits (10+) - [`c2ba30f`](https://github.com/hoppscotch/hoppscotch/commit/c2ba30f610465ed7e82527815448864ecb406fdf) Add file chip to denote file input - [`efe29f9`](https://github.com/hoppscotch/hoppscotch/commit/efe29f90f2fb0b88899aa603fd24d0e94d8002dc) Remove console.log - [`41e88b6`](https://github.com/hoppscotch/hoppscotch/commit/41e88b6680ec97f2f662bc0b0e2a47ea45d5685f) Merge conflict - [`f3f3d34`](https://github.com/hoppscotch/hoppscotch/commit/f3f3d34f8f38059ee686ac5a568fa67e2c82423c) refactor(ui): matching styles - [`f09c216`](https://github.com/hoppscotch/hoppscotch/commit/f09c216679d5d0b8ecafd00c6457b113f8c18cd0) refactor(ui): matching styles - [`81e5ed5`](https://github.com/hoppscotch/hoppscotch/commit/81e5ed505bb69e49a93f156d0f2a4fa4c8a2b62a) fix(ui): mobile responsiveness - [`67c5720`](https://github.com/hoppscotch/hoppscotch/commit/67c5720079ee0099b88f5cf522cb3e7de1895dea) fix(ui): mobile responsiveness - [`27f8f90`](https://github.com/hoppscotch/hoppscotch/commit/27f8f90f458cce605f45739023fc9133bdd0a8db) refactor: minor cleanup - [`a02f07d`](https://github.com/hoppscotch/hoppscotch/commit/a02f07d16a39c9ed756fc010e805a871fab81907) Remove file from any form of persistence - [`6be748a`](https://github.com/hoppscotch/hoppscotch/commit/6be748a4b7b12796bceddca64066bf174bbd5c5b) Add warning that form data files will not be saved to local storage ### 📊 Changes **5 files changed** (+102 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `components/http/http-body-parameters.vue` (+46 -6) ➕ `components/ui/deletable-chip.vue` (+32 -0) 📝 `pages/index.vue` (+9 -3) 📝 `plugins/vuex-persist.js` (+3 -1) 📝 `store/mutations.js` (+12 -0) </details> ### 📄 Description ![image](https://user-images.githubusercontent.com/7272103/107982850-ba6d4900-6fff-11eb-8ed0-e604d21ddeb5.png) Per the image above, chips have been added to denote the files that have been chosen. This feature is still currently incomplete. Todo: - [x] Pressing close button on chip will lead to removal of file - [x] Set max width of request body value field when file names are too long - [x] Check preservation of responsive design - [x] ~~Make sure Vuex persist works with `File` objects~~ File objects cannot be recreated, and this thus means that we will not be able to restore a user's files in a request after a reload. FormData file fields also will not be able to be synced/exported. Thus, we should exclude file fields from vuex and store them instead in a component's state. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>