fix: proposed input file

src/form/File.stories.tsx

@@ -1,5 +1,5 @@
 // Base
-import React from 'react';
+import React, { useState } from 'react';
 import './Form.stories.scss';
 
 // Addons
@@ -11,13 +11,56 @@ export default {
   decorators: [withA11y]
 };
 
-export const SubirUnArchivo = (): JSX.Element => {
+interface SubirUnArchivoProps {
+  label: string;
+  onFileSelect: (file: File) => void;
+}
+
+export const SubirUnArchivo = ({ label, onFileSelect }: SubirUnArchivoProps): JSX.Element => {
+  const [file, setFile] = useState<File | null>(null);
+  const [inputKey, setInputKey] = useState<number>(0);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setFile(file);
+      onFileSelect(file);
+    }
+  };
+
+  const handleDeleteFile = () => {
+    setFile(null);
+    setInputKey((prevKey) => prevKey + 1); // Incrementa el key para renderizar un nuevo input
+  };
+
+  label = 'Arrastrá tus archivos acá o hace click para adjuntar';
+
   return (
-    <div className="form-wrapper">
-      <div className="form-group">
-        <label htmlFor="file-input">Adjuntar un archivo de ejemplo</label>
-        <input type="file" className="form-control-file" id="file-input" />
+    <div className="form-wrapper-lg">
+      <div className="file-group bg-light">
+        <i className="bx bx-cloud-upload"></i>
+        <label htmlFor="file-input" className="label">
+          {label}
+        </label>
+        <input
+          key={inputKey} // Añade un key único para que React cree un nuevo input
+          type="file"
+          className="form-control-file bg-light custom-file"
+          id="file-input"
+          onChange={handleFileUpload}
+        />
       </div>
+      {file && (
+        <div className="filename-container">
+          <label>
+            <i className="bx bx-file"></i>
+            {file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}
+          </label>
+          <button type="button" className="btn btn-outline-danger btn-sm" onClick={handleDeleteFile}>
+            Eliminar
+          </button>
+        </div>
+      )}
     </div>
   );
 };

src/form/Form.stories.scss

@@ -1,3 +1,8 @@
 .form-wrapper {
   width: 400px;
 }
+
+.form-wrapper-lg {
+  max-width: 600px;
+  width: 100%;
+}

src/scss/components/_form.scss

@@ -122,6 +122,70 @@ $form-validation-states: (
   }
 }
 
+.file-group {
+  position: relative;
+  min-height: 120px;
+  width: 100%;
+  color: $blue;
+  border-style: dashed;
+  border-width: 2px;
+  border-color: $grisulado-100;
+
+  i, span{
+    position: absolute;
+    top: 42%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2.5rem;
+
+    @media (max-width: 460px) {
+      top: 33%;
+    }
+  }
+
+  .label {
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: 100%;
+    padding: 0 0.5rem;
+  }
+
+  .custom-file {
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+  }
+}
+
+.filename-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.25rem;
+
+  label {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    color: $blue;
+    margin-bottom: 0px;
+
+    i,span {
+      font-size: 2rem;
+      margin-right: 5px;
+      color: $grisulado-900;
+    }
+  }
+}
+
+
 .custom-control-label {
   padding: spaceUnits(1);
   padding-left: $custom-control-indicator-size + spaceUnits(5);