display chosen file path in form as text instead of readonly input. (#417)

Author: Meriem-BenIsmail

packages/base/src/formbuilder/objectform/fileselectorwidget.tsx

@@ -113,18 +113,13 @@ export const FileSelectorWidget = (props: any) => {
 
   return (
     <div>
-      <div>
-        <input
-          type="text"
-          className="jp-mod-styled"
-          value={serverFilePath || ''}
-          readOnly
-          style={{ width: '70%', marginRight: '10px' }}
-        />
+      <div className="file-container">
         <button className="jp-mod-styled" onClick={handleBrowseServerFiles}>
           Browse Server Files
         </button>
+        <p>{serverFilePath || ''}</p>
       </div>
+
       <div>
         <h3 className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem">
           Or enter external URL

python/jupytergis_lab/style/base.css

@@ -732,3 +732,11 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
 .jgis-identify-grid-body:last-of-type strong:last-of-type {
   padding-bottom: 8px;
 }
+
+/* Style the file path text */
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 10px;
+}