파일 업로드 기능 사용 시, 업로드 상태 표기 문의

기능 제안 및 건의
1

안녕하세요. 파일 업로드 기능을 최근에 개선해 주셔서 정말 잘 사용하고 있습니다.
빠른 개선에 감사드립니다.

현상

  1. 파일을 선택 후, http 통신이 이뤄지는 동안 ‘저장’ 버튼을 누를 수 있어, http 응답을 저장하지 못하는 경우가 있습니다.

  2. 업로드 파일이 크면 클수록 해당 현상이 더욱 잦게 나타납니다.

image
image407×281 29.7 KB

제안

  1. 파일 선택 후, 업로드가 시작되면 ‘저장(체크)’ 버튼이 임시로 ‘로딩(circle progressbar)’ 상태로 변경되면 어떨까요?

  2. ‘로딩’ 상태에서는 저장이 불가토록 하면 어떨까요?

저희 어드민을 사용하시는 대부분의 사용자가 비개발자이다 보니, 이미지 업로드에 실패하는 경우가 종종 있는 상황입니다.

한 번 검토해 주시면 대단히 감사드리겠습니다 : )

사용 중 설정

columns:
  imageUrl: 
    format: image
    httpOptions:
      url: ....
      method: post
      headers:
        Content-Type: multipart/form-data
      name: file
      usePath: "imageUrl"
    updateOptions:
      type: query
      resource: ***
      sql: UPDATE ...
      log: true
2

안녕하세요. 좋은 제안주셔서 감사합니다. 해당 내용 내부에 리포트하였습니다. 관련 기능이 반영되는 경우 안내드리겠습니다!

1개의 좋아요
3

@null37 안녕하세요. inline update 시 saving(disabled) 처리 적용되었습니다. 추가로 궁금하신점이나 도움 필요하시면 말씀해주세요. 감사합니다!

1개의 좋아요
4

@hbkim

답변 감사드립니다. 다만, 파일 업로드를 사용했을 때 before/after가 동일한 상태인데, 혹시 특정 columns 속성을 추가해야 할까요?

재현 경로

  1. 높은 해상도 이미지 준비
  2. 파일 선택 및 업로드

image

여전히 checkbox가 활성화되어 있어 재차 문의드립니다.

1개의 좋아요
5

@null37 안녕하세요. 확인 감사합니다. 별도로 추가하실건 없습니다!

아래 예제 참고해서 다시 확인해주실 수 있을까요? 해당 예제로도 동일한 상황이거나, 예제와 다른 형태로 작업중이시라면 코드 부탁드리겠습니다. 감사합니다.

menus:
- path: pages/Mf20ET
  name: inline update
  
pages:
- path: pages/Mf20ET
  title: 제목
  subtitle: 내용
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT * FROM stores LIMIT 3
    columns:
      name:
        updateOptions:
          # submitButton:
          #   label: 저장
          # cancelButton:
          #   label: 취소
          type: http
          axios:
            url: https://httpbin.selectfromuser.com/status/500
            # url: https://httpbin.selectfromuser.com/delay/2
            method: POST
          toast: 저장했습니다.
1개의 좋아요
6

@hbkim

답변 감사드립니다!
다만 아직 재현이 되고 있어 전체 코드 전달드립니다.

재현 경로

  1. imageUrl 컬럼 클릭
    image

  2. ‘파일 선택’ 클릭 > Finder 오픈 > 파일 선택

  3. 2번에서 파일 선택 후, ‘열기’ 클릭 시 http 요청이 처리 중임에도 저장 버튼이 활성화 되어 있는 상황
    image

pages:
- path: store/magazine
  blocks:
  - type: query
    resource: ***
    sqlType: select
    sql: > 
      SELECT id, imageUrl FROM content
    columns: 
      imageUrl:
        format: image
        httpOptions:
          url: https://api.***.co.kr/api/cloudflare/image/single
          method: post
          headers:
            Content-Type: multipart/form-data
          name: file
          usePath: "imageUrl"
        updateOptions:
          type: query
          resource: onthelook.prd
          sql: UPDATE content SET imageUrl = :value WHERE id = :id
          log: true
1개의 좋아요
7

@null37 추가로 말씀주셔서 감사합니다.

파일 업로드 관련 부분 추가로 패치하였습니다. 아직 로딩 표시가 안뜨고 있다면 말씀해주세요. 감사합니다!

1개의 좋아요
8

@hbkim

잘 수정된 것 확인하였습니다! 매우 직관적이고 좋습니다!!
작업하시느라 고생 많으셨습니다. 감사합니다 : )

1개의 좋아요