IT & Tech

서버에 올리면 onLoad, onError event 둘다 안탈때가 있음 왜그런지는?

frontend

image upload시 서버 전송 하기 전에 frontend 로직진행하는 부분

<input
        accept="image/*"
        id={`input_${type}`}
        type="file"
        className="logo_preview_input"
        onChange={e => {
          if (e.target.files && e.target.files.length >= 1) {
            const reader = new FileReader();
            const img = e.target.files[0];
            reader.readAsDataURL(img);
            reader.onload = e2 => {
              setImg(e2.target.result);
              setImgName(img.name);
            };
          }
        }}
      />
      <label htmlFor={`input_${type}`} className="btn_logo_preview">
        <Button component="span" className="btn_color4">
          Select File
        </Button>
      </label>
      <p className="file_name">{imgName}</p>

업로드된 파일을 서버전송할 때 new FormData()를 써서 이안에 image file이랑 다른 string이랑 같이넣어줌

        const bgImg = document.getElementById('input_bg').files[0];//undefined if not uploaded
        //if (!bgImg) alert('Please select a background image file to update !');
        const previewImg = document.getElementById('input_preview').files[0];//undefined if not uploaded
        //if (!previewImg) alert('Please select a preview image file to update !');
        const buttonImg = document.getElementById('input_button').files[0];
        requestBody = new FormData();
        requestBody.append('tabName', content.tabName);
        requestBody.append('tabOrder', content.tabOrder);
        requestBody.append('themeApply', content.themeApply ? 'Y' : 'N');
        if (bgImg) requestBody.append('bgImg', bgImg);
        if (previewImg) requestBody.append('previewImg', previewImg);
        if (buttonImg) requestBody.append('buttonImg', buttonImg);

전송시 header는 보통 multipart/form-data를 사용하는 것 같은데 왜인지 이렇게 보내면 에러가 났고 아예 설정안하고 보내니 정상동작하였음

//const headers = new Headers({ 'Content-Type': 'application/json' });
//const headers = new Headers({ 'Content-Type': 'multipart/form-data' });

backend

• formData로 보낸 것들도 url?q=형식으로 get으로 보낸것을 받는 것처럼 @RequestParam으로 받음
• 그 중 이미지는 org.springframework.web.multipart.MultipartFile로 받음
• 이미지외에 string으로 보낸 것들은 Map<String, Object>로 몽땅 받음
• 만약 이름은 bgImg, previewImg이렇게 맞춰서 보냈는데 실제로는 파일이 아니라 string을 보내면 null로 받아짐

@PatchMapping("tab_withImg/{tabId}")
  public Tab updateTabWithImg(@CurrentUser UserPrincipal currentUser, @PathVariable String tabId,
      @RequestParam Map<String, Object> data, @RequestParam(required = false) MultipartFile bgImg,
      @RequestParam(required = false) MultipartFile previewImg, @RequestParam(required = false) MultipartFile buttonImg)
      throws Exception {
    logger.info("#updateTab_WithImg|currentUser=" + currentUser.getProvider());
    return homeAppAdminService.updateTab(tabId, data, bgImg, previewImg, buttonImg);
  }

• multipart file을 받아서 로컬내 저장하고 처리하는 부분
• 일반적으로 File쓰는 방법으로 저장하면 에러가 나서 java.nio.file.Path/Paths 써서 처리했었던듯

import java.io.File;
import java.nio.file.Path;
import java.nio.file.Paths;
import org.springframework.web.multipart.MultipartFile;


  private String uploadFile(String type, MultipartFile multipartFile) throws Exception {
    String uploadDirStr = UPLOAD_DIR == null ? "/engn001/tomcat/8.5/servers/portal_8180/uploads" : UPLOAD_DIR;
    File uploadDir = new File(uploadDirStr);
    if (!uploadDir.exists() && !uploadDir.mkdirs())
      throw new Exception("uploadDir mkdir Fail!");
    File uploadFile = new File(uploadDirStr + "/" + multipartFile.getOriginalFilename());
    if (!uploadFile.getAbsolutePath().equals(uploadFile.getCanonicalPath()))
      throw new Exception("파일경로 및 파일명을 확인하십시오.");

    Path path = Paths.get(uploadDirStr + "/" + multipartFile.getOriginalFilename()).toAbsolutePath();
    multipartFile.transferTo(path.toFile());
    // multipartFile.transferTo(uploadFile);//file not found error
    String resultGftsUrl = uploadGfts(type, "KIC", uploadFile);
    uploadGfts(type, "AIC", uploadFile);
    uploadGfts(type, "EIC", uploadFile);
    uploadFile.delete();
    return resultGftsUrl.replaceFirst("http://kic-", "");
  }

[a tag]

<a href={questionModalSrc} download="88a2f203a144c233726b8ffcdccc9ed8.png">

• download='img.png'에서 img.png는 변경가능
• 확장자 안쓰면 알아서 다운로드시 Type에 해당하는 확장자 붙여줌,
• img.htm이런식으로 확장자 잘못 붙여도 다운로드 가능

[모든 element에 적용가능한 방법] 클릭시 임시로 a tag생성하고 클릭되도록

onClick={() => { const link = document.createElement('a');  
                link.href = \`/common/files/01. CDP Admin Operation Policy.docx\`;  
                link.target = '\_blank';//링크클릭시 새창에서 열도록, 링크여는목적 아니므로 없어도 될듯  
                link.download = '다운로드될 파일명'; 이 부분이 없으면 자동다운로드 안됨
                document.body.appendChild(link);  
                link.click();  
                document.body.removeChild(link);  
              }}

외부에 있는 자원을 다운로드

API 구현부분

• 테스트해보니 요청하는 헤더내의 content_type: application/json이지만 응답헤더의 Content-Type: application/octet-stream
  Content-Disposition: attachement; filename="RBSPOT.json"로 응답함
• 참고로 다른 요청->응답은 아래와 같았음
  • 일반적인 json Fetch/XHR request -> response
    • content-type: application/json -> Content-Type: application/json;charset=UTF-8
  • 파일을 자동으로 다운로드되도록 하는 request -> response
    • content-type: application/json -> Content-Type: application/octet-stream
      Content-Disposition: attachement; filename="RBSPOT.json"
  • 파일을 서버로 업로드하는 request -> response
    • Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCr6S7zpBWkWbkGAB ->

@Description("MetaDataFile Download from Admin.")
@GetMapping
@PreAuthorize("hasRole('ADMIN')")
@RequestMapping("/api/admin/apiCallLog/{apiCallLogId}/file")
public ResponseEntity<?> getMetaDataFile(@CurrentUser UserPrincipal currentUser,
    @PathVariable Long apiCallLogId) {

  Map<String, Object> resultMap = new HashMap<String, Object>();
  URL url = new URL(...어찌어찌해서 얻어옴);
  InputStreamResource resource = new InputStreamResource(url.openStream());
  resultMap.put("fileName", apiCallInfo.getFileName());
  resultMap.put("resource", resource);

  return ResponseEntity.ok().contentType(MediaType.parseMediaType("application/octet-stream"))
      .header(HttpHeaders.CONTENT_DISPOSITION,
          "attachement; filename=\"" + resultMap.get("fileName") + "\"")
      .body(resultMap.get("resource"));
}

구현된 API call하는 부분

export async function getFileDownload(requestPath, requestMethod, rowData) {
  await fetch(API_BASE_URL + requestPath, {
    method: 'GET',
    headers: getHeaders(),
  })
    .then(response => {
      return response.blob();
    })
    .then(blob => {
      const url = window.URL.createObjectURL(
        new Blob([blob]),
      );
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute(
        'download',
        rowData.fileName,
      );//filename to be downloaded, it can be used as link.download=fileName
      //link.style='display:none'; //OK it is not given
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    })
    .catch(err => {
      alert('error')
    });
}

서버 내부 자원(public공간내 file) 다운로드

<button
                  type="button"
                  className="quick_link link1"
                  onClick={() => {
                    const link = document.createElement('a');
                    link.href = `/common/files/01. CDP Admin Operation Policy_(ENG)20210428.docx`;
                    link.target = '_blank';
                    link.download = '01. CDP Admin Operation Policy_(ENG)20210428.docx';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                  }}>

서버응답을 받아 파일을 내려주거나 내부소스 파일을 내려주거나 다운로드 하는 부분의 공통점

const link = document.createElement('a');
link.href = `/common/files/01. CDP Admin Operation Policy_(ENG)20210428.docx`;//여기에서 차이남
//link.target = '_blank'; //없어도됨
link.download = '01. CDP Admin Operation Policy_(ENG)20210428.docx'; //link.setAttribute('download', 파일명)과 동일
document.body.appendChild(link);
link.click();
document.body.removeChild(link);//link.remove(); link.parentNode.removeChild(link);와 동일

서버응답을 받아 파일생성하는 부분

new Blob([arrayContetns], options) options는 생략가능

new Blob([response], {type" res.headers[content-type]})

Blob을 URL로 변환

window.URL.createObjectURL(blob)

URL.revokeObjectURL( window.URL.createObjectURL(blob) ) 여기서 window.URL=URL인듯

import useMediaQuery from '@material-ui/core/useMediaQuery';
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

an XML-based markup language for describing two-dimensional based vector graphics

https://marketing.istockphoto.com/blog/aspect-ratio/

Here are some common digital image sizes and their corresponding aspect ratios.

• 1080 x 1080 pixels = 1:1 aspect ratio
• 1080 x 720 pixels = 3:2 aspect ratio
• 1024 x 768 pixels = 4:3 aspect ratio
• 1920 x 1080 pixels = 16:9 aspect ratio

<input> width:0으로 해도 변화가 없음 -> <input>의 기본 display:inline이라서 그런줄 알았으나 display:block이었음 -> input의 부모가 display:flex이고 선택된 tab들을 flex형태로 보여주는 데 이 경우 뭔가 제약이 있는 것 같음

TextField

Select

Autocomplete

Input

OutlinedInput

Autocomplete 개념정리

• options: input화면 클릭하여 나오는, 선택가능한 dropdown list들에 보여주기 위한 array
• value: options중에서 선택된 값, multiple일 경우에는 array가 됨
• tag: 선택된 value가 input란에 이미 선택되었음을 보여주는 것...? multiple일 때 의미가 있을 듯

import Autocomplete from '@material-ui/lab/Autocomplete';//mui 4.x버젼에는 lab에포함됨
import Autocomplete from '@mui/material/Autocomplete';//mui 5.x버젼이후에는 정식포함됨

<Autocomplete
    multiple
    open={open}//항상 false로 하면  생략된 tags는 펼쳐지고 dropdownOptionMenu나오는것만 방지할 수 있음,
    disabled={disabled}
    limitTags={1}//limit the number of displayed options when not focused
    id="searchAndMultiSelect"
    options={this.props.options||[]}//display될 option array
    value={this.props.value}//option중에 선택된 value
    disableCloseOnSelect//option에 focus가는동안은 선택했더라도 close하지않고 계속option노출하기
    onChange={(e,v)=>{this.props.onChange(e,v,this.props.selectType);}}//select할때마다 호출됨, dropdownOption에서 클릭안하고 선택된 tab의 X(delete)버튼이나 전체 X(delete)버튼 클릭시에도 호출됨
    getOptionLabel={(option) => this.props.getOptionLabel(option, this.props.selectType)}//option array에서 노출할 속성지정, renderOption주더라도 없으면에러남
    getOptionDisabled={(option) => this.props.getOptionDisabled(option)}//어떤 option을 선택못하게 할 것인지
    noOptionsText={intl.formatMessage({id: noOptionsText})}//장치가 존재하지 않습니다
    getOptionSelected={(option, value) => option.id ? option.id === value.id : option===value}//option에서 value를 뽑아내어 selected:true/false를 결정할 때 어떤 기준으로 결정할지
    renderInput={(params) =>
        <TextField
            className={classes.textField}
            { ...params }
            //placeholder={isEmpty(value) ? intl.formatMessage({id: placeholder}) : undefined}
            onFocus={() => this.handleFocus()}
            onBlur={() => this.handleBlur()}
            label={this.props.selectType&&intl.formatMessage({id: this.props.selectType})}
        />
    }
    renderOption={(option, {selected}) => {
        //2nd argument is {selected:true/false, inputValue:''}
        return this.props.renderOption(option, {selected}, this.props.selectType);
    }}
    //renderTags={(tagValue, getTagProps) =>tagValue.map((option, index) => (//Input에 선택된 tag를 보여주는 형태결정
    //         <Chip key={index} label={option.name||option.deviceGroupName}
	//             {...getTagProps({ index })} disabled={disabled} />// Set disable explicitly after getTagProps
    //filterOptions={fieldTypeList => fieldTypeList.filter(opt => opt.fieldType)}//option에서 filter된것만 노출함, 모두filtering해도 noOptions항목노출됨
    //onOpen = {()=>{}}//selector click해서 열렸을때 동작정의
    //readOnly //작동안함, 4.x버전에서는 안되는듯
    
/>