Make it possible to adjust transformedFile object shape in ImageInput, FileInput

Đang mở
  • Có gì không ổn?
#10,757 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách đọc các entry point ImageInput và FileInput, tập trung vào cách các đối tượng transformedFile được tạo và cách afterRead, parse và format tương tác trong quá trình lưu. Tái hiện ví dụ với các trường src và title tùy chỉnh, sau đó xác minh rằng một phép biến đổi có thể cấu hình vẫn giữ nguyên cấu trúc tùy chỉnh cho cả tệp đơn lẻ và nhiều tệp, đồng thời vẫn chính xác sau khi lưu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

RFC

Is your feature request related to a problem? Please describe.
My api uses a different attribute names for file url (src) and title.
I tried to use afterRead lifecyclecallback, but it did not worked all the time (after save it used the original object)
I introduced new attributes to my api, but i don't find it ideal
I create a local version of transformFiles which did the trick, but multiple is used as an inside variable, the code look and feel was not nice anymore

Describe the solution you'd like
It would be nice, if we could adjust the shape of the transformedFile with a callback function, than it could be lined up easily with api, and would be even easy to add more variables to it.

const transform = (file, preview) =>{
    return {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };
  }

  // turn a browser dropped file structure into expected structure
  const transformFile = file => {
    if (!(file instanceof File)) {
      return file;
    }

    const preview = URL.createObjectURL(file);
    const transformedFile = transform(file, preview);

    return transformedFile;
  };

  const transformFiles = (files: any[]) => {
    if (!files) {
      return multiple ? [] : null;
    }

    if (Array.isArray(files)) {
      return files.map(transformFile);
    }

    return transformFile(files);
  };

Describe alternatives you've considered
Maybe if afterRead would be fixed, that could give a nice solution as well.

Additional context
My solution now:

const ConfigWatermarkForm = () => {

  const multiple = false;

  // turn a browser dropped file structure into expected structure
  const transformFile = file => {
    if (!(file instanceof File)) {
      return file;
    }

    const preview = URL.createObjectURL(file);
    const transformedFile = {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };

    return transformedFile;
  };

  const transformFiles = (files: any[]) => {
    if (!files) {
      return multiple ? [] : null;
    }

    if (Array.isArray(files)) {
      return files.map(transformFile);
    }

    return transformFile(files);
  };

  return (
    <SimpleForm>
      <TextInput source="name"/>
      <DateInput source="activeFrom"/>
      <DateInput source="activeTo"/>
      <ReferenceArrayInput
        reference={ResourceNameEnum.ConfigWatermarkAlloweds}
        source="allowed"
      />
      <ImageInput source="topConfigWatermarkMediaObject" parse={transformFiles} format={transformFiles}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
      <ImageInput source="bottomConfigWatermarkMediaObject" parse={transformFiles} format={transformFiles}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
    </SimpleForm>
  );
};

export default ConfigWatermarkForm;

Preferred solution would be:

const ConfigWatermarkForm = () => {

  const transform = (file, preview) =>{
    return {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };
  }
  
  return (
    <SimpleForm>
      <TextInput source="name"/>
      <DateInput source="activeFrom"/>
      <DateInput source="activeTo"/>
      <ReferenceArrayInput
        reference={ResourceNameEnum.ConfigWatermarkAlloweds}
        source="allowed"
      />
      <ImageInput source="topConfigWatermarkMediaObject" transform={transform}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
      <ImageInput source="bottomConfigWatermarkMediaObject" transform={transform}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
    </SimpleForm>
  );
};

export default ConfigWatermarkForm;
Ngôn ngữ chính
TypeScript
Star
27k
Fork
5.5k
Merge trung bình
1 ngày 3 phút
Pull request đã merge (30 ngày)
32

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của marmelab/react-admin

Tất cả issue của marmelab/react-admin

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.