Проверьте высоту и ширину изображения в DropZone Polaris - PullRequest
Новая
       74

Проверьте высоту и ширину изображения в DropZone Polaris

0 голосов
/ 22 января 2020

Если мы хотим проверить высоту и ширину изображения в зоне пропуска, нам нужно написать функцию в customValidator. Но проблема в том, что нам нужно извлечь загруженное изображение из памяти браузера и добавить код для image.onload, который является асинхронным, поэтому даже если мы проверяем изображение и возвращаем функцию true или false в customValidator, Функция уже возвращена, поскольку она не является асинхронной c. Пожалуйста, посмотрите код, который я пробовал: 

<DropZone
                            key={uploadCount}
                            onDrop={(files, acceptedFiles, rejectedFiles) => {
                                this.handleFileUpload(files);
                                this.setState({ files: acceptedFiles });
                                this.setState(prevState => ({ uploadCount: prevState.uploadCount + 1 }));
                            }}
                            customValidator={async (file) => {
                                let isValid;
                                await this.validateImage(file).then( result => {
                                    isValid = result;
                                } )
                                return isValid;
                            }}
                            type="image"
                            allowMultiple={false}
                        >
                            {uploadedFiles}
                            {fileUpload}
                        </DropZone>

validateImage = (file) => {

        return new Promise((resolve, reject) => {
            let img = new Image();
            img.src = window.URL.createObjectURL(file);
            img.onload = () => {
                console.log(img.width, img.height)
                if (img.width >= 200 && img.height >= 200) {
                    resolve(true);
                } else {
                    //this.toggleErrorToast();
                    resolve(false)
                }
            }
            img.onerror = reject
          })
    }

Кто-нибудь сталкивался с такой ситуацией в компоненте DropZone polaris? Ссылка Do c: https://polaris.shopify.com/components/actions/drop-zone

...