Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Feature Request]: Add Event Parameter to Distinguish Adding / Removing Files from File Upload component

Abierto
  • ¿Algo no está bien?
#2,018 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Start at the FileUpload component's onChange prop and inspect how its event is produced when files are added or removed. Determine how the event can distinguish those actions, then check the component's existing tests for the expected behavior. Done means consumers can tell whether an onChange resulted from adding or removing files.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement
Description

Hello,

When we add or remove files from the file upload component, the event that is passed in to the onChange prop is as follows:

cancelBubble : boolean,
cancelable : boolean,
defaultPrevented : boolean
detail: {value: Array(File)}

However, when uploading or remove files (by hitting on the X on one of the files), the event cannot tell them apart, therefore when trying to implement logic to prevent the use from uploading duplicated files, it is impossible to know whether they are uploading or removing.

This is how I am trying to add logic to the file upload, using react-hook-form

<Controller
                  name={formField.key as Path<TData>}
                  control={props.reactHookForm.control}
                  key={formField.key as string}
                  render={({ field, fieldState }) => (
                    <FormField
                      label={formField.label}
                      errorText={fieldState.error?.message}
                    >
                      <FileUpload
                        onChange={(e) => {                            
                          console.log(e);
                          let filesToUpload = e.detail.value; 
                          let skipFileCheck = false;                          
                          // check to make sure the file is allowed
                          if (formField.allowedTypes.includes(DocumentType.ANY))
                          {
                            skipFileCheck = true;
                          }
                          if (!skipFileCheck)
                          {
                            filesToUpload.forEach((file: File) => {                            
                            if (!formField.allowedTypes.includes(file.type as DocumentType)) {
                              // remove the file from the list
                              filesToUpload = filesToUpload.filter((f) => f !== file);                              
                            }                                                          
                            });  
                          }
                          
                          // remove any files that already exist in the field
                          if (field.value)
                          {
                            field.value.forEach((file: File) => {                            
                            filesToUpload = filesToUpload.filter((f) => f !== file);
                            });                            
                          }
                          
                          
                          field.onChange(filesToUpload);
                        }}
                        value={field.value ? field.value : []}
                        i18nStrings={{
                          uploadButtonText: e =>
                            e ? "Choose files" : "Choose file",
                          dropzoneText: e =>
                            e
                              ? "Drop files to upload"
                              : "Drop file to upload",
                          removeFileAriaLabel: e =>
                            `Remove file ${e + 1}`,
                          limitShowFewer: "Show fewer files",
                          limitShowMore: "Show more files",
                          errorIconAriaLabel: "Error"
                        }}
                        showFileLastModified
                        showFileSize        
                        multiple
                        showFileThumbnail
                        tokenLimit={3}
                        constraintText="Hint text for file requirements"
                      />
                    </FormField>
                  )}
                />
Code of Conduct
Lenguaje dominante
TypeScript
Estrellas
2.7k
Forks
248
Merge medio
3 d 14 h
PR fusionados (30 d)
83

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de cloudscape-design/components

Todos los issues de cloudscape-design/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.