fix: proposed input file

src/form/File.stories.tsx

@@ -1,27 +1,75 @@
 // Base
-import React from 'react';
+import React, { useState } from 'react';
 import './Form.stories.scss';
 
 // Addons
 import { withA11y } from '@storybook/addon-a11y';
+import { InputFile } from '.';
 
 // Configuración general del componente
 export default {
   title: 'Formulario|Archivo',
   decorators: [withA11y]
 };
 
-export const SubirUnArchivo = (): JSX.Element => {
+export const LoadFile = (): JSX.Element => {
+  const [files, setFiles] = useState<File[]>([]);
+
   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>
+    <div className="form-wrapper-lg">
+      <InputFile
+        title="Arrastrá tus archivos acá o hace click para adjuntar"
+        isMultiple={false}
+        files={files}
+        setFiles={setFiles}
+      />
     </div>
   );
 };
 
-SubirUnArchivo.story = {
+LoadFile.story = {
   name: 'Subir un archivo'
 };
+
+export const LoadFileMulti = (): JSX.Element => {
+  const [files, setFiles] = useState<File[]>([]);
+
+  return (
+    <div className="form-wrapper-lg">
+      <InputFile
+        title="Arrastrá tus archivos acá o hace click para adjuntar"
+        isMultiple={true}
+        files={files}
+        setFiles={setFiles}
+      />
+    </div>
+  );
+};
+
+LoadFileMulti.story = {
+  name: 'Subir un archivo multiple'
+};
+
+export const Example = (): JSX.Element => {
+  const contenidoUno = 'Este es el contenido del archivo.';
+  const contenidoDos = 'Este es el contenido del archivo dos.';
+  const [files, setFiles] = useState<File[]>([
+    new File([contenidoUno], 'archivo1.txt', { type: 'text/plain' }),
+    new File([contenidoDos], 'archivo2.txt', { type: 'text/plain' })
+  ]);
+
+  return (
+    <div className="form-wrapper-lg">
+      <InputFile
+        title="Arrastrá tus archivos acá o hace click para adjuntar"
+        isMultiple={true}
+        files={files}
+        setFiles={setFiles}
+      />
+    </div>
+  );
+};
+
+Example.story = {
+  name: 'Archivo cargado'
+};

src/form/Form.stories.scss

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

src/form/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+
+export interface InputProps {
+  title?: string;
+  isMultiple?: boolean;
+  files: File[];
+  setFiles: (value: File[] | ((prevFiles: File[]) => File[])) => void;
+}
+
+interface FileItemProps {
+  file: File;
+  onRemove: () => void;
+}
+
+const FileItem: React.FC<FileItemProps> = ({ file, onRemove }) => {
+  const fileName = file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name;
+
+  return (
+    <div className="file-item">
+      <label className="file-name">
+        <div className="file-box">
+          <i className="bx bx-file"></i>
+          {fileName}
+        </div>
+      </label>
+      <div>
+        <button type="button" className="btn btn-outline-danger btn-sm" onClick={onRemove}>
+          Eliminar
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const InputFile: React.FC<InputProps> = (props) => {
+  const { title = 'Arrastrá tus archivos acá o hace click para adjuntar', isMultiple = false, files, setFiles } = props;
+
+  const [inputKey, setInputKey] = useState<number>(0);
+
+  useEffect(() => {
+    setInputKey(inputKey + 1);
+  }, [files]);
+
+  const handleAddFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = e.target.files;
+    if (fileList) {
+      const newFiles = Array.from(fileList);
+      setFiles((prevFiles: File[]) => {
+        const updatedFiles = newFiles.map((file: File) => file);
+        return isMultiple ? [...prevFiles, ...updatedFiles] : updatedFiles;
+      });
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setFiles((prevFiles: File[]) => prevFiles.filter((_, i) => i !== index));
+    setInputKey((prevKey) => prevKey + 1);
+  };
+
+  return (
+    <>
+      <div className="file-group">
+        <label htmlFor="file-input" className="input-file-title">
+          <input
+            key={inputKey}
+            type="file"
+            className="form-control-file custom-file"
+            id="file-input"
+            onChange={handleAddFiles}
+            multiple={isMultiple}
+          />
+          <span className="main-file">
+            <i className="bx bx-cloud-upload"></i>
+            {title}
+          </span>
+        </label>
+      </div>
+      {Boolean(files.length) && (
+        <div key={inputKey} className={`filename-detail${isMultiple ? ' multiple' : ''}`}>
+          {files.map((file: File, index: number) => (
+            <FileItem
+              key={`${file.lastModified}-${Math.floor(Math.random() * 1000000)}`}
+              file={file}
+              onRemove={() => handleRemoveFile(index)}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

src/scss/components/_button.scss

@@ -223,6 +223,16 @@ a.btn {
       }
     }
   }
+
+  //Botón con spinner
+   &:focus, &.focus, &:hover, &.hover, &:active, &.active {
+    &:is(.btn-outline-secondary, .btn-outline-success, .btn-outline-danger) {
+      .spinner-border {
+        border-color: $white;
+        border-right-color: $grisulado-300;
+      }
+    }
+  }
 }
 
 //

src/scss/components/_form.scss

@@ -122,6 +122,104 @@ $form-validation-states: (
   }
 }
 
+.file-group {
+  position: relative;
+  width: 100%;
+  min-height: 120px;
+  text-align: center;
+  border-radius: $border-radius-lg;
+
+  .input-file-title {
+    width: 100%;
+    padding: 0rem 0.5rem 0 0.5rem;
+
+    input[type='file'] {
+      width: 100%;
+      height: 100%;
+      color: transparent;
+      cursor: pointer;
+    }
+
+    input::file-selector-button {
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .custom-file {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      z-index: 99;
+      opacity: 1;
+      outline: none;
+
+      &:focus {
+        box-shadow: $input-focus-box-shadow;
+        border-radius: $border-radius-lg;
+      }
+    }
+
+    .main-file {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      color: $blue;
+      display: flex;
+      flex-direction: column;
+      padding: 0 0.5rem;
+      border-style: dashed;
+      border-width: 2px;
+      border-color: $grisulado-100;
+      border-radius: $border-radius-lg;
+      background: $grisulado-10;
+      transition: 0.2s ease-in-out;
+
+      &:hover {
+        background: white;
+        transition: 0.2s ease-in-out;
+      }
+
+      .bx,
+      .material-symbols-rounded {
+        font-size: 2.5rem;
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}
+
+.filename-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+
+  .file-item {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    color: $blue;
+    margin-bottom: 0.5rem;
+
+    .file-box {
+      align-items: center;
+      display: flex;
+      .bx,
+      .material-symbols-rounded {
+        font-size: 2rem;
+        margin-right: 0.75rem;
+        color: $grisulado-900;
+      }
+    }
+  }
+  &.multiple {
+    display: block;
+  }
+}
+
 .custom-control-label {
   padding: spaceUnits(1);
   padding-left: $custom-control-indicator-size + spaceUnits(5);
@@ -250,7 +348,7 @@ $form-validation-states: (
     }
     &:checked {
       ~ .custom-control-label::before {
-        border-color:$custom-control-indicator-checked-color;
+        border-color: $custom-control-indicator-checked-color;
       }
     }
   }

src/scss/components/_list-group.scss

@@ -61,7 +61,6 @@ a.list-group-item {
   padding: $list-group-padding;
   display: flex;
   backface-visibility: hidden;
-
   @include media-breakpoint-down(xs) {
     padding: $list-group-padding-mobile;
   }
@@ -100,7 +99,6 @@ a.list-group-item {
   &:last-child {
     margin-bottom: 0px;
     border-radius: $list-group-border;
-
     &:is(.card-item) {
       border-radius: $border-radius-card-item;
     }
@@ -353,7 +351,6 @@ a.list-group-item {
             box-shadow: $box-shadow-access-focus;
           }
         }
-
         .title-option {
           padding: $padding-title-option;
           @extend .h5;