React-dnd: canDrop 메소드에서 파일 드래그에 대한 정보를 얻으려면 어떻게 해야 합니까?

소스에서 끌기를 허용하지 않거나 유형에 따라 대상에서 허용되지 않음을 표시하도록 하시겠습니까?

1. 드래그를 허용하지 않으려면 Source의 canDrag false 를 반환해야 합니다.
2. 드롭을 허용하지 않으려면 Target에서 types 를 사용하여 제어해야 합니다.

@theTechie 아니요, 현재 끌고 있는 파일 확장자를 읽는 방법을 찾고 있습니다.

모든 소스 및 대상 메서드는 두 번째 인수로 monitor 를 받습니다. ( canDrop 포함)

monitor.getItem() 를 사용하여 현재 드래그된 항목을 가져올 수 있습니다.

참조:

canDrop(props, monitor): Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
monitor 를 사용할 수 있습니다.

파일에는 작동하지 않습니다

이상하다.
파일 시스템에서 대상으로 파일을 드래그 앤 드롭하고 있다고 생각하십니까?

나는 비슷한 일을했고 그것이 나를 위해 일하는 것 같습니다. 코드를 공유할 수 있다면 무엇이 잘못되었는지 알 수 있습니다.

canDrop 메서드에서 파일 확장자를 읽는 방법을 보여 주시겠습니까?

위에서 이미 언급했듯이 canDrop monitor.getItem().files 는 기본 File 개체의 배열을 제공해야 합니다.

내 주먹 댓글을 읽으십시오. canDrop에서 파일을 읽을 때 내가 언급한 것과 같은 오류가 발생합니다. canDrop에서 파일을 읽는 작업 예제가 있습니까? 아니면 그냥 설명서를 참조합니까? 오류는 드롭 이벤트까지 파일을 읽을 수 없다고 말합니다. NativeDragSources.js:61 브라우저는 드롭 이벤트까지 "파일" 읽기를 허용하지 않습니다.

두 가지 다른 버전을 사용 중일 수 있으며 이 제한 사항은 나중에 추가되었습니다. 2.1.4를 사용하고 있습니다.

알겠습니다. 최신 버전을 테스트하고 작동하는지 알려 드리겠습니다.

canDrop 에 있는 파일을 MIME 유형으로 필터링하려고 할 때도 이 문제가 발생합니다. monitor.getItem().files 를 호출하자마자 위의 경고가 발생합니다(Chrome 56.0.2924.87, react-dnd 2.2.4, react-dnd-html5-backend 2.2.4).

MDN 에 따르면 적어도 event.dataTransfer 속성을 사용하여 수행할 수 있지만 내가 볼 수 있는 한 react-dnd는 해당 개체나 해당 정보를 어디에도 노출하지 않습니다.

@theTechie

두 가지 다른 버전을 사용 중일 수 있으며 이 제한 사항은 나중에 추가되었습니다. 2.1.4를 사용하고 있습니다.

아니요, 같은 버전을 사용합니다. 또한 가능한 최신 버전(2.2.4)으로 업데이트되고 동일한 오류가 발생합니다.

canDrop 메서드는 다음과 같습니다.

canDrop: function (props, monitor) {      
        let files = monitor.getItem().files;
        console.log('Files: ', files);
        return true;
    }

그것은 당신의 편에서 어떻게 작동 할 수 있습니까? 작업 예가 있습니까?

작업 예제를 곧 공유하겠습니다.
2017년 3월 6일 월요일 오후 4:12 Andrey Karavaychik [email protected]
썼다:

@theTechie https://github.com/theTechie

두 가지 다른 버전을 사용 중일 수 있으며 이 제한 사항은
나중에 추가되었습니다. 2.1.4를 사용하고 있습니다.

아니요, 같은 버전을 사용합니다. 또한 가능한 최신 버전으로 업데이트됨
(2.2.4) 동일한 오류가 발생합니다.

[이미지: 이미지]
https://cloud.githubusercontent.com/assets/710513/23606619/8acabe7a-0272-11e7-8db1-b1c88870cf92.png

canDrop 메서드는 다음과 같습니다.

canDrop: 기능(소품, 모니터) {
let 파일 = monitor.getItem().files;
console.log('파일: ', 파일);
true를 반환합니다.
}

그것은 당신의 편에서 어떻게 작동 할 수 있습니까? 작업 예가 있습니까?

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

문안 인사,
가간

@andrewQwer - 정말 죄송합니다!
내가 구현한 것에 대한 잘못된 메모리가 있고 monitor.getItem().files in canDrop 을 사용하지 않습니다. 내가 하는 일은 파일 수를 한 번 유지하여 삭제할 수 있는 파일 수를 제한하는 것뿐입니다. 떨어졌다.

오해의 소지가 있어 죄송합니다!

추신: 이를 달성할 수 있는 방법을 찾고 있습니다. 가능하면 알려 드리겠습니다.

나는 이것이 결코 가능할 것이라고 생각하지 않는다. 드래그한 항목에 대한 정보 읽기는 보안을 위해 의도적으로 제한되어 있는 것 같습니다.

http://stackoverflow.com/questions/25016442/how-to-distinguish-if-a-file-or-folder-is-being-dragged-prior-to-it-being-droppe

event.dataTransfer 개체(예: types )를 통해 파일에 대한 일부 정보를 노출할 수 있습니까? 나는 그것이 모든 사용 사례를 만족시킬 수는 없지만 적어도 일부는 도움이 될 것이라는 것을 알고 있습니다.

이것은 HTML5 백엔드에 추가해야 할 사항일 수 있지만 파일/폴더가 삭제되기 전에 파일이 허용되는 MIME 유형 집합에 맞는지 확인할 수 있습니다. 특히 react-dropzone은 이 예제 에서 볼 수 있는 것처럼 dropzone 위에 항목을 놓을 때 이 작업을 수행합니다.

아직 이 문제에 대한 해결책이 있습니까?

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

오래되지 않은

또한 react-dropzone과 같은 이미지, 비디오와 같은 특정 파일을 삭제할 수 있는 방법을 찾고 있습니다. 누구든지 해결책이 있습니까?

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

나도 문제가있다. "NativeDragSource.ts"에 상당히 하드코딩된 것 같습니다.

DragSource를 생성하지만 값에 액세스하기 위해 브라우저에서 허용하지 않는다는 콘솔 경고만 추가합니다.

그러나 브라우저는 이를 허용합니다. 보호 모드일 뿐이며 파일을 변경하거나 DATA에 액세스하는 것을 허용하지 않습니다(파일의 속성이 있는 항목은 열거할 수 있어야 합니다. (DropZone이 하는 것처럼) .

뭔가를 시도하고 당신에게 돌아올 것입니다

@LeopoldLerch @darthtrevino 여전히 files 목록에 액세스할 수 없습니다. 호버에서 파일의 MIME 유형을 확인하고 파일의 유효한 형식인지에 따라 테두리 색상을 변경하고 싶습니다. useDrop 후크에 canDrop 메서드를 사용하고 있습니다. 그리고 내가 드롭했을 때 파일 배열을 반환합니다. 드롭 영역 위로 마우스를 가져 가면 빈 배열이 있습니다.

문제는 브라우저가 전달하는 이벤트는 있는 그대로이며 변경할 수 없다는 것입니다. 브라우저는 dragstart에서만 데이터에 대한 액세스를 제공합니다. 그 후에는 모든 후속 이벤트가 보호 모드에 있으므로 데이터에 액세스할 수 없습니다.

useDrop의 onHover 메소드를 사용하면 브라우저가 "dragenter"에서 액세스하는 것을 허용하지 않기 때문에 빈 메타데이터를 얻게 됩니다. dragstart(또는 수집 기능)에 개체를 저장하더라도 브라우저는 배경에서 속성을 지울 것입니다. 왜냐하면 당신은 개체의 복사본이 아니라 개체에 대한 참조를 가지고 있기 때문입니다.

이 문제를 해결하는 유일한 방법은 "수집" 기능을 사용하는 것입니다. 여기에서 항목의 "항목" 또는 "파일"에 액세스할 수 있습니다(사용하는 브라우저에 따라 IE11은 ondrop 전에 액세스를 허용하지 않습니다).

그러나 모든 것을 스스로 해야 합니다. 예를 들어 유효성 검사 및 기억. useRef. 예를 들어

collect: monitor => {
            const item: DataTransfer = monitor.getItem();
            const isOver = monitor.isOver();
            let _canDrop: VerificationResult = null;
            if (item) {
                if (item.items) {
                    if (item.items.length > 0) {
                        draggedFilesValid.current = allFilesAccepted(
                            fromList<DataTransferItem>(item.items),
                            accept,
                            multiple,
                            maxSize,
                            minSize
                        )
                            ? VerificationResult.Valid
                            : VerificationResult.Invalid;
                    }
                }
            } else {
                draggedFilesValid.current = null;
            }

            if (isOver && item && item.files) {
                _canDrop = VerificationResult.Unknown;
                if (draggedFilesValid.current != null) {
                    _canDrop = disabled
                        ? VerificationResult.Invalid
                        : draggedFilesValid.current;
                }
            }

            return {
                isDragActive: item != null,
                canDrop: _canDrop
            };
        }

@LeopoldLerch
설명 감사합니다! 나는 이런 종류의 해결 방법을 시도 할 것입니다